Webフォーム作成の記事

ARTICLE

問い合わせフォームはJavaScriptでも作成可能？必要な項目や作り方の手順を解説

更新日：2025/09/09

問い合わせフォームの作成方法はさまざまですが、JavaScriptとHTMLを使うことで、問い合わせフォームの画面部分を作ることが可能です。ただし、送信された内容をデータベースに保存して管理画面から閲覧するためには、PHPやNode.jsなどのサーバーサイドの仕組みが必要になります。

この記事では、JavaScriptを使って問い合わせフォームの画面を作る基本的な方法や、フォームを導入するメリットを解説します。さらに、作成時の注意点や、社内にJavaScriptやサーバー構築のスキルがない場合に利用できる代替手段についても紹介します。

問い合わせフォームとは
問い合わせフォームを設置するメリット
問い合わせフォームを設置するデメリット
問い合わせフォームの作り方
JavaScriptを使った問い合わせフォームの作り方
問い合わせフォームの構成要素
問い合わせフォームを作成する際のポイント
JavaScriptを使って問い合わせフォームを作る際の注意点
SPIRAL Webフォーム作成ツールの特徴
まとめ

問い合わせフォームとは

問い合わせフォームとは、サイトを訪問したユーザーが、サイト上から直接サイト運営企業に対してメッセージを入力し、送信できるフォームのことです。メールを使用することなく問い合わせができることから、企業にとってもユーザーにとっても負担が少なく、気軽にメッセージを送れる点は大きな特徴だといえます。

商品やサービスを展開する企業の場合、製品・サービスに対する疑問や質問などを送りたいと考えているユーザーは少なくありません。しかし、電話での対応だと窓口の対応が追いつかない可能性があります。また、メールアドレスを使った問い合わせだと、アドレスを悪用されるリスクを伴います。一方で問い合わせフォームであれば、ユーザーは自分の好きなタイミングで送信でき、企業側も任意のタイミングで返信できるため、無理がありません。

最初の窓口として機能するのが問い合わせフォームです。

問い合わせフォームを設置するメリット

ここでは問い合わせフォームを設置することで、どういったメリットがあるのか解説します。フォームの利用を検討している企業の担当者はぜひ参考にしてください。

問い合わせのハードルが下がる

問い合わせフォームを設置するメリットの1つがユーザー側の問い合わせに対するハードルが下がることです。電話での問い合わせの場合、電話自体が苦手な人もいれば、電話対応の時間が決まっており仕事の都合で問い合わせができないといったケースが想定されます。

そのような時でも、問い合わせフォームであれば相手と直接会話する必要がなく、なおかつ空いた時間に送信しておけば企業側から返信が返ってくるため、忙しい人でも問い合わせがしやすいといえます。

一次対応を自動化できる

問い合わせフォームを導入することで、一次対応を自動化することも可能です。具体的には、問い合わせフォーム経由でメッセージを送ってきた人に対して自動返信機能で「問い合わせを受け付けました」といった形で返信をしておくことで、一次対応となります。

この時、どのくらいで返信ができるか営業日の目安を伝えておけば、ユーザーもそれに従って返答を待ってくれるでしょう。

24時間問い合わせに対応できる

問い合わせフォームはWebサイト上に設置するものであり、サイト自体は24時間いつでもアクセスできる状態であるため、問い合わせもいつでも送信できます。

電話対応のように人が対応する必要がある場合、どうしても対応できない時間ができるため機会損失となります。

また、先ほども触れているように、忙しくてなかなか窓口がオープンしている時間帯に問い合わせができないといった人もいるでしょう。24時間利用できる問い合わせフォームであれば、忙しい人でも利用できるため、企業にとっての機会損失を防ぐことができます。

メールアドレスを公開する必要がない

問い合わせフォームであれば、企業側が自社のメールアドレスを公開する必要がありません。

メールアドレスを公開すると、スパムメールが送られてくる可能性があるほか、悪意のあるユーザーがメールアドレスを悪用する可能性も考えられます。スパムメールが送られて来た場合、そこに添付されているファイルやURLを開いた結果、情報が漏洩したりウィルスに感染したりするケースもあるでしょう。

問い合わせフォームであれば、自社のメールアドレスを公開することなくユーザーがメッセージを送れる仕組みとなっているため、このようなリスクがありません。

顧客管理に役立つ

問い合わせフォームと顧客管理システムを連携させることで、顧客管理にも活用できます。例えば、ユーザーが入力した名前やメールアドレス、生年月日などの情報を顧客管理システム上で自動的にデータ化できます。

顧客情報を手動でコピペしてエクセルに貼りつけるといった手間がかからないため、効率よく情報を管理できるでしょう。

問い合わせフォームを設置するデメリット

問い合わせフォームを設置するデメリットは基本的にはほぼありません。ただし、コードを使用してフォームを作成する場合、専門知識やスキルを持った人材でないと対応できない点は理解しておきましょう。

問い合わせフォームの作り方

ここでは問い合わせフォームの作り方を紹介します。作り方にはいくつかの種類があるため、自社に合ったものを選んでください。

プログラミングで自作する

問い合わせフォームの作り方の1つがプログラミングによる自作です。具体的にはHTMLやCSS、PHPなどを使って自社で作成していきます。

自社内にプログラミングの知識を持った人材がいれば対応できるでしょう。自作のため、コストを抑えつつも、自社のニーズに合った機能やデザインの問い合わせフォームを作成できます。

プラグインを使用する

WordPressのプラグインを使用して問い合わせフォームを作成することも可能です。WordPressはオープンソースのCMSのことです。また、プラグインとは拡張機能のことで、WordPressで作成したサイトに機能を追加することができます。プラグインの中には問い合わせ機能を備えたものもあるため、それを追加することでかんたんに問い合わせフォームを実装できる点は大きなメリットです。また、専門的な知識を持っていなくても対応できます。

フォーム作成ツールを使用する

フォーム作成ツールとは、その名の通りフォーム作成に特化したツールのことで、プログラミングなどの知識やスキルがなくても問い合わせフォームを作成できる点が特徴です。

基本的にはクリックやドラッグ&ドロップといったかんたんな操作だけで項目の設定ができるため、初めて操作する人でも無理なく作成できるでしょう。ただし、ツールの利用にあたっては利用料金が発生します。

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

ここでは、JavaScriptを使った問い合わせフォームを作成する方法について解説します。できれば自社で作成したいと考えている方は、ぜひ参考にしてください。

問い合わせフォームの項目を設定する

JavaScriptを用いて問い合わせフォームを作成する場合、最初にフォームにどのような項目を使用するのかを決める必要があります。

用途や目的を明確にすることで、ユーザーのどういった情報が必要になるのかも絞られてきます。ただし、フォームの項目数が多いと、ユーザーは入力に手間を感じ、途中で離脱する恐れがあるため、多くなりすぎないように項目に優先順位をつけることが大切です。

また、履歴書や職務経歴書、ポートフォリオなどを送ってもらう必要がある場合は、添付機能も設置する必要があります。

フォーム画面（HTML＋JavaScript）を作成する

必要な項目が明確になったら、ユーザーが入力する画面部分をHTMLとJavaScriptで作ります。HTMLでフォーム構造を定義し、JavaScriptで入力値を取得してサーバーに送信します。

コードは以下です。

<form id="myForm">

  <input type="text" name="name" placeholder="名前" required>

  <input type="email" name="email" placeholder="メールアドレス" required>

  <button type="submit">送信</button>

</form>

<script>

document.getElementById('myForm').addEventListener('submit', e => {

  e.preventDefault();

  const formData = new FormData(e.target);

  fetch('/api/save', {

    method: 'POST',

    body: formData

  })

  .then(res => res.json())

  .then(data => alert('登録が完了しました'))

  .catch(err => console.error('エラー', err));

});

</script>

サーバー側の処理を作成する（PHPまたはNode.jsなど）

フォームから送信されたデータを受け取り、データベースに保存する処理をサーバーサイドで実装します。以下はNode.js（Express）の例です。

コードは以下です。

// server.js
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');

const app = express();
app.use(bodyParser.urlencoded({ extended: true }));

const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'mydb'
});

app.post('/api/save', (req, res) => {
  const { name, email } = req.body;
  db.query('INSERT INTO users (name, email) VALUES (?, ?)', [name, email], err => {
    if (err) throw err;
    res.json({ success: true });
  });
});

app.listen(3000, () => console.log('Server running on http://localhost:3000'));

データベースを準備する（MySQL例）

データ保存先としてMySQLなどのデータベースを用意します。

セキュリティのため、サーバー経由でのみアクセスできるように設定しましょう。

コードは以下です。

CREATE DATABASE mydb;
USE mydb;

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100) NOT NULL,
  email VARCHAR(100) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

管理画面を作成する

保存されたデータを閲覧できる管理画面を作ります。サーバーからデータを取得し、HTML＋JavaScriptで一覧表示します。

コードは以下です。

<table id="userTable" border="1">
  <tr><th>ID</th><th>名前</th><th>メール</th><th>登録日時</th></tr>
</table>

<script>
fetch('/api/list')
  .then(res => res.json())
  .then(users => {
    const table = document.getElementById('userTable');
    users.forEach(u => {
      const row = table.insertRow();
      row.insertCell().textContent = u.id;
      row.insertCell().textContent = u.name;
      row.insertCell().textContent = u.email;
      row.insertCell().textContent = u.created_at;
    });
  });
</script>

問い合わせフォームの構成要素

ここでは問い合わせフォームの具体的な構成要素を紹介します。問い合わせフォームといってもその内容はさまざまであり、構成要素も目的によって異なります。どういった要素があるのか、ぜひ参考にしてください。

入力フォームページ

入力フォームページは、ユーザーが企業に対して問い合わせたい内容を打ち込むページのことです。形式や機能をカスタマイズすることで、ユーザーにとって入力しやすいフォームにすることができます。

入力フォームページの作成にあたっては、何を回答してもらう必要があるのかを明確にしておく必要があります。とりあえずなんでも聞いておこうといったスタンスで項目を多くすると、途中離脱率が高くなるため注意してください。

入力内容確認ページ

入力内容確認ページは、フォームを実際に送信する前に入力内容を確認するページのことです。

ここで入力内容に間違いがないかを確認し、必要に応じて修正することができます。ただし、確認ページ自体は問い合わせフォームにおいて必須の要素ではありません。

入力内容を確認できるといった意味では必要なページですが、確認ページがあることで「一旦ここまでにしておこう」「他のサービスも見てみよう」といったことになる可能性もあるためです。特にリード獲得を目的とした問い合わせフォームの場合、入力内容確認ページを設置するのではなく、間違いがあれば入力画面にエラーを表示させるバリデーション機能を実装した方がいいケースもあります。

送信完了ページ

送信完了ページは、その名の通り、問い合わせを送信した後に送信が完了した旨を示すページのことです。このページが表示されたら問い合わせ完了となり、ブラウザを閉じることができます。

問い合わせをしてくれたことに対する感謝のメッセージを表示するほか、問い合わせ後の流れを記載しておくことで、ユーザーが不安になることを防止できます。

顧客データ管理ページ

問い合わせフォームを経由して送られてきた内容は、顧客データ管理ページを用意して管理できるようにしておきましょう。

問い合わせを一覧表示し、対応ステータスを示しておけば、どの問い合わせの対応が完了していて、どれがまだなのか、どのくらい待たせているのかといったことが明確になり、対応の優先順位を決めやすくなります。

問い合わせフォームは、ただ情報を入力して送信してもらうだけでなく、送信後の情報管理を含めて設計することが大切です。なぜなら、顧客との関係は問い合わせ対応をした後も長く続く可能性があるためです。

問い合わせフォームを作成する際のポイント

ここでは、問い合わせフォームを作成する際のポイントを紹介します。
どういった点を意識しながら作成するべきなのか、ぜひ参考にしてください。

項目数は少なくする

問い合わせフォームの項目数は必要最低限に絞り多くなりすぎないようにしましょう。項目数が多いと、ユーザーがうんざりしてしまい、入力途中で離脱してしまう恐れがあるためです。

問い合わせを途中でやめてしまうことは企業にとっても機会損失であるため、回避しなければなりません。どういった情報が必要なのかを精査したうえで、必要な情報のみの入力にとどめられるようにしてください。

必須項目はわかりやすくする

問い合わせフォームの中には、入力が必須の項目と任意の項目があるため、どれが必須なのかをわかるようにしておくことも大切です。

必須項目であるにもかかわらず入力が漏れていると、エラーとなり後から入力しなければならないため、ユーザーは煩わしさを感じるでしょう。「必須」と書いたラベルをつけるなどして必須項目であることをわかりやすくしておくことが大切です。

記入例を用意する

各入力項目に対する記入例を用意しておくことで、ユーザーは入力をスムーズに進められます。

例えば、名前を入力する時に漢字とひらがななのか、漢字とカタカナなのかを例示しておけば迷うことなく入力できます。また、郵便番号のハイフンの有無なども意外と見落とされがちなポイントであるため、記入例を用意しておくと便利です。

入力エラーはその場で表示する

入力内容に対するエラーがある場合は、その場で表示するようにしましょう。

これは、送信ボタンを押すタイミングでのエラー表示はユーザーにとってストレスであり、場合によっては離脱する恐れがあるためです。

入力内容が間違っていたら、その場でエラーを出し、何をどのように修正するのかを明記しておけば、入力作業自体もスムーズに進められます。

ページ内に問い合わせフォームを設置する

問い合わせフォームはWebサイト内に設置することが大切です。

サイトとは別のページに問い合わせフォームを設置するとユーザーがページを遷移しなければならず手間がかかります。

ユーザーによっては、ちょっとした手間がかかるだけでも離脱するケースもあるため、できるだけ遷移の回数を減らし、負担をなくすことを心がけてください。

レスポンシブ対応にする

レスポンシブ対応とは、スマートフォンやタブレット、パソコンなど、使用するデバイスに応じてデザインを最適化することです。

レスポンシブに非対応の問い合わせフォームは入力しにくいため、ユーザーの離脱に繋がってしまいます。各デバイスに応じたデザイン、サイズにすることで入力をスムーズに進められます。

自動返信機能を用意する

問い合わせを送信した後、自動返信が届くように設定しておくことも大切です。なぜなら、自動返信によってユーザーは自分の問い合わせがちゃんと送信できていることを確認できるためです。

自動返信がないと、本当に送信できているのか不安になり、何度も送ってしまう可能性があります。

そうなると企業側にとっては同じ内容のメッセージが何度も届くこととなるため、対応に手間がかかります。自動返信するメールに、対応までにどのくらいの時間がかかるのかを記載しておけば、余計な問い合わせを減らすことも可能です。

JavaScriptを使って問い合わせフォームを作る際の注意点

ここでは、JavaScriptを使って問い合わせフォームを作成する際に注意したいことを紹介します。具体的にどのような注意点があるのか、ぜひ参考にしてください。

時間がかかる

JavaScriptを使って一から問い合わせフォームを作成する場合、JavaScriptだけでなく、HTMLやPHPなどさまざまな知識が必要です。

WordPressやフォーム作成ツールであれば、比較的かんたんな操作のみですぐに問い合わせフォームを作れますが、JavaScriptなどを使う場合はプログラミングなどの作業に時間がかかると認識しておくべきでしょう。

また、「いつまでに問い合わせフォームを公開したい」というデッドラインがある場合は、早めにスケジュールを立てて、時間に余裕を持てるようにしておく必要があります。

専門知識を持った人が必要

JavaScriptを使用する場合、専門知識やスキルが必要不可欠であるため、JavaScriptに精通した人材を確保する必要があります。

社内にすでにそういった人材がいるのであれば、問い合わせフォーム作成にアサインできるようにスケジュール等を調整してください。また、いないのであれば別途採用するといった対応を取る必要があります。

SPIRAL Webフォーム作成ツールの特徴

問い合わせフォームを作成する際は、圧倒的な柔軟性とセキュリティ性でフォームを作成できるWebフォーム作成「SPIRAL®」がおすすめです。また、テンプレートによるフォーム作成だけでなく、HTMLやCSS、JavaScriptなどプログラミング言語を用いた開発も可能です。

Webフォーム作成「SPIRAL®」は、金融や製造、小売、学校、官公庁など13,000社を超える導入実績を持ちます。サービスについてさらに詳しく知りたい方は、公式ページをご覧いただくか、導入を検討中の方はこちらからぜひお問い合わせください。

まとめ

今回は、JavaScriptを使った問い合わせフォームの作成について解説しました。JavaScriptを使用する場合、デザインや機能を任意で設計できるため、自社のニーズに合った問い合わせフォームの作成が可能です。一方で、専門知識やスキルが求められるため、社内にそういった人材がいるかどうかが鍵となります。もしJavaScriptに対応できる人材がいない場合は、フォーム作成ツールの利用も検討してみてください。

SPIRAL®のお問い合わせ・資料請求はこちら