JavaScriptでフォームを作成する方法とは？ より高度な活用法と注意点

<form action=”送信先のURL” method=”get（もしくはpost）“></form>

formタグ・action属性・method属性によりフォームの外側ができたら、フォーム内部を設計します。テキストの入力欄を表示したり、選択肢の中から選べるようにしたり、フォームの項目を実際の画面に表示させるための指示です。

フォーム作成時に使える主なHTML要素

・inputタグ：フォームの回答入力欄を表示する指示。typeを指定することでさまざまな表示が可能。指定できるタイプは以下の通り。

text属性…単一行テキストで入力させる
dataタイプ…日付を入力させる
numberタイプ…数字を入力させる
email属性…メールアドレスを入力させる
radio属性…選択肢をひとつ選んで回答させる
check属性…選択肢を複数選んで回答させる
file属性…ファイルを送信させる
submitタグ・buttonタグ…アンケート送信用のボタンを設置する

・textareaタグ：長文での入力欄を設置する指示。「rows=”20″ cols=”80″」など条件を加えると、表示欄の大きさが変わる。

・select属性：プルダウンメニューを設置する指示。

たとえば、フォームの中に「申込者氏名」の項目を設定して、単一業で書き込める入力欄を表示させるには、inputタグを用いてtext属性を指定します。inputタグ内の記述「type」が属性を、「name」は入力項目を管理するIDを示しています。また、<label>～</label>でIDの要素を詳細に決めることが可能です。

<form action=”送信先のURL” method=”post“>

<label for=”my_name”>申込者氏名：</label>

<input type=”text” name=”my_name” id=”my_name”>

</form>

HTMLの記述方法については、以下の記事でご紹介しています。記述方法をコピペできるよう、具体的に情報をまとめました。
>>アンケート作成に必要なHTML要素17選｜コピペでフォームが簡単に作れる方法やツールも紹介 | formLab
>>問い合わせフォームのデザイン9選！コピペで使えるhtmlとCSSを紹介 | formLab

③javascriptでフォームへの処理を書き込む

HTMLの記述が終わったら、JavaScriptの処理を書き込みます。HTMLで作成したフォームを読み込み、挙動にあわせてさまざまな指示を組み込むことが可能です。

フォームを読み込み指示を出す上で最も手軽な方法は、HTMLで<script>～</script>と記述して読み込む方法です。

HTMLファイル画面ひとつで完結するので、外部ファイルへ遷移せずに指示を実行させられます。<script>～</script>でできる基礎的な指示を以下にまとめました。

JavaScriptの処理は複雑かつさまざまな書き方の種類があります。アクションの中身や挙動の指示方法の基礎を理解し、組み合わせて使うのがベターなやり方です。難しい場合は、都度記述例を調べて参考にしましょう。

HTMLのscript要素で指示を出すほかに、外部ファイルのスクリプトの場所を指定する、SRC属性を使って読み込む方法があります。<script src=”～～～”></script>と記述し、ファイルの保管パスを指定してください。

▼formrun独自のライブラリ「formrun.js」を使って、簡単に実装できます。
弊社が提供しているフォーム作成サービス「formrun」は、JavaScriptをはじめとするプログラミング言語の知識がなくとも、フォームが簡単に作成できます。ノーコードの編集ツールに加えて、より高度な機能性を組み込みたいエンジニア向けに、JavaScriptを実行できるformrun.jsというライブラリが使用可能です。

項目の設定から入力エラー時の表示内容、スパム対策の実装まで、指示するためのサンプルコードを一覧化しました。フォームづくりは簡単に済ませて、JavaScriptで細かい機能性・デザインにこだわりたい場合は、ぜひご活用くださいませ。
>>コード型フォームのサンプルコード集

formrunについて知りたい方はこちら

④テストサイトで挙動を確認する

書き出したコードを本番環境で実装する前に、正しい挙動になっているかをテストしましょう。場合によっては、フォームが正しく機能しないだけでなく、収集した情報が適切な場所に格納されず、情報漏洩のリスクにつながりかねません。

プロジェクトチームで稼働している場合は、チーム内でテスト確認の協力を依頼しておきましょう。

JavaScriptを用いてフォームを作成する際の注意点

フォームの作成において、JavaScriptは入力情報の検証や挙動のコントロールを実現します。一方で、JavaScriptによるフォームの書き込みには、注意すべきポイントがいくつか存在します。

エンジニアが作業する上でぶつかりがちなJavaScript活用時の注意点を、4つのポイントにまとめました。

時間とコストがかかる

JavaScriptの書き込みで注意すべきポイントのひとつが、工数や費用に関わる問題です。機能の設計から記述方法を考えて、ライブラリに書き込んでいくのに、10時間以上の労力がかかります。

機能が複雑になればなるほど工数はかさみ、内作するのはエンジニアにとって相当の負担です。外注すると、フォームの作成・アップデートなどを加味して、年間約500,000円ほどの費用がかかります。

バックエンドとフロントエンドを別々に改修する必要がある

JavaScriptで書き込みする画面は2種類あり、それぞれ改修する必要があります。サーバー・管理側の画面でシステム部分を制御するのがバックエンド、ユーザーに表示される画面がフロントエンドです。

バックエンドで改修した内容がフロントエンドにきちんと反映されなければならないため、整合性を確認しながら作業を進める必要があります。同時に改修作業できないため、非効率です。

セキュリティの構築が大変

フォームのセキュリティ対策をJavaScriptで行うには、フォームごとに個別にコードを書き込む必要があります。

セキュリティ対策として、ユーザーの入力情報を検証するバリデーションや、reCAPTCHAなどの画像認証機能を実装する方法が一般的です。

フォーム一つひとつにコードを記述してセキュリティを構築するのは、時間と労力がかかります。

業務が属人化する

JavaScriptの書き込みは、プログラミング言語に関する専門知識がないと対応できません。

担当者が不在になると業務が進行できなかったり、緊急時に対応が遅れてしまったりと、業務の属人化による課題・懸念が出てきます。

JavaScriptの知識だけでなく、ページの構造を決定するHTMLと見た目・装飾を決定するCSS、両方をセットで扱う必要があり、習得の難易度が高い分野です。

▼エンジニア泣かせのコーディング業務を効率化！
JavaScriptをはじめとするプログラミング言語を、一から構築してフォームを作成するのは、労力・時間が莫大です。業務担当のエンジニアに大きな負担がかかります。弊社が提供するフォーム作成サービス「formrun」は、ノーコードの編集機能と多彩なデザインテンプレートにより、フォーム作成のコストを大幅に削減！無料でお試しできますので、ぜひ一度お試しください。

formrunについて知りたい方はこちら

formrunでフォームを作成したい方はこちら
>> フォームを無料で作成する

高度なWebフォームを実現するJavaScriptの活用方法

JavaScriptを活用すれば、作成したフォームに高度な機能・装飾を実装できます。フォーム作成時に役立つJavaScriptの活用方法をご紹介します。

入力されたデータが適切かどうかをチェックする

フォーム作成に役立つJavaScriptの活用方法のひとつが、ユーザーの入力データ検証機能を記述することです。

JavaScriptの記述で、「イベント」と呼ばれるユーザーの挙動やプログラムの変化をきっかけに、特定の指示を実行できます。実行する特定の指示が「イベントハンドラ」です。

イベントハンドラの指示のひとつ「onClick」を指定すると、ユーザーがクリックした時に指示を実行できます。

onClickの記述に、データ検証を指示する「return check()」を書き込むと、入力したデータをクリックする際に入力データが条件に見合うか、チェックすることが可能です。

onClick="return check()"

※「クリックしたときにcheck()の検証に戻る」という意味。チェックの条件・エラー時の表示は、check()関数を別途指定する。

イベントハンドラとreturn check要素を組み合わせて、さまざまな条件下でチェック機能を実装できます。参考までに、イベントハンドラの指示の例を整理しました。

・onClick：ユーザーがフォーム上でクリックしたときに特定の指示を実行できる。「onDblClick」はダブルクリックしたときが対象となる。
・onChange：ユーザーがフォーム上で入力した値・回答した選択肢を変更したときに、特定の指示を実行できる。
・onBlur：ユーザーが入力しているフォームの一部分から焦点が外れたときに、特定の指示を実行できる。逆に「onFocus」は焦点があたったとき対象となる。
・onSelect：ユーザーがフォーム上で入力した値を、マウスのドラッグで選択したときに、特定の指示を実行できる。
・onSubmit：ユーザーがフォーム上で送信ボタンや回答ボタンをクリックしたときに、特定の指示を実行できる。
キャンセルボタンや戻るボタンの場合は「onReset」。

不適切なデータを送信した際にエラーとして処理する

onClickやonSubmitといったイベントハンドラを組み合わせると、ユーザーがフォーム上で不適切なデータを送信した際にエラーとして処理をかけられます。

たとえば、フォームのアドレスを入力する項目を空白にしたまま回答があった際にアラートを出す場合のJavaScriptでの記述例は以下の通りです。

function check(){

        if (mail_form.mail.value == ""){

             alert("メールアドレスを入力してください"); 

             return false;

                }else{

                    return true; 




 onclick="return check()"

具体的なチェック内容の詳細が、「　function check(){　」以下の記述です。「　if (mail_form.mail.value == “”){　」は、フォームのメールアドレス回答欄が空白だった場合の条件を表しています。該当する際に実行する指示が「 alert(“～～～”);」や「return false」です。

記述例の通りに指示すると、「メールアドレスを入力してください」と表示し、送信をキャンセルできます。「 }else{ return true; 」は、それ以外の条件を正しいとみなす指示で、アドレス欄にアドレス形式の情報が入っていれば問題なく送信できる旨を意味しています。

情報を入力するユーザーにメッセージを表示する

JavaScriptを活用することで、画面にポップアップウィンドウを表示できます。

ユーザーに見てほしいメッセージを明確に表示して、印象づけるのに効果的です。promptメソことでッドを用いて、以下のように記述すると、「入力してください」というメッセージをポップアップで表示できます。

prompt('入力してください');

情報の入力検証やエラー表示と同様、イベントハンドラとの組み合わせで、特定の条件でのみポップアップを表示可能です。

アニメーションをつける

JavaScriptの高度な活用方法として、アニメーションの設定が可能です。フォームの項目やテキストにカーソルを合わせたときに色を変えたり、動きをつけたりできます。

一般的には、JavaScriptの機能をまとめたファイル（ライブラリ）を取得して読み込むことで、好みのアニメーションを設定するのが一般的です。参考までに、JavaScriptで活用できる代表的なライブラリを以下にまとめました。

・GSAP：アニメーションの種類が豊富。滑らかに動くアニメーションが多く実装されている。
・Anime.js：洗練された表現のアニメーションが印象的。
・Popmotion：シンプルなアニメーションが多い。容量が小さめ。
・mlib.js：国産のライブラリで日本語対応。あたたかいアニメーション。

JavaScriptが要らない！ ハイエンドなフォーム作成におすすめのサービス

JavaScriptをフォーム作成に使用するのは、細かい記述を丁寧に書き込む必要があり、時間やコストがかかります。フォーム作成サービスを提供している弊社は、エンジニアのフォーム作成における工数削減・作業の効率化を実現すべく、ハイエンドなフォーム作成が実現できるサービスを開発しました。

弊社の「formrun」の機能として、JavaScriptが書き込める「ヘッドレスフォーム」と、JavaScriptの知識がまったく要らない「ノーコード型」の2種類をご紹介します。

デザインや機能を高レベルで調整できる「ヘッドレスフォーム」

formrunのヘッドレスフォームは、フォームの機能・セキュリティ対策済みの環境下で、フォームデザインの設計に集中できるフォーム作成サービスです。

バックエンドの複雑な開発が不要で、入力項目やデザインの調整を、HTML・CSSコードを書き込んで実行できます。本来はバックエンドとフロントエンドを別々に開発していく必要があるところを、フロントエンドの開発のみで済ませられるため、作業の時短となりおすすめです。

formrun独自のJavaScriptライブラリである「formrun.js」を実装しており、入力情報の範囲指定・エラー判定・検証といった複雑な機能を設定できます。

各機能の実装はすべてサンプルコードがまとめられているので、記述方法に迷った際に効果的です。そのほか、CSVエクスポートやGoogleスプレッドシートとの連携や、画像認証機能のreCAPTCHA設定など、機能拡充・セキュリティ対策に優れています。

エンジニアのメールサーバーの構築は一切不要。データ管理からメールでの自動返信まで、バックエンドの機能は標準で搭載されています。なるべく工数をかけずに、フォームの品質・デザインにこだわりたいエンジニア向けのサービスです。

▼ヘッドレスフォームについて詳しく知りたい場合はこちらのページをご参照ください。
>>ヘッドレスフォーム｜エンジニア・デザイナー向け活用方法 | formrun（フォームラン）

単操作でフォームをつくるなら「ノーコード型」

JavaScriptのようなコードは一切使わず、もっと手軽にフォームを作成したい場合は、「ノーコード型」のformrunをお試しください。

あらかじめ多機能な質問項目が用意され、管理画面から必要な項目をクリック・ドラッグ&ドロップするだけで、フォームの中身を作成できます。

「名前」「住所」「電話番号」などの基本項目はもちろん、以下のような機能もすぐに実装可能です。

・予約日を調整できる
・ユーザーの回答内容により設問の表示内容を変更できる
・ファイルをアップロードできる
・カード払いやオンライン決済ができる
・回答数の上限を設定する
・離脱防止のための入力補助機能を設定する

デザインは用意されたテンプレートを活用することで、イメージに近いフォームの見栄えを実現できます。選べるテンプレートは120種類以上！

お問い合わせ・イベント申し込み・予約や注文用のフォームなど、さまざまなシーンで使えるテンプレートをジャンルごとに整理して提供しています。
>>フォームテンプレートを大量公開|フォームのご使用サンプルや参考例 | formrun

一度にたくさんのフォームを運用しなければならない場合や、とにかく急ピッチで制作・実装しないといけない場合に、ノーコード型のformrnは使い勝手がよくおすすめです。お試しで無料の利用が可能ですので、まずは一度以下よりフォームを作成してみてください。
>> フォームを無料で作成する

JavaScript以外の方法も検討しながら、高度なフォームを作成しよう

JavaScriptは、Webサイトに設置したフォームの機能性・デザイン性・セキュリティを高めるのに効果的です。一方、複雑なコードの記述方法を駆使し、フォーム一つひとつに個別設定をかけていく必要があります。かかる時間やコストを考慮し、JavaScriptを使わない方法も視野にいれながら、ユーザー満足度の高いフォームづくりに取り組みましょう。

▼まずは無料お試し！formrunでフォーム作成の手間を軽減しませんか？
弊社が提供しているフォーム作成サービス「formrun」は、専門知識不要で高度なフォームがつくれるノーコードのWebサービスです。プログラミング言語に触れたことがないユーザーの皆さまはもちろん、ほかの業務で忙しく過ごしているエンジニアの皆さまに、多くご愛顧いただいています。40万以上のダウンロードユーザーに利用されているformrunで、業務の効率化を実現しませんか？

formrunでフォームを作成したい方はこちら

formrunについて知りたい方はこちら
>> formrun公式ページURL