JavaScriptを䜿ったお問い合わせフォヌムの䜜り方ずは 3぀の送信方法

formLab線集郚
お問い合わせ

「JavaScriptでお問い合わせフォヌムを䜜るには、どうしたらいいんだろう 」ずお悩みではありたせんか

今回は、JavaScriptを䜿ったお問い合わせフォヌムの䜜り方を解説したす。

たた、お問い合わせフォヌムを簡単に短時間で䜜りたい堎合、フォヌム䜜成ツヌル「formrun」がおすすめです。formrunを䜿甚するメリットは、䞋蚘の4぀です。

・専門知識は䞍芁でクリック操䜜でフォヌムが䜜成できる
・自瀟のサむトに合ったデザむンに調節できる
・進捗状況の確認で問い合わせ管理の効率化
・画像やPDFのファむル添付が簡単に蚭眮可胜

ほずんどの機胜が無料で䜿甚できるため、ぜひ1床フォヌムを䜜成しおみおください。

無料でフォヌムを䜜成する
　　

JavaScriptを䜿ったお問い合わせフォヌムの䜜り方

お問い合わせフォヌム　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>

コヌドを実行するず、以䞋のような入力フォヌムが完成したす。

お問い合わせフォヌム　JavaScript　

メヌルアドレスは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　
䞇が䞀、メヌルアドレスで䜿甚できない文字が蚘入されたずきや、登録枈みのメヌルアドレスが蚘入されたずきに、゚ラヌメッセヌゞを衚瀺可胜です。

JavaScriptを䜿った3぀のフォヌム送信方法

お問い合わせフォヌム　JavaScript　
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」に送信の機胜を䞎えられたす。
お問い合わせフォヌム　JavaScript　
フォヌムに文字を入れ送信するず、䞊蚘のような「このペヌゞの内容」ずいうメッセヌゞが衚瀺され、入力内容を確認するこずが可胜です。

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を蚭定し、画面を動かすこずが可胜です。

30秒でお問い合わせフォヌムが䜜れる「formrun」がおすすめ

お問い合わせフォヌム　JavaScript　formrun
公匏サむト

お問い合わせフォヌムを玠早く、䜎コストで䜜成するならフォヌム䜜成ツヌル「formrun」がおすすめです。

以䞋ではformrunがおすすめな理由を玹介したす。

豊富な機胜で䜜りたいフォヌムがすぐ䜜れる

formrunには、基本的なものから高機胜なものたで、フォヌム䜜成に圹立぀機胜が豊富に搭茉されおいたす。

たずえば、「条件分岐遞択項目」を䜿甚すれば、フォヌムの回答者が遞んだ遞択肢によっお、次の蚭問衚瀺を倉曎できたす。フォヌムの項目数が倚い堎合に回答者ごずに必芁な項目のみを衚瀺させるこずで、よりわかりやすいフォヌムにできるだけでなく、回答者の入力負担を軜枛可胜です。

他にも、泚文受付ず同時に決枈ができる「決枈機胜」や、botによるスパム攻撃を防止する「reCAPTCHA」機胜などを蚭眮できたす。

入力ミスを防ぐ機胜で、フォヌム入力のサポヌト

formrunには、フォヌム回答者の入力ミス防止や入力補助をできる機胜が搭茉されおいたす。䟋えば、誀った入力がされた際にリアルタむムで゚ラヌを知らせたり、郵䟿番号を入力するだけで、䜏所を自動で入力しおくれたりずいった機胜をフォヌムに蚭眮可胜です。

入力補助機胜によっお、回答者がストレスなく入力できるため、離脱防止に効果的です。

䜜成したフォヌムはWebペヌゞで蚭眮可胜

䜜成したフォヌムはホヌムペヌゞに簡単に蚭眮できたす。フォヌム䜜成埌に発行されるHTML芁玠を、Webサむトに貌り付けるだけで完了です。

サむトに貌り付けず、フォヌム単䜓で䜿う堎合は、QRコヌドずURLを掻甚できたす。フォヌム䜜成埌、QRコヌドずURLが自動発行されるため手間もかかりたせん。たずえば、アンケヌトフォヌムのQRコヌドをチラシに掲茉したり、メヌルやチャットにフォヌムのURLを蚘茉したりしお掻甚可胜です。

充実したお問い合わせ管理機胜

formrunは、フォヌムで埗たデヌタをツヌル䞊で管理できたす。顧客単䜍での進捗状況や察応担圓者を、ひず目で確認可胜です。

デヌタはスプレッドシヌトやExcelで出力できるため、デヌタ分析に圹立ちたす。

SlackやChatworkなどのチャットツヌルず連携しおおけば、フォヌムに入力があった際に通知が届くように蚭定できたす。問い合わせに玠早く察応できるため、顧客満足床の向䞊にも぀ながりたす。

フォヌム䜜成ツヌルを掻甚しお、業務フロヌを効率化しよう

JavaScriptを䜿ったお問い合わせフォヌムは、コヌドの知識が必芁です。そのため、初心者には難しい郚分がありたす。コヌドを曞かずに簡単にフォヌムを䜜成したい堎合には、フォヌム䜜成ツヌル「formrun」がおすすめです。

formrunを䜿うこずで、専門的な知識がなくおも、盎感的な操䜜でフォヌムを䜜成でき、業務を効率化できたす。

同じフォヌム䜜成ツヌルのGoogleフォヌムず比べおもセキュリティ条件が高く、现かい蚭定たで機胜が豊富ずなっおいるため、ビゞネス利甚目的では、formrunのナヌザヌのうち7割がGoogleフォヌムから倉曎しおいたす。

メヌルアドレスがあれば無料登録可胜無期限で無料プランが利甚できるのでformrunでぜひフォヌムを䜜成しおみおください。

無料でお問い合わせフォヌムを䜜成する