ヒロヤンです!!
djangoでwebアプリを作成して、お問い合わせフォームを作る時に役に立つコードを紹介します。
本記事では「お問い合わせフォームを0から作成したいけど、どんなコードを書けばいいかわからない。」って人へ向けの記事にあります。
本記事のコードを参考に、是非作成をしてみてください。
コンテンツ
環境
・python 3.8
・django 3.0
「djangoの基礎・概念はある程度理解している。」
「GETとPOSTの違いが理解できている。」
という前提で進めて行きます。
ゴール
今回ゴールとなるお問い合わせフォームには以下の4項目を設定します。
- 氏名
- メールアドレス
- 件名
- お問い合わせ内容
それを以ってして以下のような仕上がりになります。
上記にcssでデザインを付け加えたものが以下になりますが、今回はあくまでサーバーサイドのお問い合わせフォームに関して注視してコードを紹介して行きますので、cssは割愛をします。
お問い合わせフォームのコード紹介
djangoのフォームを作成する上で、外せないのはforms、views、htmlの3つになりますが順に説明をして行きます。
forms（フォームズ）の作成
フォームズは、大きな役割を2つ持っています。
- ユーザーの入力データを保持する
- 入力データのバリデーション(妥当性の検証)を行い、バリデーション済みのデータとエラーを保持する
上記の役割を理解しながら、forms.pyには以下のように記述します。
forms.py
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
from django import forms class InquiryAddForm(forms.Form): """お問い合わせフォーム """ name = forms.CharField( required=True, max_length=255, widget=forms.TextInput( attrs={ 'placeholder': '氏名', } ) ) email = forms.EmailField( required=True, max_length=255, widget=forms.EmailInput( attrs={ 'placeholder': 'your-email@example.com', } ) ) subject = forms.CharField( required=True, max_length=255, widget=forms.TextInput( attrs={ 'placeholder': '件名', } ) ) message = forms.CharField( required=True, max_length=1024, widget=forms.Textarea( attrs={ 'placeholder': '本文', } ) ) def clean(self): cleaned_data = super().clean() return cleaned_data def clean_name(self): name = self.cleaned_data['name'] return name def clean_email(self): email = self.cleaned_data['email'] return email def clean_subject(self): subject = self.cleaned_data['subject'] return subject def clean_message(self): message = self.cleaned_data['message'] return message |
バリデーション（43行目以下）はなくても大丈夫ですが、一応書きました。
注意点を幾つかあげます。
- required=Trueは入力必須になります
- max_lengthは入力できる最大文字数になります
- attrsのplaceholderはinputフォームに半透明で表示されている文字になります
views（ビューズ）の作成
ビューズはフォームズで受け取る値を処理する箇所になります。
views.py
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
from .forms import InquiryAddForm def inquiry(request): """問い合わせ """ form = InquiryAddForm() if form.is_valid(): pass context = { 'form': form } return render(request, 'sample.html', context) |
6行目のif form.is_valid()で、フォームに入力されて値が正しい場合の処理を書くことが一般的となっています。
お問い合わせフォームの場合、2つの処理が考えられるのではないでしょうか。
- 内部にmodelsを用意してpostされたデータを保存する
- 指定のメールへ送信する
今回はpassで割愛させていますが、興味がある方は2.の指定のメールへgmailのAPIを用いた送信方法を以下で紹介しています。
sample.html
最後に、フロント側の処理をhtmlに書く必要があります。
sample.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<form action="" method="POST"> {% csrf_token %} <div class=""> <h1>お問い合わせ</h1> <table class=""> <tr> <th>氏名</th> <td>{{ form.name }}{{ form.name.errors }}</td> </tr> <tr> <th>メールアドレス</th> <td>{{ form.email }}{{ form.email.errors }}</td> </tr> <tr> <th>件名</th> <td>{{ form.subject}}{{ form.subject.errors }}</td> </tr> <tr> <th>お問い合わせ内容</th> <td>{{ form.message }}{{ form.message.errors }}</td> </tr> </table> <button type="submit">お問い合わせを送信する</button> </div> </form> |
- 1行目のformタグのmethod=”POST”とすることで入力されたPOSTデータを受け取ります
- formタグのmethod=”POST”と23行目のtype=”submit”はセットで必要になります
- 8行目のform.name.errorsというようにerrorsを用意することで、エラー時にこちらにエラー内容が自動的に表示されるようになっています
以上。
参考
https://docs.djangoproject.com/ja/4.0/intro/tutorial04/
最後に
いかがでしたでしょうか。
以上が、「【Django】お問い合わせフォームを作成する」の紹介記事になります。
