[Django] 初めての問い合わせフォーム(form)作成方法。[超基本編]

2021年12月8日2022年6月4日

この記事ではDjangoで初めての問い合わせフォームを作成する人向けに作成しています。

そのため実務で使うには少々機能が足りていません。またClassBasedViewで実装しております。

本記事では超入門向けのシンプルな問い合わせフォームになります。

そのため以下の内容を解説は行いません。

・CSSが適用された綺麗なフォーム
・問い合わせの確認画面(confirm)
・入力のValidation機能（入力値が期待された形式か？）
・問い合わせ時の履歴をDBに保存

より実践的な問い合わせフォームを必ず本記事の内容をマスターした後に別記事の実践向け問い合わせフォームを解説記事を確認ください。

準備中

オススメ記事

Djangoの最強入門書！手を動かしながらブログアプリ（CMS）を作成して脱初心者しよう！

ディレクトリ構成とファイル群の一覧

以下のディレクトリ構成および編集対象のファイル郡です。

root/
 ├ contact_form
 │ ├ forms.py
 │ ├ urls.py
 │ └ views.py
 ├ procject
 │ ├ settings.py
 │ └ urls.py
 └ templates
   ├ contact.html
   └ thanks.html

Djangoを動かすためにはその他にファイルが必要なのでご注意ください。

Djangoの管理スクリプトのstartappで「cantact_form」を作成します。

python manage.py startapp contact_form

startappするとadmin.pyやapps.pyなどが作成されますが、今回は触りません。

forms.pyの作成

まずはforms.pyを作成します。最もシンプルなフォームを利用するため、Formクラスを利用します。

from django import forms
from django.conf import settings
from django.core.mail import BadHeaderError, send_mail
from django.http import HttpResponse


class ContactForm(forms.Form):
    name = forms.CharField(
        max_length=100,
        widget=forms.TextInput(attrs={
            'placeholder': "name",
        }),
    )
    email = forms.EmailField(
        widget=forms.EmailInput(attrs={
            'placeholder': "email",
        }),
    )
    subject = forms.CharField(
        max_length=100,
        widget=forms.TextInput(attrs={
            'placeholder': "subject",
        }),
    )
    message = forms.CharField(
        widget=forms.Textarea(attrs={
            'placeholder': "message",
        }),
    )

    def send_email(self):
        name = self.cleaned_data['name']
        email = self.cleaned_data['email']
        subject = 'お問合せがありました'
        message = '名前:{name}\n' \
                  'メール:{email}\n' \
                  '件名:{subject}\n' \
                  '問い合わせ内容:\n' \
                  '{message}\n'.format(name=name,
                                       email=email,
                                       subject=self.cleaned_data['subject'],
                                       message=self.cleaned_data['message'])
        from_email = '{name} <{email}>'.format(name=name, email=email)
        recipient_list = [settings.EMAIL_HOST_USER]
        try:
            send_mail(subject, message, from_email, recipient_list)
        except BadHeaderError:
            return HttpResponse("無効なヘッダが検出されました。")

views.pyの作成

views.pyの中に問い合わせ用のViewと問い合わせ完了（Thanks）Viewの2つを作成します。

from django.urls import reverse_lazy
from django.views.generic import TemplateView
from django.views.generic.edit import FormView

from .forms import ContactForm


class ContactFormView(FormView):
    template_name = 'contact.html'
    form_class = ContactForm
    success_url = reverse_lazy('contact_form:thanks')

    def form_valid(self, form):
        form.send_email()
        return super().form_valid(form)


class ThanksView(TemplateView):
    template_name = 'thanks.html'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['message'] = "お問合せありがとうござます。"
        return context

urls.pyの作成

urls.pyに問い合わせと問い合わせ完了（Thanks）のルーティングを設定を行います。

from django.urls import path

from .views import ContactFormView, ThanksView

app_name = 'contact_form'

urlpatterns = [
    path('', ContactFormView.as_view(), name='contact'),
    path('thanks/', ThanksView.as_view(), name='thanks'),
]

contact.htmlとthanks.html(Template)の作成

問い合わせと問い合わせ完了（Thanks）のHTMLファイル（Template）作成します。

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <form method="POST">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">送信</button>
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    {{ message }}
</body>
</html>

projectファイルの修正

次にDjangoプロジェクト全体の設定を行います。

urls.py

大元のurls.pyに今回追加するcontact_formのルーティングを通します。

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('contact/', include('contact_form.urls')),
    path('admin/', admin.site.urls),
]

settings.py

Templatesの配置先ディレクトリとsettings.pyに送信サーバの設定を記述します。

# Templateの設定
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates'), これを追記。
        ],
    },
]

# メール設定
EMAIL_HOST = 'smtpサーバ'
EMAIL_HOST_USER = 'メールアドレス'
EMAIL_HOST_PASSWORD = 'パスワード'
EMAIL_PORT = 587
EMAIL_USE_TLS = True