Webフォーム作成の記事

ARTICLE

フォームをJavaScriptで作成するには？手順からコツまで詳しく解説

更新日：2026/02/03

フォームとは、情報を入力する画面のことです。名前や性別、住所、連絡先などの情報を入力するケースが多く、情報収集や顧客接点、業務効率化などさまざまな役割を担っています。そんなフォームはJavaScriptで自作が可能です。この記事では、フォームの概要や役割、JavaScriptで作成する際の手順などについて解説しています。フォームを業務に取り入れようと検討中の方はぜひ参考にしてください。

そもそもフォームとは？
JavaScriptでフォームを作成する手順
JavaScriptでフォームを作成する際のコツ
JavaScriptでフォームを作成する際の注意点
フォームをかんたんに作成する方法
安全性を考慮したフォーム制作におすすめのツール
まとめ

そもそもフォームとは？

フォームとは、名前や性別、連絡先、職業などの情報を入力するための画面のことです。WebサイトやLPに設置するケースが一般的で、資料の請求やキャンペーンへの申し込み、アンケート回答などを行う際に使用します。フォームに情報を入力し「送信」ボタンを押すとフォームを運営する会社に入力した情報が届く仕組みです。

フォームの役割

フォームの主な役割としては、以下のようなものが挙げられます。

・情報収集

・業務効率化

・顧客接点

フォームは氏名や年齢、連絡先など、さまざまな情報を入力して送信するものであるため、企業が情報収集を行う際に役立ちます。得た情報を営業活動に活かすことも可能です。

フォームを通して得た情報は、社内システムやCRM（Customer Relationship Management）システムに連携でき、手作業によるデータ入力の手間がかかりません。また、フォームに自動返信機能を設定しておけば、担当者の手間となることなくすぐに返信メールを出せます。

また、フォームは企業と顧客をつなぐ役割も持っています。例えば、フォームは24時間365日いつでも利用できるため、日中は忙しくて時間がない顧客でもフォームを通してであれば、企業にコンタクトを取ることができます。

フォームの種類

フォームと一言でいっても用途によってその種類は異なります。

・課題解決を目的としたフォーム：問い合わせ、資料請求、セミナー、イベント申し込みなど

・利益を目的としたフォーム：キャンペーン、プレゼント応募、会員登録など

・特殊な用途を目的としたフォーム：採用、社内申請、勤怠報告、社内設備利用申請など

・回答促進を目的としたフォーム：アンケート、診断、顧客満足度調査など

課題解決を目的としたフォームは、問い合わせや資料請求など、ユーザーが抱える疑問や質問を解決することを目的として使用されるものです。

利益を目的としたフォームは、キャンペーンやプレゼント応募など、ユーザーにとっての利益のために利用するフォームです。

特殊な用途を目的としたフォームは、マーケティング以外の目的で使用するものです。社内における申請プロセスや管理業務の手間を軽減してくれるでしょう。

また、回答促進を目的としたフォームは、企業がアンケートなど何かしらの回答を得たいときに使用します。ここで得られた情報は、顧客との関係構築やマーケティング施策などにも役立つといえます。

JavaScriptでフォームを作成する手順

JavaScriptを使った問い合わせフォームの作成は、ユーザーが直接触れる「フロントエンド」から、データを処理する「バックエンド」まで一連の流れを構築する必要があります。

ここでは、自社でゼロからフォームを構築する際の具体的なステップを解説します。

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

まず、フォームにどのような項目を設置するかを決定します。

用途や目的を明確にすることで、必要な情報（氏名、メールアドレス、問い合わせ内容など）を絞り込めます。項目数が多すぎると、ユーザーが入力に負担を感じて離脱する原因になるため、項目の優先順位をつけ、最小限に留めるのがコツです。

また、履歴書やポートフォリオなどの送付が必要な場合は、ファイル添付機能の設計もあわせて検討しておきましょう。

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

次に、ユーザーが情報を入力する画面（ユーザーインターフェース）を構築します。HTMLでフォームの構造を定義し、JavaScriptを用いて入力値の取得やサーバーへの送信処理を記述します。

【実装コード例】

HTML

<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>

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

JavaScriptから送信されたデータを受け取り、内容の検証やデータベースへの保存を行う「サーバーサイド」の処理を実装します。以下は、JavaScriptとの親和性が高いNode.js（Express）を用いた例です。

【実装コード例】

JavaScript

// 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'));

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

送信されたデータを永続的に保存するため、MySQLなどのデータベースを用意します。セキュリティを確保するため、データベースへはサーバープログラムからのみアクセスできるように設定し、外部からの直接接続を遮断するのが鉄則です。

【SQLの例】

SQL

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

);

5. 管理画面を作成する

最後に、蓄積されたデータを閲覧・管理するための画面を作成します。サーバー経由でデータベースから情報を取得し、一覧形式で表示します。

【実装コード例】

HTML

<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>

JavaScriptでフォームを作成する際のコツ

ここでは、JavaScriptを使ってフォームを作成する際に押さえておきたいコツを紹介します。より使い勝手のいいフォームにするためにも、ぜひ参考にしてください。

入力データのチェック機能をつける

フォームでは、ユーザーが入力したデータが正しい形式かどうかを確認するためのチェック機能を実装することが大切です。

JavaScriptを使用することで、クリックや入力などのユーザーの操作をきっかけに入力データの検証を行う処理を実行できます。このユーザーによる操作をイベントといいます。イベントを検知すると特定の処理をすることができ、このとき実行される処理のことをイベントハンドラと呼びます。

不適切なデータをエラーとして処理できるようにする

クリックすると指示を実行するonClickやonSubmitといったイベントハンドラを活用することで、不適切なデータをエラーとして処理できるようになるため、誤って送信される心配がありません。例えば、メールアドレスに間違いがあると「メールアドレスを入力してください」と表示され、正しく入力するまで送信できないといった形です。

アニメーションを使う

JavaScriptではアニメーションの設定ができます。例えば、フォームのテキストにカーソルを合わせると色がついて視覚的にわかりやすくするといったことが可能です。また、動きをつけることもできます。JavaScriptの機能をまとめたライブラリと呼ばれるファイルを取得したうえで読み込んで設定するのが一般的です。

ポップアップウィンドウを表示させる

画面上にポップアップウィンドウを表示させるのも有効な方法の1つです。

例えば、JavaScriptを使えば、入力エラーが発生した際や注意点を伝える際などにポップアップとして画面上にウィンドウを表示できます。これによって入力ミスを防ぎ、正しい入力をサポートできるため、ユーザーの負担軽減にもつながるでしょう。

JavaScriptでフォームを作成する際の注意点

ここではJavaScriptでフォームを作成するにあたって注意するべき点を紹介します。これから作成しようとしている方は特に参考にしてみてください。

時間がかかる

JavaScriptでフォームを作成しようとすると、作成に時間がかかる可能性があります。フォームの設計から記述方法まで検討を行い、実際に書き込んでいくだけでも10時間以上はかかるでしょう。機能をより多く実装しようとするとさらに工数が嵩むため、コストも高くなってしまう恐れがあります。自社内のエンジニアで対応できるのか、それとも外注するのかを検討する必要があります。

バックエンドとフロントエンドをそれぞれ改修する必要がある

JavaScriptで作成する場合、バックエンドとフロントエンドそれぞれの画面を改修する必要があります。バックエンドとは、サーバー側でデータの処理や保存を行うシステム部分のことです。

また、ユーザーが見る画面のことをフロントエンドといいます。フロントエンド・バックエンドそれぞれの改修内容に整合性がないと正しく動作しないため注意が必要です。

業務が属人化する恐れがある

JavaScriptはプログラミングに関する知識が必要となるため、フォームの作成業務が専門知識を持った人のみしかできず、業務が属人化する恐れがあります。担当者が不在となると、業務に支障が出るほか、緊急対応ができなくなるケースもあるなど、懸念点が少なくありません。

フォームをかんたんに作成する方法

先ほど説明した課題をクリアしつつフォームを作成したい場合は、専用ツールの使用がおすすめです。専用ツールであれば、コードの記述や細かい設定作業は不要で、画面上での操作のみでかんたんにフォームを作成できます。ツールによっては分析機能やデータの管理機能、検索機能など、その後のデータ活用にも役立つ機能を搭載しています。