RalaCode

44件の記事があります

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

【フォーム送信を実装】Getform.ioの使い方を解説【HTMLのみでOK】
サムライエンジニアプラス

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

Getformとは

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

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

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

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

今回作るお問い合わせフォームの完成イメージ図

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

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

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

Getformのアカウントを作る

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

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

「Generate endpoint for free」をクリック

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

必要事項を入力して「Sign up」をクリック

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

  • 名前

  • メールアドレス

  • パスワード

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

メールの受信トレイを確認し、「Verify email」をクリック

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

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

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

エンドポイントを作る

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

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

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

「Create...」をクリック

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

エンドポイントの名前とタイムゾーンを決めて「Create」をクリック

以下の2つを決めます。

  • エンドポイントの名前

  • タイムゾーン

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

  • react-contact-form

  • Tokyo (GMT+09:00)

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

エンドポイントのURLをコピーする

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

エンドポイントの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;
}
今回作ったお問い合わせフォームの見た目

サイトの見た目は上記のようになっているかと思います。

お問い合わせを送信してみる

サイトは実際のネット環境に公開する必要はありません。
テスト環境(localhost環境)で動作確認できます。

試しにお問い合わせを送信してみましょう。

試しにお問い合わせフォームを送信してみる

上の画像のように操作します。

  • お名前

  • メールアドレス

  • お問い合わせ内容

上記を入力して「送信する」をクリックします。

すると、Getformのページが表示されて「Thank You!」というメッセージが出ます。
Back to Previous Page」をクリックすれば、元のお問い合わせページに戻ります。

Getformのページを開くと、お問い合わせが届いている

ここでGetformのマイページを見てみましょう。

すると、お問い合わせが1件届いていることがわかります。
先ほど試しに送信してみたお問い合わせですね。

いくつ受信できるの?

Getformの無料プランでは、100MBの容量が用意されています。

>> Getformのプラン内容を見る

無料プランの場合、そんなにたくさん受信できるわけではなさそうです。

登録メールアドレスにもお問い合わせ内容が送られてくる

ただ、Getformに登録した自分のメールアドレス宛てにもお問い合わせ内容は届きます。

こっちは保存しておいて、Getformで受信したお問い合わせはこまめに削除する、みたいな運用でもいいかもですね。

まとめ

最後に記事をまとめます。

今回は「Getform」の使い方を解説しました。

「Getform」を使えば、自分の作ったWebサイトやWebアプリに「フォーム送信」を実装できます。

HTMLのコードのみで実装できるため、WordPressで作ったサイトReactで作ったアプリにも実装可能。

今回はお問い合わせフォームを作りました。

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

ただ、無料プランだと容量が少ないというデメリットはあります。

ですが、お問い合わせ内容は自分のメールアドレス宛てにも送られてきます。
そっちをメインに保存するという運用もありかもしれません。

というわけで記事は以上です。

あなたにおすすめ

サムライエンジニアプラス

この記事を共有

以下のボタンを押すとSNSが開きます

関連記事

【Mac向け】nvmでNode.jsをインストールする方法

【Mac向け】nvmでNode.jsをインストールする方法

【Mac・Windows両対応】Yarnをインストールする手順を解説

【Mac・Windows両対応】Yarnをインストールする手順を解説

【最新バージョン対応】React Routerの使い方を解説

【最新バージョン対応】React Routerの使い方を解説

ReactとFirebaseで認証機能を実装する方法【作りながら解説】

ReactとFirebaseで認証機能を実装する方法【作りながら解説】

Reactで作ったアプリをNetlifyにデプロイする方法

Reactで作ったアプリをNetlifyにデプロイする方法

【React】inputに入力された値(value)を取得する

【React】inputに入力された値(value)を取得する

RalaCodeTwitter
© 2022 RalaCode | Privacy Policy