いつかGlasgowで朝食を

英語・スペイン語・洋書・文通など趣味についてゆるく書いています

【GatsbyJS】Netlify Formを使ってサイトにお問い合わせフォームをつくる

GatbyJSを用いてWebサイトをつくっています。contactページどうしようかなと思っていたら、Netlifyを使用していればNetlify Formが利用できるらしいのでcontact formをつくってみました。

公式ドキュメントはこちらです。

docs.netlify.com

お問い合わせフォームをつくる

まずはフォームをつくりましょう。src/pagesにcontact.jsを作成して、下記のようにフォームをつくります。

<form className={styles.form}
        name="Contact Form"
        method="POST"
        data-netlify="true"
        action="/success">
        <input type="hidden" name="form-name" value="Contact Form"></input>
        <label>
          <div>お名前</div>
          <input type="text" name="name" className={styles.contact__field}></input>
        </label>
        <label><div>メールアドレス</div>
          <input name="email" type="email" className={styles.contact__field}></input></label>
        <label>
          <div>お問い合わせ内容</div>
          <select name="inquiry" size="1" className={styles.contact__select}>
            <option value="お仕事の相談・依頼">お仕事の相談・依頼</option>
            <option value="お茶会のお誘い">お茶会のお誘い</option>
            <option value="コーヒーのお誘い">コーヒーのお誘い</option>
            <option value="カジュアルなご相談">カジュアルなご相談</option>
            <option value="その他">その他</option>
          </select>
        </label>
        <textarea name="message" className={styles.contactfield} placeholder="こちらにお問い合わせ内容についてお書きください"></textarea>
        <div data-netlify-recaptcha="true"></div>
        <button type="submit">送信</button>
      </form>

ここで大事なポイントが、3つあります。

  • formタグに[name=“Contact Form”]と[data-netlify=“true”]を指定する。

  • <input type="hidden" name="form-name" value="Contact Form" />が必要

  • [name=“Contact Form”]と[value=“Contact Form”]の値は一致

    • [name="contact"]としたなら、value="contact"としなければいけません。

実装したあとは普通にdeployするだけ。本番環境でフォームができていればテスト送信してみましょう。

無事に送信できるとこんな画面が表示されます。

f:id:asssy:20210306142302p:plain

これはNetlify側が用意している送信成功画面です。そしてNetlifyのサイトにいくと、overviewの下の方にRecent form submissionsのコーナーがあるのが分かります。

f:id:asssy:20210306142344p:plain

このように先ほどテスト送信したお問い合わせ内容が表示されます。

問い合わせ内容を通知で受け取る

次にcontactフォームか送信されたお問い合わせの内容を通知やメールで受け取るように設定します。 Netlifyのsite settingsからFormsメニューにいくと、下の方にForm notificationsがあります。

f:id:asssy:20210306142413p:plain

Email to notifyに受け取りたいメールアドレスを入力すればよし。Formは自分のサイトのname属性を入れます。 こんな感じでメールアドレス宛に送信されます。

f:id:asssy:20210306142437p:plain

投稿完了後の成功ページを作成する

このままだと問い合わせ内容を送信したあとのsuccess画面がNetlifyのものになってしまうので、自分のサイトに合わせた送信完了ページをつくります。 formのactionにページを指定します。action="/success" そしてsrc/pagessuccess.jsを作成します。送信が完了されました文言を追加すればよいです。

これでサイトにお問い合わせフォームの設置が完了しました。

Form Design Patterns ―シンプルでインクルーシブなフォーム制作実践ガイド

Form Design Patterns ―シンプルでインクルーシブなフォーム制作実践ガイド

  • 作者:Adam Silver
  • 発売日: 2019/12/24
  • メディア: 単行本(ソフトカバー)

©2021 Neu Journal