##はじめに
①～③で学んだことを応用して、簡単なお問い合わせフォームを作ってみました。
デザインは少し苦労したけど、それらしきものになったのではないかなと。
①～③はこちらから
##環境
- windows10
- flask2.0.2
- python3.8.10
##お問い合わせフォームのスクリプト
ファイルの構成は下記の通りです。
入力したものに対して出力画面を返し、また特定の入力条件下では別の画面が表示されるように設定しました。
directory/
|__flask1.py
|__templates/
|__form.html #入力用
|__request.html #出力用
|__spetial.html #特定条件での出力用
|__static/
|__style.css #入力用デザイン
|__style2.css #出力用デザイン
|__style3.css #特定条件用デザイン
|__images/
|__～～.png
###入力用
form.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../static/style.css">
<title>お問い合わせ</title>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<form action="#" method="post">
<p class="text">【内容】</p>
<p><textarea name="content" cols="50" rows="5" class="form"></textarea></p>
<p><input type="submit" value="送信" class="button"></p>
</form>
</body>
</html>
style.css
h1 {
color: #007700;/*文字色*/
text-align: center;/*文字-中央寄せ*/
padding: 0.5em 0.5em;/*上下の余白*/
border-top: solid 15px;/*上線*/
border-bottom: solid 15px;/*下線*/
border-image: linear-gradient(to right, #006400, #B6FF01, #B6FF01, #006400)1/1 0 15px;/*グラデーション*/
}
.text{ /*テキスト*/
font-size: 15px;
position:relative;
top: 20px;
left:430px;
}
.form { /*入力フォーム*/
position:relative;
top: 5px;
left:430px;
padding:10px;
border-radius: 6px;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
border-right: 2px solid #aaa;
border-bottom: 2px solid #aaa;
background-image: none
background-color: #ddd;
font-size: 16px;
white-space: normal;
}
.button{ /*送信ボタン*/
font-size: 15px;
position: relative;
left: 620px;
border-radius: 3px;
background: #EEEEEE;
}
###出力用
request.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../static/style2.css">
<title>送信完了</title>
</head>
<body>
<h1>送信完了</h1>
<div class="cover">
<img src="../static/images/greet.png" alt="写真">
<p class="text">お問い合わせありがとうございます。<br>
<br>
2営業日以内に担当から連絡いたしますので、しばらくお待ちください。
</p>
</div>
</body>
</html>
style2.css
h1 {
color: #007700;/*文字色*/
text-align: center;/*文字-中央寄せ*/
padding: 0.5em 0.5em;/*上下の余白*/
border-top: solid 15px;/*上線*/
border-bottom: solid 15px;/*下線*/
border-image: linear-gradient(to right, #006400, #B6FF01, #B6FF01, #006400)1/1 0 15px;/*グラデーション*/
}
.cover {/*画像*/
background-repeat: no-repeat;
position: relative;
top: 10px;
left: 100px;
}
.text{ /*テキスト*/
font-size: 25px;
display: inline-block;
margin-left: 20px;
vertical-align: top;
###特定条件での出力用
special.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../static/style3.css">
<title>秘密のページ</title>
</head>
<body>
<h1>かわいいパン</h1>
<div class="pan">
<img src="../static/images/pan1.png" alt="写真">
<img src="../static/images/pan2.png" alt="写真">
<img src="../static/images/pan3.png" alt="写真">
</div>
</body>
style3.css
h1 {
color: #007700;/*文字色*/
text-align: center;/*文字-中央寄せ*/
padding: 0.5em 0.5em;/*上下の余白*/
border-top: solid 15px;/*上線*/
border-bottom: solid 15px;/*下線*/
border-image: linear-gradient(to right, #006400, #B6FF01, #B6FF01, #006400)1/1 0 15px;/*グラデーション*/
}
.pan {/*画像*/
position:relative;
top: 10px;
left:350px;
}
flask1.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-
#flaskモジュールのインポート
from flask import Flask,render_template
from flask import request
#flaskオブジェクトの作成
app = Flask(__name__)
#htmlファイルの値を受け取る
@app.route('/', methods=['GET'])
def get():
return render_template('form.html')
#postのときの処理
@app.route('/', methods=['POST'])
def post():
content = request.form['content']
#特定の条件下だけ別の画面を出す
if content == 'パンが食べたい。':
return render_template('special.html')
else:
return render_template('request.html')
#pythonで実行されたときに処理をする
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0', port=5000)
「パンが食べたい。」というフレーズが入力された時だけ、違う画面を出すように設定しています(このキーワードにしたのは作者の気まぐれ)。
##お問い合わせフォームの確認
実装したものを動かしてみます。
まずはpyファイルを実行し、localhost:5000と打つことで入力画面が表示されます。
内容にコメントを打ち込んで送信ボタンを押すと、出力用画面に切り替わります。
ちゃんと画面が切り替わりました！
次に「パンが食べたい。」と打った場合はどう変わるでしょうか？
要望通りパンが出てきました🍞
どれもおいしそうで迷っちゃいますね。
コードはgithubにもアップしています。
githubリンク
##まとめ
- 入力フォームの作成ができた
- 条件分岐で出力画面を変化させた
最初はフレームワークって何ぞや？とか入力フォーム作成とかよくわからない状態でしたが、この4回でそれらしいものができるようになりました。
ちょっと。。。感動してます