今回はPythonのフレームワーク「Flask」を使用して、お問い合わせフォームを作成しました。
フォームから入力された内容を管理者と問い合わせ者の双方にメール送信し、確認画面や送信完了画面を含む3ステップの構成となっています。
構築したフォームの構成
お問い合わせフォームの構成は以下のようになっています。
フォームページ (form.html)
名前、メールアドレス、お問い合わせ内容を入力するページです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>お問い合わせフォーム</title>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<form method="post">
<label for="name">お名前:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">メールアドレス:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="message">お問い合わせ内容:</label><br>
<textarea id="message" name="message" rows="4" required></textarea><br><br>
<button type="submit">送信</button>
</form>
</body>
</html>確認ページ (confirmation.html)
入力内容を確認するページです。隠しフィールドを使用して、入力内容を再入力することなく送信できる仕組みを実現しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>お問い合わせ確認</title>
</head>
<body>
<h1>お問い合わせ確認</h1>
<p>お名前: {{ name }}</p>
<p>メールアドレス: {{ email }}</p>
<p>お問い合わせ内容:</p>
<pre>{{ message }}</pre>
<form method="post" action="/contact/submit">
<input type="hidden" name="name" value="{{ name }}">
<input type="hidden" name="email" value="{{ email }}">
<input type="hidden" name="message" value="{{ message }}">
<button type="submit">送信する</button>
</form>
<form>
<button type="button" onclick="history.back()">戻る</button>
</form>
</body>
</html>送信完了ページ (success.html)
メール送信後に表示されるページです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>送信完了</title>
</head>
<body>
<h1>お問い合わせ送信完了</h1>
<p>お問い合わせいただきありがとうございます。</p>
<a href="/">トップページに戻る</a>
</body>
</html>メール送信機能
フォームで入力された内容は以下のように送信されます。
管理者宛メール (email_body_admin.txt)
お問い合わせがありました。
お名前: {{ name }}
メールアドレス: {{ email }}
メッセージ:
{{ message }}問い合わせ者宛メール (email_body_user.txt)
{{ name }} 様
お問い合わせいただきありがとうございます。
以下の内容でお問い合わせを受け付けました。
お名前: {{ name }}
メールアドレス: {{ email }}
メッセージ:
{{ message }}Flaskアプリケーション本体 (main.py)
Flaskのルーティングやメール送信処理を実装しています。
from flask import Flask, request, render_template, redirect, url_for
import smtplib
from email.mime.text import MIMEText
import config
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/contact', methods=['GET', 'POST'])
def contact():
if request.method == 'POST':
name = request.form.get('name')
email = request.form.get('email')
message = request.form.get('message')
return render_template(
'contact/confirmation.html',
name=name,
email=email,
message=message
)
return render_template('contact/form.html')
@app.route('/contact/submit', methods=['POST'])
def contact_submit():
name = request.form.get('name')
email = request.form.get('email')
message = request.form.get('message')
admin_email_body = render_template(
'contact/email_body_admin.txt',
name=name,
email=email,
message=message
)
user_email_body = render_template(
'contact/email_body_user.txt',
name=name,
email=email,
message=message
)
try:
msg = MIMEText(admin_email_body)
msg['Subject'] = "お問い合わせがありました"
msg['From'] = config.EMAIL_ADDRESS
msg['To'] = config.ADMIN_EMAIL
with smtplib.SMTP(config.SMTP_SERVER, config.SMTP_PORT) as server:
server.starttls()
server.login(config.EMAIL_ADDRESS, config.EMAIL_PASSWORD)
server.send_message(msg)
user_msg = MIMEText(user_email_body)
user_msg['Subject'] = "お問い合わせありがとうございます"
user_msg['From'] = config.EMAIL_ADDRESS
user_msg['To'] = email
with smtplib.SMTP(config.SMTP_SERVER, config.SMTP_PORT) as server:
server.starttls()
server.login(config.EMAIL_ADDRESS, config.EMAIL_PASSWORD)
server.send_message(user_msg)
except Exception as e:
print(f"メール送信エラー: {e}")
return redirect(url_for('contact_success'))
@app.route('/contact/success')
def contact_success():
return render_template('contact/success.html')
if __name__ == '__main__':
app.run(debug=True)設定ファイル (config.py)
SMTPサーバーやメール送信に必要な情報を管理します。
SMTP_SERVER = 'smtp.example.com'
SMTP_PORT = 587
EMAIL_ADDRESS = 'your_email@example.com'
EMAIL_PASSWORD = 'your_password'
ADMIN_EMAIL = 'admin@example.com'ファイル構成
最終的なファイル構成は以下の通りです。
.
├── .htaccess # Apache用設定ファイル
├── index.cgi # Flaskアプリケーションのエントリーポイント
├── main.py # Flaskアプリ本体
├── config.py # メール送信設定ファイル
├── templates/ # HTMLテンプレート
│ ├── index.html # インデックスページ
│ └── contact/ # お問い合わせフォーム関連テンプレート
│ ├── form.html # フォームページ
│ ├── confirmation.html # 確認ページ
│ ├── success.html # 送信完了ページ
│ ├── email_body_admin.txt # 管理者宛メール本文テンプレート
│ └── email_body_user.txt # 問い合わせ者宛メール本文テンプレート動作確認
- フォームの入力と送信
/contactにアクセスし、フォームを入力してください。 - 確認画面
入力内容が正しいことを確認し、送信ボタンを押してください。 - メール受信の確認
管理者宛と問い合わせ者宛にメールが届くことを確認してください。
コメント