今回は「Getform」というサービスの使い方を解説します。
Getformとは
「Getform」は、WebサイトやWebアプリに簡単にフォーム送信を実装できるサービスです。
サーバーの設定とか難しいバックエンドの作成も不要。
今回は、例としてHTMLのみでGetformを使ってお問い合わせフォームを作る方法を解説します。
HTMLのみなので、WordPressだろうがReactだろうが実装できてしまいます。
![今回作るお問い合わせフォームの完成イメージ図](https://images.ctfassets.net/o1bgnefm7hbe/mIk1CpJvXr3AREBDnPfhM/cce541d825959bac6fa6a7d707825f50/sampole_image.001.png?w=760&h=570&q=50&fm=png)
今回作るお問い合わせフォームの完成イメージが上の画像の通り。
本番環境にデプロイする必要もなく、localhost環境で動作を確認できるのもメリットです。
また、Getformは「無料プラン」と「有料プラン」があります。
今回作るお問い合わせフォームは、無料プランのみで実装していきます。
Getformのアカウントを作る
まずはアカウントの作り方から解説します。
以下のリンクにアクセスします。
![「Generate endpoint for free」をクリック](https://images.ctfassets.net/o1bgnefm7hbe/3bQSUjYnsL9j3olwx4mXgQ/9b03a98d6f8d51be09d212687fc04adf/start_getform.001.png?w=760&h=570&q=50&fm=png)
リンクをクリックすると、上記のページが開きます。
「Generate endpoint for free」をクリックします。
![必要事項を入力して「Sign up」をクリック](https://images.ctfassets.net/o1bgnefm7hbe/20cPqLrT1BNXXV8gGX7qxR/8e839383735ef5f89b6e48bccd90c917/signup_getform.001.png?w=760&h=570&q=50&fm=png)
以下の3つを入力します。
名前
メールアドレス
パスワード
入力したら「Sign up」をクリックします。
![メールの受信トレイを確認し、「Verify email」をクリック](https://images.ctfassets.net/o1bgnefm7hbe/SlHEyACQNSgfPEACkvbC7/60292a008d084a8e750487b454ab7e93/verify_email.001.png?w=760&h=570&q=50&fm=png)
登録したメールアドレスの受信トレイを確認してみましょう。
上記のようなメールが届きます。
「Verify email」をクリックします。
Getformのサイトが開いて、アカウント作成は完了です。
エンドポイントを作る
アカウントを作ったら、今度はエンドポイントを作ります。
エンドポイントはIT用語なんですが、ここでは「フォームから送信されてくる情報の受信ボックスみたいなもの」と考えていいと思います。
Getformの無料プランでは、作れるエンドポイントは1つのみです。
![「Create...」をクリック](https://images.ctfassets.net/o1bgnefm7hbe/6BDc8tFNCdH6DDpmhhLXt8/d5ea78dc3b1c13997b7be1f7d81c57ba/create_endpoint.001.png?w=760&h=570&q=50&fm=png)
上記の画面で、「+ Create...」をクリックします。
![エンドポイントの名前とタイムゾーンを決めて「Create」をクリック](https://images.ctfassets.net/o1bgnefm7hbe/Z2aYvcDn0LIa4jKQqVf4V/a1fe1d72039623ea19c8cfa345c171fa/fill_name_timezone.001.png?w=760&h=570&q=50&fm=png)
以下の2つを決めます。
エンドポイントの名前
タイムゾーン
ここでは、以下のようにしました。
react-contact-form
Tokyo (GMT+09:00)
入力したら「Create」をクリックします。
![エンドポイントのURLをコピーする](https://images.ctfassets.net/o1bgnefm7hbe/2EKufYW3i7T2YIUtME2KsO/01b3bb806cbb02e91247fef1617faeb6/copy_endpoint_url.001.png?w=760&h=570&q=50&fm=png)
エンドポイントが作られました。
エンドポイントの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;
}
![今回作ったお問い合わせフォームの見た目](https://images.ctfassets.net/o1bgnefm7hbe/5rewmagp2WaZ83ySyLxRKX/8af4078635f903972f82cea7649a0aac/app_front.001.png?w=760&h=570&q=50&fm=png)
サイトの見た目は上記のようになっているかと思います。
お問い合わせを送信してみる
サイトは実際のネット環境に公開する必要はありません。
テスト環境(localhost環境)で動作確認できます。
試しにお問い合わせを送信してみましょう。
![試しにお問い合わせフォームを送信してみる](https://images.ctfassets.net/o1bgnefm7hbe/1YroVPy4gPayrrz10aH1Kg/9c02d0ec284f8fdcebb71317b1a1e438/try_form_submit.001.png?w=760&h=570&q=50&fm=png)
上の画像のように操作します。
お名前
メールアドレス
お問い合わせ内容
上記を入力して「送信する」をクリックします。
すると、Getformのページが表示されて「Thank You!」というメッセージが出ます。
「Back to Previous Page」をクリックすれば、元のお問い合わせページに戻ります。
![Getformのページを開くと、お問い合わせが届いている](https://images.ctfassets.net/o1bgnefm7hbe/3Z9vVGkTcpkPgaZLiGd26H/479cd5c380edcd34f8e934fc938211e1/recieve_form.001.png?w=760&h=570&q=50&fm=png)
ここでGetformのマイページを見てみましょう。
すると、お問い合わせが1件届いていることがわかります。
先ほど試しに送信してみたお問い合わせですね。
いくつ受信できるの?
Getformの無料プランでは、100MBの容量が用意されています。
無料プランの場合、そんなにたくさん受信できるわけではなさそうです。
![登録メールアドレスにもお問い合わせ内容が送られてくる](https://images.ctfassets.net/o1bgnefm7hbe/7lcXJccgxaqf72u5NSUdkb/a26859b1956ad292a175ecedf9cb82bd/receive_form_email.001.png?w=760&h=570&q=50&fm=png)
ただ、Getformに登録した自分のメールアドレス宛てにもお問い合わせ内容は届きます。
こっちは保存しておいて、Getformで受信したお問い合わせはこまめに削除する、みたいな運用でもいいかもですね。
まとめ
最後に記事をまとめます。
今回は「Getform」の使い方を解説しました。
「Getform」を使えば、自分の作ったWebサイトやWebアプリに「フォーム送信」を実装できます。
HTMLのコードのみで実装できるため、WordPressで作ったサイトやReactで作ったアプリにも実装可能。
今回はお問い合わせフォームを作りました。
また、「Getform」は無料プランと有料プランがあります。
無料プランのみでお問い合わせフォームを作ることができます。
ただ、無料プランだと容量が少ないというデメリットはあります。
ですが、お問い合わせ内容は自分のメールアドレス宛てにも送られてきます。
そっちをメインに保存するという運用もありかもしれません。
というわけで記事は以上です。