ブログの構築について 〜 Part4
Netlify CMSで問い合わせフォームを作成
[ 目次 ]
はじめに
こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。
この記事は過去に運用していたブログからの移行記事になります。
今回はJekyll + Netlifyで作成したサイトに、問い合わせ画面を追加してみたいと思います。
Jekyllのプロジェクト内に問い合わせフォームのページを作成
<!-- _layout/contact.html -->
---
layout: default
---
<section class="hero is-light is-bold">
<div class="hero-body p-t-sm">
<div class="container has-text-centered">
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul style="margin-left: 0">
<li><a href="{% raw %}{{ '/' | relative_url }}{% endraw %}"><i class="fas fa-home"></i></a></li>
<li class="is-active"><a href="#" aria-current="page">{% raw %}{{ page.title | escape }}{% endraw %}</a></li>
</ul>
</nav>
<h2 class="title">
{% raw %}{{ page.title | escape }}{% endraw %}
</h2>
<h3 class="subtitle p-t-xs">
お問い合わせはこちらのフォームから
</h3>
</div>
</div>
</section>
<section class="section">
<div class="container">
<form name="contact" netlify-honeypot="bot-field" action="thanks" netlify>
<div class="field">
<label class="label">Name</label>
<p class="help m-b-xs">お名前をご記入ください。</p>
<div class="control">
<input class="input" name="name" type="text" placeholder="" required>
</div>
</div>
<div class="field">
<label class="label">Email</label>
<p class="help m-b-xs">メールアドレスをご記入ください。</p>
<div class="control has-icons-left has-icons-right">
<input name="email" class="input" type="email" placeholder="" value="" required>
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-exclamation-triangle"></i>
</span>
</div>
</div>
<div class="field">
<label class="label">Subject</label>
<div class="control">
<div class="select">
<select name="subject" required>
<option>ブログについて</option>
<option>香港旅行についての相談</option>
<option>その他</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">Message</label>
<p class="help m-b-xs">お問い合わせ内容の詳細をご記入ください。</p>
<div class="control">
<textarea name="message" class="textarea" placeholder="" required></textarea>
</div>
</div>
<div class="field is-grouped is-grouped-centered">
<p class="control">
<button type="submit" class="button is-primary">
Submit
</button>
</p>
<p class="control">
<a href="{% raw %}{{ '/' | relative_url }}{% endraw %}" class="button is-light">
Cancel
</a>
</p>
</div>
</form>
</div>
</section>
formタグにnetlify属性を追加するだけで、netlifyへのデータ送信が行われます。また、action属性にはThanksページのURLを指定します。
# contact.md
---
layout: contact
title: Contact
permalink: /contact/
---
デザインの確認は、ローカルPCでjekyllサーバーを起動し調整してください。
http://127.0.0.1/contact/で問い合わせページを開くことができます。
今回は、Name(名前), Email(メールアドレス), Subject(件名), Message(メッセージ)の４項目を問い合わせの項目とします。
Netlifyにデプロイし問い合わせを行います
https://yapunyan.tk/contact/から問い合わせ内容を入力し送信します。
送信が完了するとNetlifyのデフォルトのThanks画面が表示されます（こちらは独自のHTMLに変更できるようです）
Netlifyの管理画面から問い合わせ内容を確認
管理画面からFormsを開きます。Active formsにあるcontactをクリックすると問い合わせ内容が表示されます。
contactという名前はformタグのname属性です。
問い合わせをメールに通知する
Netlifyでは以下の通知機能が用意されています。
- Slackへの通知
- メールへの通知
- Webhookによる通知
今回はメールを飛ばす設定を行います。
改めて管理画面からFormsを開きます。Form handlingにあるNotificationsをクリックします。
Form notifications画面が開きますので、add notification → Email notificationをクリックします。
続いて通知先を設定します。通知対象のメールアドレス。対象となるフォームを選択して保存してください。
以上で設定は完了です。
問い合わせを行うとメールが通知されるか実際に試してみましょう。
