Hello World.
LiSMOtechの久津間です。
WEBアプリケーションを作成しているとお問い合わせフォームなどのフォームを作る機会があると思います。
今回の記事ではFormクラスによるフォーム画面の作成について紹介をしていきます。
なお、ModelForm（モデルからフォームを作成）での方法は今回の記事では紹介しません。
Webサイトでお問い合わせをする時や予約をする時、その他にもアカウントの登録する時などに個人情報などを入力することがあると思います。
そのようなユーザーに入力を促す箇所をフォームといいます。
ユーザーがフォームに入力した情報をサーバー側で受け取り、データベースに保存したりメールを送信したりと様々な処理を行います。
Djangoではviewでその内容を受け取り各処理を設定することが可能です。
それではフォームを作成する準備を進めていきます。
先ずはプロジェクトの作成です。
事前に「django-form」などのフォルダを作成してそちらの中で作業を進めていきます。
django-admin startproject config .
続いてアプリを作成します。
python manage.py startapp contact
settings.pyのINSTALLED_APPSに上記で作成した「contact」アプリケーションを追加します。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'contact.apps.ContactConfig',
]
URLディスパッチャの設定を行います。
urls.pyを開きcontactのパスを追加します。
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('contact/', include('contact.urls')),
]
contactアプリ配下にurls.pyを作成し以下のように編集します。
from django.urls import URLPattern, path
from . import views
urlpatterns = [
path('', views.Index.as_view(), name='index')
]
contactアプリ配下にtemplatesフォルダを作成し、index.htmlを作成します。
from django.shortcuts import render
from django.views.generic import TemplateView
# Create your views here.
class Index(TemplateView):
template_name = "index.html"
# 追加
def get_context_data(self,**kwargs):
context = super().get_context_data(**kwargs)
context["message"] = "NEXTGATE LiSMOtech"
return context
それでは、本題のフォームクラスを作成していきます。
先ずはforms.pyを作成したアプリ配下に作成し、フォームクラスを定義していきます。
フォームクラスはdjango.forms.Formのサブクラスとして定義するため、formsをインポートします。
その他はフォームに必要な要素を定義していきます。
from django import forms
class ContactForm(forms.Form):
name = forms.CharField(label='名前', max_length=100)
email = forms.EmailField(label='メール', max_length=100)
message = forms.CharField(
label='お問い合わせ内容',
widget=forms.Textarea(attrs={'placeholder':'お問い合わせ内容'}),
max_length=1000
)
view.pyを再度編集します。
作成したフォームクラスをインポートし、インスタンス化したフォームクラスをテンプレートファイルに渡します。
from django.shortcuts import render
from django.http import HttpResponse
from django.views.generic import TemplateView
from .forms import ContactForm # 追加
# Create your views here.
class Index(TemplateView):
template_name = "index.html"
def get_context_data(self,**kwargs):
context = super().get_context_data(**kwargs)
context["message"] = "NEXTGATE LiSMOtech"
context["form"] = ContactForm() # 追加
return context
ここまでできたら、サーバーを起動し「http://127.0.0.1:8000/contact/」にアクセスしてみましょう！
無事にフォーム画面が作成されました！
フォーム画面は作成できましたが、これだけでは送信することができないため、とりあえずで送信することも可能にしていきます。
先ずは、view.pyファイルでpost時の処理を追加します。
def post(self, request, *args, **kwargs):
context = {
'message': "送信OK",
'name': request.POST['name'],
'email': request.POST['email']
}
return render(request, 'confirmation.html', context)
続いて、temppatesフォルダ配下に「confirmation.html」を作成します。
フォームを送信し、送信内容が表示されていれば成功です。
今回はフォームクラスを使ったフォーム画面の作成を行いました。
フォームは色々な場面で使用すると思うので、この機会に色々とご自身でも触って深掘りしていきましょう。
ともに考え、寄り添う。プロのデザインチームが即参戦。
販促ツールや一貫したデザインによるブランド構築などビジネスの成長をデザインの力で促進します。
NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。
お得な情報がLINEに届く！！
LINE公式アカウントはこちらから。
NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。
平日10:00〜19:00
© NEXTGATE LiSMOtech All rights reserved
