
ウェブサイトにお問い合わせフォームの追加を今回はしていきたいと思います。
その際にnetlifyを使って、コンタクトフォームを作成していきたいと思います。
今回もgatsbyの公式ドキュメントを参考にさせていただきました。
今回はnetlifyを使わせて頂きましたが、他にもGetformやFormspreeなどのツールの使い方も公式ドキュメントで紹介されています。
この記事でわかること
・コンタクトフォームの作成方法
・netlifyの使い方
今回もこんな感じでやっていきたいと思います。
参考文献
公式のドキュメントを参考にさせて頂きました。
Building a Contact Form
This guide covers how to create a contact form in a Gatsby site, along with an overview of some strategies for handling form data that has been submitted. Gatsby is built on top of React. So anything that is possible with a React form is possible in Gatsby.
セットアップ
まずは基本的なフォームを作成することから始めます。
今回は/contact
というページのファイルを作り、そこに問い合わせのフォームを作成していきます。
最初のステップは、ページを作成し、定型コードを追加することです。
import React from "react"
import Layout from "../components/layout"
const ContactPage = () => (
<Layout>
<h1>Contact</h1>
</Layout>
)
export default ContactPage
これでまずはページ自体を作成することができました。
きちんと/contac
tとやってもページが表示されるかどうかを確認してみて下さい。
それではコンタクトフォームをこのページに作成していきます。
コンタクトフォーム
ここから、フォームの作成に取り組んでいきます。
基本的に、JSXの部分は海外のサイトなどでいろいろなコンタクトフォームのテンプレートが載っているので、コピペするだけで出来てしまいます。
僕の方は比較的シンプルになっています。
import React from 'react';
import Layout from '../components/layout';
import SEO from '../components/seo';
import '../components/contactPage.css'
function ContactPage() {
return (
<Layout>
<SEO title="CONTACT" />
<form
className='contact_form'
name="Contact Form"
method="POST"
data-netlify="true"
action="/pages/success"
>
<input type="hidden" name="form-name" value="Contact Form" />
<h1 className='contactHeader'>CONTACT US</h1>
<label>お名前:</label><input type="text" name="name" className="contact__field" placeholder="お名前を入力して下さい"></input>
<label>メールアドレス:</label><input name="email" type="email" className="contact__field" placeholder="メールアドレスを入力して下さい"></input>
<label>件名:</label><input name='subject' type="text" className="contact__field" placeholder="件名を入力して下さい"></input>
<label>お問い合わせ内容:</label><textarea name='message' className="contact__field" placeholder="お問い合わせ内容を入力して下さい"></textarea>
<div data-netlify-recaptcha="true"></div>
<button type='submit'>送信</button>
</form>
</Layout>
);
}
export default ContactPage;
このコードには、以下の4つのポイントがあります。
1. フォームにはdata-netlify="true"
属性があり、サイトの構築中にフォームを登録するようにNetlifyに指示します。これがないとNetlifyがフォームのデータを読み取ってくれません。
2. フォームには、name
がありそのフォーム自体を説明する属性があります。これは、このコードをデプロイするときにNetlifyがフォームに付ける名前です。
3. フォームの name 属性は非表示の form-name フィールドで繰り返されます。これは絶対に必要なものです。このフィールドを省略したり、名前を誤入力したりすると、入力された内容はエラーを出すか、インターネットの内のどこかで迷子になってしまいます。
4. すべてのフィールドにはname
属性があります。そのデータをNetlify内で永続化するには、フィールドに名前を付ける必要があります。
もう1つのポイントは、Netlifyフォームはローカル開発では機能しないということです。このコードを最初に追加したとき、Netlifyはフォームを認識せず、Netlifyに送信されていません。代わりに、フォームをテストするために(Netlifyを介して)コードをデプロイする必要があります。コードをコミットしてGitHubにプッシュし、Netlify Buildを開始し(すべてが正しく構成されている場合)、サイト(またはプレビュー)がデプロイされた後にフォームを確認します。次に、フォームが適切に送信され、NetlifyUIを介して送信が表示されます。
これで基本的な機能を追加することで出来ました。
これだけでは、きちんとしたフォームにまだなっていないので、CSSを使ってデザインしていきます。
フォームをデザイン
componentsフォルダの下にcontactPage.css
というファイルを作成していきます。components/contactPage.css
こんな感じです。
参考にしたいデザインは下記のCodePenというサイトを参考にするといいと思います。
初心者でも理解しやすいようになっているので、まだプログラミングを始めたばかりの方にはオススメです。
CodePen Search
null
僕のCSSの方はこうなっています。
.contact_form {
height: 120vh;
width: 100%;
background: #fff;
padding: 20px 30px;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
position: relative;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: flex;
}
.contactHeader {
margin: 10px 0;
padding-bottom: 10px;
width: 180px;
color: #78788c;
border-bottom: 3px solid #78788c;
}
.contact_form input {
margin: 10px;
width: 100%;
padding: 10px;
box-sizing: border-box;
background: none;
outline: none;
resize: none;
border: 0;
font-family: 'Montserrat', sans-serif;
transition: all 0.3s;
border-bottom: 2px solid #bebed2;
}
.contact_form textarea {
margin: 10px;
padding: 15px;
width: 100%;
height: 200px;
font-family: 'Montserrat', sans-serif;
transition: all 0.3s;
border-bottom: 2px solid #bebed2;
}
.contact_form input:focus {
border-bottom: 2px solid #78788c;
}
.contact_form label {
margin-top: 40px;
margin-bottom: 10px;
}
.contact_form button {
padding: 8px 20px;
margin-top: 8px;
margin-left: 0.6rem;
font-family: 'Montserrat', sans-serif;
border: 2px solid #78788c;
background: 0;
color: #5a5a6e;
cursor: pointer;
transition: all 0.3s;
}
.contact_form button:hover {
background: #78788c;
color: #fff;
}
サイトはこうなっています。

これでgatsbyの方は完成ですね。
これではまだフォームで送信を押しても何もならないので、netlifyの方でフォームで入力されたデータを管理しなければいけません
それではnetlifyの方をいじっていこうと思いますが、それは次回にします。
また次回もよろしくお願い致します。
最後まで読んで頂きありがとうございました。