3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

#前提
Gmailのみ
※Gmailを使った実装については後日記述いたします。

Djangoインストール済み

プロジェクト名:sample
アプリ名:contact

#本題
早速実装していきます。

Djangoをインストールしたら、プロジェクトを作成します。

$ django-admin startproject project

cdコマンドでprojectディレクトリに移動したら、アプリのディレクトリを作成します。

$ python3 manage.py startapp contact

settings.pyを修正していきます。

sample/project/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'contact', #追記
]

LANGUAGE_CODE = 'ja' #変更
TIME_ZONE = 'Asia/Tokyo' #変更

settings.pyと同じディレクトリにあるurls.pyにアプリが紐づくように編集します。

sample/project/urls.py
from django.contrib import admin
from django.urls import path, include # 追記

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

次はcontactディレクトリ内を編集します。
新しくurls.pyを作成し、URLパターンを記述します。

sample/contact/urls.py
from django.urls import path
from . import views

app_name = 'contact'
urlpatterns = [
        path('', views.index, name='index'),
        path('contact_form/', views.contact_form, name='contact_form'),
        path('contact_form/contact/complete/', views.complete, name='complete'),
]

テンプレートと紐づけるためにcontacディレクトリ内のviews.pyを編集します。

sample/contact/views.py
from django.shortcuts import render


def index(request):
    return render(request, 'contact/index.html')

# お問い合わせフォーム画面
def contact_form(request):
    return render(request, 'contact/contact_form.html')

# 送信完了画面
def complete(request):
    return render(request, 'contact/complete.html')

続いてテンプレートの作成です。
contactディレクトリ内に新しくtemplatesというディレクトリ(フォルダ)を作成し、
templatesディレクトリ内にcontactディレクトリを作成し、
contactディレクトリ内にindex.htmlを作成していきます。

sample/contact/templates/contact/index.html
<!doctype html>
<html>
  <head>
    <title>Webサイト</title>
  </head>
  <body>

<center>
<a href="{% url 'contact:contact_form' %}">
<h2>お問い合わせフォーム</h2>
</a>
</center>
</body>
</html>

続いてお問い合わせフォームです。

sample/contact/templates/contact/contact_form.html
<center>
<h1>入力フォーム</h1><hr><br>
</center>

送信完了画面です。

sample/contact/templates/contact/complete.html
<center>
<h1>送信完了</h1>
<a href="{% url 'contact:index' %}">
<p>トップへ</p>
</a>
</center>

##フォームの作成

DjangoのFormクラスを使ってテンプレートを表示させます。
contactディレクトリ内に新しくforms.pyを作成します。

sample/contact/forms.py
from django import forms

class ContactForm(forms.Form):
    subject = forms.CharField(label='件名', max_length=100)
    sender = forms.EmailField(label='Email', help_text='※ご確認の上、正しく入力してください。')
    message = forms.CharField(label='メッセージ', widget=forms.Textarea)
    myself = forms.BooleanField(label='同じ内容を受け取る', required=False)

■subject:件名
■sender:Eメール入力
■help_text:後にテンプレートで表示される注意書き。
■message:書き込む内容、widget=forms.Textareaとすることで
複数行書き込めるテキストボックスが渡されます。
■myself:チェックボックス。

作成したContactFormをviews.pycontact_formで処理し、
テンプレートに表示できるようにします。

sample/contact/views.py
from django.shortcuts import render, redirect # 追記
from .forms import ContactForm # 追記

........
........
def contact_form(request):
    if request.method == 'POST':
        form = ContactForm(request.POST)
        if form.is_valid():
            return redirect('contact:complete')
    else:
        form = ContactForm()
    return render(request, 'contact/contact_form.html', {'form': form})
.........
.........

POSTされたフォームの内容をform.is_valid()で検証し正しければ
complete.htmlに渡されるという記述です。

次に表示するための記述をしていきます。
contact_form.htmlを編集します。

sample/templates/contact/contact_form.html
<center>
<h1>入力フォーム</h1><hr><br>

<!--追記-->
<form action="{% url 'contact:contact_form' %}" method="post">
    {% csrf_token %}
<table>
    {{ form.as_table }}
</table><br>
    <input type="submit" value="送信">
</form>
</center>

{% csrf_token %}はクロスサイトリクエストフォージェリ (CSRF) 対策。
これがないとエラーになってしまいます。

Gmailについては後日記述いたします。

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?