今回は「Getform」というサービスの使い方を解説します。
Getformとは
「Getform」は、WebサイトやWebアプリに簡単にフォーム送信を実装できるサービスです。
サーバーの設定とか難しいバックエンドの作成も不要。
今回は、例としてHTMLのみでGetformを使ってお問い合わせフォームを作る方法を解説します。 HTMLのみなので、WordPressだろうがReactだろうが実装できてしまいます。
今回作るお問い合わせフォームの完成イメージが上の画像の通り。
本番環境にデプロイする必要もなく、localhost環境で動作を確認できるのもメリットです。
また、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で以下のようなコードを書けば、お問い合わせフォームは完成です。
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はお好みで構いませんが、今回は以下のようにしました。
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のマイページを見てみましょう。
すると、お問い合わせが1件届いていることがわかります。 先ほど試しに送信してみたお問い合わせですね。
いくつ受信できるの？
Getformの無料プランでは、100MBの容量が用意されています。
無料プランの場合、そんなにたくさん受信できるわけではなさそうです。
ただ、Getformに登録した自分のメールアドレス宛てにもお問い合わせ内容は届きます。
こっちは保存しておいて、Getformで受信したお問い合わせはこまめに削除する、みたいな運用でもいいかもですね。
まとめ
最後に記事をまとめます。
今回は「Getform」の使い方を解説しました。
「Getform」を使えば、自分の作ったWebサイトやWebアプリに「フォーム送信」を実装できます。
HTMLのコードのみで実装できるため、WordPressで作ったサイトやReactで作ったアプリにも実装可能。
今回はお問い合わせフォームを作りました。
また、「Getform」は無料プランと有料プランがあります。 無料プランのみでお問い合わせフォームを作ることができます。
ただ、無料プランだと容量が少ないというデメリットはあります。
ですが、お問い合わせ内容は自分のメールアドレス宛てにも送られてきます。 そっちをメインに保存するという運用もありかもしれません。
というわけで記事は以上です。