JavaScriptを使ったお問い合わせフォームの作り方とは？ 3つの送信方法

「JavaScriptでお問い合わせフォームを作るには、どうしたらいいんだろう…」とお悩みではありませんか？

今回は、JavaScriptを使ったお問い合わせフォームの作り方を解説します。

また、お問い合わせフォームを簡単に短時間で作りたい場合、フォーム作成ツール「formrun」がおすすめです。formrunを使用するメリットは、下記の4つです。

・専門知識は不要でクリック操作でフォームが作成できる
・自社のサイトに合ったデザインに調節できる
・進捗状況の確認で問い合わせ管理の効率化
・画像やPDFのファイル添付が簡単に設置可能

ほとんどの機能が無料で使用できるため、ぜひ1度フォームを作成してみてください。

無料でフォームを作成する

JavaScriptを使ったお問い合わせフォームの作り方
JavaScriptを使った3つのフォーム送信方法
30秒でお問い合わせフォームが作れる「formrun」がおすすめ
フォーム作成ツールを活用して、業務フローを効率化しよう

JavaScriptを使ったお問い合わせフォームの作り方

JavaScriptを使用したお問い合わせフォームを作成する際には、まずはHTMLでフォームを作成しなければなりません。

そこで、メールアドレスのみのフォームを元に、JavaScriptを使用したフォームの作成方法を解説します。

入力欄と送信ボタンを作る

最初に、HTMLで入力フォームを作成しましょう。メールアドレスの入力欄と送信ボタンのフォームを作るには、以下のコードを入力します。

<!DOCTYPE html>

<html lang="ja">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>サンプルHTML</title>

</head>

<body>

    <form action="xxx.html" method="get" name="mail_form">

        メールアドレス：<input type="text" name="mail">

        <input type="submit" value="送信">

    </form>

</body>

</html>

コードを実行すると、以下のような入力フォームが完成します。

メールアドレスはinputタグで「type=”text”」と書きます。そのあとに必ず「name=”mail”」を記入するのを忘れないようにしましょう。JavaScriptを使用して値を得る際に必要です。

HTMLを使ったお問い合わせフォームの作成方法についてもっと知りたい方は下記も合わせてご覧ください。
>>htmlコピペでOK！シンプルかつおしゃれな問い合わせフォームの作り方

送信ボタンのクリックイベントを作る

「ユーザーが送信ボタンをクリックした」という情報を受け取るコードを作成します。

送信ボタンのクリックイベントを作るには、以下のコードを追加します。

<!DOCTYPE html>

<html lang="ja">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>サンプルHTML</title>

</head>

<body>

    <form action="Sample.html" method="get" name="mail_form">

        メールアドレス：<input type="text" name="mail">

        <!-- onClickイベントを追加 -->

        <input type="submit" value="送信" onClick="return check();">

    </form>

</body>

</html>

クリック操作の情報を受け取るためには、「onClick」を使用します。「return check();」という記述があるのは、エラーチェック処理をするためです。

上記コードを追加することで、送信ボタンにフォーム内容をチェックする役割を与えられます。

必須入力チェックのコード作成

ユーザーが入力した内容に、記入漏れがあったときの処理を追加します。

たとえば、「メールアドレスが記入されていません」のようなメッセージを表示するための処理です。

下記のコードを追加しましょう。

<!DOCTYPE html>

<html lang="ja">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>サンプルHTML</title>

    <!-- ↓JavaScriptの処理を追加 -->

    <script type="text/javascript">

        function check() {

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

                // 条件に一致する場合（メールアドレスが空の場合）

                alert("メールアドレスが記入されていません。"); // エラーメッセージを出力

                return false; // 送信ボタン本来の動作をキャンセルします

            } else {

                // 条件に一致しない場合（メールアドレスが入力されている場合）

                return true; // 送信ボタン本来の動作を実行します

            }

        }

    </script>

</head>

<body>

    <form action="Sample.html" method="get" name="mail_form">

        メールアドレス：<input type="text" name="mail">

        <!-- ↓onClickイベントを追加 -->

        <input type="submit" value="送信" onClick="return check();">

    </form>

</body>

</html>

メールアドレスを記入しなかった場合、以下のように「メールアドレスが記入されていません」というメッセージを表示させられます。

万が一、メールアドレスで使用できない文字が記入されたときや、登録済みのメールアドレスが記入されたときに、エラーメッセージを表示可能です。

JavaScriptを使った3つのフォーム送信方法

JavaScriptを使ったフォーム送信方法には、以下3つの方法があります。
・submit
・onsubmit
・onclick

submit、onsubmit、onclickを使うことで、データベースに送信する前に、JavaScriptを経由させることが可能です。JavaScriptを経由させることで、フォームの入力値に誤りがあった場合に、エラーメッセージを表示させられます。

以下では、submit、onsubmit、onclickについて詳しく解説します。

submitを使う場合

submitは、JavaScript内で設定できるメソッドです。submitはJavaScript内で使うと、フォームの入力値をJavaScriptに送信できます。

submitの使い方は、以下の通りです。

<!DOCTYPE html>

<html lang="ja">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>サンプルHTML</title>

</head>

<body>

    <form name="myform">

        <input name="mytext" type="text" />




        <!-- ボタン要素で送信ボタンを設置 -->

        <button id="btn">送信</button>

    </form>




    <script>

        var btn = document.getElementById('btn');




        btn.addEventListener('click', function() {

            alert(document.myform.mytext.value);




            // submit()でフォームの内容を送信

            document.myform.submit();

        });

    </script>

</body>

</html>

これで、「button」に送信の機能を与えられます。

フォームに文字を入れ送信すると、上記のような「このページの内容」というメッセージが表示され、入力内容を確認することが可能です。

onsubmitとonclickも、同様の画面が作成できます。

onsubmitを使う場合

onsubmitもsubmitと同じように、フォームの入力値をJavaScriptに送信することが可能です。

onsubmitの使い方は以下の通りです。

<!DOCTYPE html>

<html lang="ja">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>サンプルHTML</title>

    </head>

<body>

    <!-- フォーム送信時にcheckText関数を実行する -->

    <form name="myform" onsubmit="checkText()">

        <input name="mytext" type="text" />

        <input type="submit" value="送信" />

    </form>




    <script>

        function checkText() {




            // 入力ボックスの内容を表示する

            alert(document.myform.mytext.value);

        }

    </script>

</body>

</html>

上記の記述すると、フォームのデータを送信する前に、JavaScript関数が実行されます。

onsubmitは、HTMLのフォームタグ内に記述するようになっていて、JavaScript内の指定した名前の関数名を動かせます。その後、フォームを送信する処理を実行できます。

onclickを使う場合

onclickとは、要素がクリックされたときに、メッセージを表示したり画面を切り替えたりなどのアクションを起こす、イベントハンドラーです。

onclickは、フォーム以外の要素にも使用できます。今回は、送信ボタンをクリックした際にJavaScriptを動かすため、submitボタンの属性にonclickを指定しましょう。

onclickを使用した例は以下の通りです。

<!DOCTYPE html>

<html lang="ja">

   <head>

      <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <title>サンプルHTML</title>

   </head>

<body>

    <!-- フォーム送信時にcheckText関数を実行する -->

    <form name="myform">

        <input name="mytext" type="text" />




        <!-- onclick属性を付与してcheckText関数を実行する -->

        <input type="submit" value="送信" onclick="checkText()" />

    </form>




    <script>

        function checkText() {




            // 入力ボックスの内容を表示する

            alert(document.myform.mytext.value);

        }

    </script>

</body>

</html>

他には、リンクやボタンにもonclickを設定し、画面を動かすことが可能です。