【フォーム送信を実装】Getform.ioの使い方を解説【HTMLのみでOK】

2022 / 02 / 242022 / 03 / 26

React

Data illustrations by Storyset

今回は「Getform」というサービスの使い方を解説します。

Getformとは

「Getform」は、WebサイトやWebアプリに簡単にフォーム送信を実装できるサービスです。

>> 「Getform」の公式サイトを見てみる

サーバーの設定とか難しいバックエンドの作成も不要。

今回は、例としてHTMLのみでGetformを使ってお問い合わせフォームを作る方法を解説します。
HTMLのみなので、WordPressだろうがReactだろうが実装できてしまいます。

今回作るお問い合わせフォームの完成イメージが上の画像の通り。

本番環境にデプロイする必要もなく、localhost環境で動作を確認できるのもメリットです。

また、Getformは「無料プラン」と「有料プラン」があります。
今回作るお問い合わせフォームは、無料プランのみで実装していきます。

Getformのアカウントを作る

まずはアカウントの作り方から解説します。
以下のリンクにアクセスします。

>> Getformのアカウントを作る

リンクをクリックすると、上記のページが開きます。
「Generate endpoint for free」をクリックします。

以下の3つを入力します。

名前
メールアドレス
パスワード

入力したら「Sign up」をクリックします。

登録したメールアドレスの受信トレイを確認してみましょう。

上記のようなメールが届きます。
「Verify email」をクリックします。

Getformのサイトが開いて、アカウント作成は完了です。

エンドポイントを作る

アカウントを作ったら、今度はエンドポイントを作ります。

エンドポイントはIT用語なんですが、ここでは「フォームから送信されてくる情報の受信ボックスみたいなもの」と考えていいと思います。

Getformの無料プランでは、作れるエンドポイントは1つのみです。

上記の画面で、「+ Create...」をクリックします。

以下の2つを決めます。

エンドポイントの名前
タイムゾーン

ここでは、以下のようにしました。

react-contact-form
Tokyo (GMT+09:00)

入力したら「Create」をクリックします。

エンドポイントが作られました。

エンドポイントのURLが表示されているので、コピーしておきます。

そして、このページは開いたままにしておきましょう。

コードの書き方

HTMLで以下のようなコードを書けば、お問い合わせフォームは完成です。

<div className="container">
  <h1>お問い合わせ</h1>
  <!-- ↓コピーしたエンドポイントのURLを貼り付ける -->
  <form
    action="https://getform.io/f/6a292be8-3e2b-4181-af9b-0b4483173541"
    method="POST"
  >
    <div>
      <label for="name">お名前</label>
      <input name="name" type="text" required />
    </div>
    <div>
      <label for="email">メールアドレス</label>
      <input name="email" type="email" required />
    </div>
    <div>
      <label for="content">お問い合わせ内容</label>
      <textarea name="content" type="text" rows="10" required></textarea>
    </div>
    <button type="submit">送信する</button>
  </form>
</div>

今回は以下の項目を入力するように作りました。

お名前
メールアドレス
お問い合わせ内容

項目は自由に変えられます。

formタグに「action」と「method」を指定しています。

actionには、先ほどコピーしたエンドポイントのURLを指定すればオッケー。

上記のコードにあるエンドポイントのURLは、あくまで例なので使用できません。
必ず、ご自分のエンドポイントのURLを貼り付けてください。

cssはお好みで構いませんが、今回は以下のようにしました。

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  background-color: #f7f7f7;
}

.container {
  display: grid;
  row-gap: 30px;
  width: 84%;
  max-width: 640px;
  margin: 60px auto;
}

form {
  display: grid;
  row-gap: 30px;
}

input,textarea {
  width: 100%;
  box-sizing: border-box;
  border: solid 1px #ddd;
  padding: 10px;
  font-size: 16px;
  outline: none;
  appearance: none;
  border-radius: 0;
  resize: none;
}

button {
  justify-self: start;
  border: none;
  background-color: #0d6efd;
  color: #fff;
  padding: 10px;
  font-size: 16px;
}

button:hover {
  cursor: pointer;
  opacity: 0.7;
}