PROGRAMMING

Netlifyを使ってコンタクトフォームを追加する【Gatsby.js】

ウェブサイトにお問い合わせフォームの追加を今回はしていきたいと思います。

その際にnetlifyを使って、コンタクトフォームを作成していきたいと思います。

今回もgatsbyの公式ドキュメントを参考にさせていただきました。

今回はnetlifyを使わせて頂きましたが、他にもGetformFormspreeなどのツールの使い方も公式ドキュメントで紹介されています。

この記事でわかること
・コンタクトフォームの作成方法
・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

これでまずはページ自体を作成することができました。

きちんと/contactとやってもページが表示されるかどうかを確認してみて下さい。

それではコンタクトフォームをこのページに作成していきます。

コンタクトフォーム

ここから、フォームの作成に取り組んでいきます。

基本的に、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の方をいじっていこうと思いますが、それは次回にします。

また次回もよろしくお願い致します。

最後まで読んで頂きありがとうございました。

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.