![HyperFormならバックエンド開発なしで1分でフォームを作成可能](https://iwb.jp/wp-content/uploads/2022/05/hyperform-create-html-forms-1min-without-backend-development.png)
HyperFormとは
カスタムURLをセットするだけでフォームが作れる「ヘッドレスフォーム」サービス。
簡単な手順でセットアップができるため、バックエンド開発なしで最短1分でフォームを作成可能。
HyperFormは1つのカスタムURLだけであれば無料で使用可能です。
自動返信メールやSlackおよびGoogleスプレッドシートの外部連携機能なども無料で使えます。
さらに不正問い合わせ防止システムreCAPTCHAを標準搭載しているので悪質なbotによる自動投稿(スパム)を防いでくれます。
HyperFormの使い方
HyperFormの公式ページにアクセスして「無料で使ってみる →」または「会員登録」ボタンを押します。
![HyperFormならバックエンド開発なしで1分でフォームを作成可能](https://iwb.jp/wp-content/uploads/2022/05/hyperform-create-html-forms-1min-without-backend-development.png)
次に「アカウントを作成」の画面が表示されるので「Googleアカウントで登録」を押す。
![HyperForm Googleアカウントで登録](https://iwb.jp/wp-content/uploads/2022/05/hyperform-create-html-forms-1min-without-backend-development-account.png)
登録するとセットアップ画面が表示されるのでカスタムURLをコピーして利用例のコードのようにすればフォームの作成が完了となる。
![HyperForm セットアップ カスタムURL](https://iwb.jp/wp-content/uploads/2022/05/hyperform-create-html-forms-1min-without-backend-development-setup.png)
<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の送信テスト
送信テストとは利用例のコードを使ったフォームのサンプルです。
ここで送信すると挙動を確認することができます。
試しに下図のように入力して送信すると…
![](https://iwb.jp/wp-content/uploads/2022/05/hyperform-create-html-forms-1min-without-backend-development-send-test.png)
Inboxにこのように受信されます。
![HyperForm Inbox](https://iwb.jp/wp-content/uploads/2022/05/hyperform-create-html-forms-1min-without-backend-development-inbox.png)
受信されたものをクリックすると詳細が見られます。
![HyperForm Inbox 詳細](https://iwb.jp/wp-content/uploads/2022/05/hyperform-create-html-forms-1min-without-backend-development-invox-detail.png)
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に表示されます。
![HyperForm Inbox 添付ファイル](https://iwb.jp/wp-content/uploads/2022/05/hyperform-create-html-forms-1min-without-backend-development-type-file.png)
Inboxに保存可能な添付ファイルの累計ファイルサイズはプランによって上限が決まっています。
無料だと累計100MBまでなので注意が必要です。
![HyperForm 料金プラン](https://iwb.jp/wp-content/uploads/2022/05/hyperform-create-html-forms-1min-without-backend-development-price.png)
商用利用なら有料版(Lite)推奨
HyperFormは無料版だと「問い合わせ完了ページの変更」ができません。
(リダイレクトURLが設定できないため)
そのためファイル送信後はHyperForm独自の完了ページが表示されます。
![HyperForm独自の完了ページ](https://iwb.jp/wp-content/uploads/2022/05/hyperform-create-html-forms-1min-without-backend-development-complete.png)
メール送信後の完了ページが自社のWebサイトへのリダイレクトではなく他社(HyperForm)のものだと離脱率を上げてしまうので好ましくありません。
さらに無料版ではフォーム送信後、ユーザーに自動返信されるメールの送信元アドレスなどを変更することができません。
![HyperForm 独自ドメイン設定](https://iwb.jp/wp-content/uploads/2022/05/hyperform-create-html-forms-1min-without-backend-development-domain-settings.png)
そのため商用利用の場合は無料版ではなく有料版(Lite)を利用したほうが良いでしょう。