HyperFormとは
カスタムURLをセットするだけでフォームが作れる「ヘッドレスフォーム」サービス。
簡単な手順でセットアップができるため、バックエンド開発なしで最短1分でフォームを作成可能。
HyperFormは1つのカスタムURLだけであれば無料で使用可能です。
自動返信メールやSlackおよびGoogleスプレッドシートの外部連携機能なども無料で使えます。
さらに不正問い合わせ防止システムreCAPTCHAを標準搭載しているので悪質なbotによる自動投稿(スパム)を防いでくれます。
HyperFormの使い方
HyperFormの公式ページにアクセスして「無料で使ってみる →」または「会員登録」ボタンを押します。
次に「アカウントを作成」の画面が表示されるので「Googleアカウントで登録」を押す。
登録するとセットアップ画面が表示されるのでカスタムURLをコピーして利用例のコードのようにすればフォームの作成が完了となる。
<form method="post" action="https://hyperform.jp/api/JctmnXXX">
<label>お名前</label>
<input name="お名前" type="text" required>
<label>メールアドレス</label>
<input name="email" type="email" required>
<label>お問い合わせ内容</label>
<textarea name="お問い合わせ内容"></textarea>
<input name="個人情報の利用についての同意" id="consent-check" type="checkbox" value="同意します" required>
<label for="consent-check">個人情報の利用についての同意</label>
<button type="submit">送信</button>
</form>
HyperFormの送信テスト
送信テストとは利用例のコードを使ったフォームのサンプルです。
ここで送信すると挙動を確認することができます。
試しに下図のように入力して送信すると…
Inboxにこのように受信されます。
受信されたものをクリックすると詳細が見られます。
HyperFormのファイルの送信
HyperFormはファイルの送信にも対応しています。
ファイルを送信する際は、formタグにenctype="multipart/form-data" をセットしてください。
<form method="post" action="https://hyperform.jp/api/JctmnXXX" enctype="multipart/form-data">
<label>お名前</label>
<input name="お名前" type="text" required>
<label>メールアドレス</label>
<input name="email" type="email" required>
<label>お問い合わせ内容</label>
<textarea name="お問い合わせ内容"></textarea>
<input name="個人情報の利用についての同意" id="consent-check" type="checkbox" value="同意します" required>
<label>添付ファイル</label>
<input type="file" name="添付ファイル">
<label for="consent-check">個人情報の利用についての同意</label>
<button type="submit">送信</button>
</form>
添付ファイル付きで送信されるとInboxに表示されます。
Inboxに保存可能な添付ファイルの累計ファイルサイズはプランによって上限が決まっています。
無料だと累計100MBまでなので注意が必要です。
商用利用なら有料版(Lite)推奨
HyperFormは無料版だと「問い合わせ完了ページの変更」ができません。
(リダイレクトURLが設定できないため)
そのためファイル送信後はHyperForm独自の完了ページが表示されます。
メール送信後の完了ページが自社のWebサイトへのリダイレクトではなく他社(HyperForm)のものだと離脱率を上げてしまうので好ましくありません。
さらに無料版ではフォーム送信後、ユーザーに自動返信されるメールの送信元アドレスなどを変更することができません。
そのため商用利用の場合は無料版ではなく有料版(Lite)を利用したほうが良いでしょう。
