javascriptを使ったフォーム作成の方法についてご存じでしょうか？
javascriptを使うことで、フォームの作成が簡単にできます。
では、どうやって作成すれば良いのでしょうか。
今回は javascriptを使ったフォーム作成の方法 についてわかりやすくご紹介します。
目次
javascriptを使ったフォーム作成の流れ！
こちらではjavascriptを使った「顧客情報」フォーム作成の流れについてご紹介します。
最初にhtmlで、フォーム画面を作成します。
①フォームの画面
・タイトル：顧客情報
・項目1：名前
・項目2：名前(ふりがな）
・項目3：住所
・項目4：住所（ふりがな）
・項目5：電話番号
・項目6：メルアド
・項目7：詳細
➁コード エディターを開く
コードエディターを開いてください。
➂himlでタイトルと項目の入力
❶「顧客情報」の入力
<h2>顧客情報</h2>
<form class=”form1″ action=”confirm.php” method=”post” name=”form1″>
<table class=”mailform”>
<tbody>
<tr>
❷「名前・名前(ふりがな)」の入力
<th>名前</th>
<td><input class=”validate required” type=”text” name=”company_name” value=”” /></td>
</tr>
<tr>
<th>名前(ふりがな)</th>
<td><input class=”validate required kana” type=”text” name=”company_name_kana” value=”” /></td>
</tr>
<tr>
❸「住所・住所（ふりがな）」の入力
<th>住所</th>
<td><input class=”validate required” type=”text” name=”name” value=”” /></td>
</tr>
<tr>
<th>住所（ふりがな）</th>
<td><input class=”validate required kana” type=”text” name=”name_kana” value=”” /></td>
</tr>
<tr>
❹「電話番号」の入力
<th>電話番号</th>
<td><input class=”validate required mail” type=”text” name=”mail” value=”” /></td>
</tr>
<tr>
❺「メルアド」の入力
<th>メルアド</th>
<td><input class=”validate required mail” type=”text” name=”mail” value=”” /></td>
</tr>
<tr>
❻「詳細」の入力
<th>詳細</th>
<td><textarea class=”validate required” name=”body” rows=”6″></textarea></td>
</tr>
</tbody>
</table>
❻「確認画面」の入力
<div style=”text-align: center; margin-top: 15px;”><input type=”submit” name=”confirm” value=”確認” /></div>
</form>
④javascriptの処理
こちらではjavascriptの処理についてご紹介します。
❶エラーの初期化
$(“form.form1”).submit(function() {
//エラーの初期化
$(“p.error”).remove();
$(“table tr td”).removeClass(“error”);
$(“:text,textarea”).filter(“.validate”).each(function(){
//必須項目のチェック
$(this).filter(“.required”).each(function(){
if($(this).val() ==””) {
$(this).parent().prepend(“
<p class=”error”>必須項目です</p>
“);
}
});
❷ひらがなのチェック
//ひらがなのチェック
$(this).filter(“.kana”).each(function(){
if($(this).val() && !$(this).val().match(/^[ぁ-ん,ー]+$/)) {
$(this).parent().prepend(“
<p class=”error”>ひらがなで入力してください</p>
“);
}
});
❸メールのチェック
//メール正規表現チェック
$(this).filter(“.mail”).each(function(){
if($(this).val() && !$(this).val().match(/^[0-9,A-Z,a-z][0-9,a-z,A-Z,_,\.,-]+@[0-9,A-Z,a-z][0-9,a-z,A-Z,_,\.,-]+\.(af|al|dz|as|ad|ao|ai|aq|ag|ar|am|aw|ac|au|at|az|bh|bd|bb|by|bj|bm|bt|bo|ba|bw|br|io|bn|bg|bf|bi|kh|cm|ca|cv|cf|td|gg|je|cl|cn|cx|cc|co|km|cg|cd|ck|cr|ci|hr|cu|cy|cz|dk|dj|dm|do|tp|ec|eg|sv|gq|er|ee|et|fk|fo|fj|fi|fr|gf|pf|tf|fx|ga|gm|ge|de|gh|gi|gd|gp|gu|gt|gn|gw|gy|ht|hm|hn|hk|hu|is|in|id|ir|iq|ie|im|il|it|jm|jo|kz|ke|ki|kp|kr|kw|kg|la|lv|lb|ls|lr|ly|li|lt|lu|mo|mk|mg|mw|my|mv|ml|mt|mh|mq|mr|mu|yt|mx|fm|md|mc|mn|ms|ma|mz|mm|na|nr|np|nl|an|nc|nz|ni|ne|ng|nu|nf|mp|no|om|pk|pw|pa|pg|py|pe|ph|pn|pl|pt|pr|qa|re|ro|ru|rw|kn|lc|vc|ws|sm|st|sa|sn|sc|sl|sg|sk|si|sb|so|za|gs|es|lk|sh|pm|sd|sr|sj|sz|se|ch|sy|tw|tj|tz|th|bs|ky|tg|tk|to|tt|tn|tr|tm|tc|tv|ug|ua|ae|uk|us|um|uy|uz|vu|va|ve|vn|vg|vi|wf|eh|ye|yu|zm|zw|com|net|org|gov|edu|int|mil|biz|info|name|pro|jp)$/i)){
$(this).parent().prepend(“
<p class=”error”>メールアドレスの形式が異なります</p>
“);
}
});
});
//エラーがあった場合の処理
if($(“p.error”).size() > 0) {
return false; //submit処理の中断
}
無料で使えるおすすめのフォームサービス
無料で使えるおすすめのフォームサービスを紹介しますのでぜひ活用してみてください。
【おすすめNo1】スグフォーム（SuguForm）
スグフォーム（SuguForm）は『スグ』にフォームが作れるというキャッチコピーの通り予め用意されているテンプレートから選んで自分好みにカスタムするだけで簡単にアンケートフォームが作れてしまいます。
使える機能も豊富で、フォームの作成数や項目数が無制限、フォームの送信数や回答データの保存数も制限なし、ファイルアップロード（添付ファイル）OK、自動返信、パスワード設定、公開期間の設定、回答できる上限数の設定もできます。
【おすすめNo2】クエスタント（Questant）
クエスタントのアンケートフォームは無料プランであれば、質問数は10個までですが、アンケートフォーム自体は無制限に作成することができ、基本のテンプレートが70個以上完備しています。
アンケートのフォーマット自体を1から考える必要がなく、効率的にアンケート作成をすることができます。
さらにアンケートは自動で集計され、しかも自動でグラフ化までしてくれます。
【おすすめNo3】フォームラン（formrun）
フォームランは、Webマーケティング会社ベーシックが提供するアンケートフォーム作成ツールで集まった回答を、Chatwork・Slackなどの各種チャットツールと連携して、共有することができます。
デザインのカスタマイズ性が高く、フォームのデザインを自分好みで、他にはない唯一無二のデザインにカスタマイズすることができます。
また、送信された回答は、Googleスプレッドシートと連携することができ、データを確認することもでき便利です。
