【Form Plugin】画面遷移なしでフォーム送信を可能にするjQuery

2022年3月14日2025年9月15日

こんにちは、ハル@haru_elpisです。

ウェブサイトでユーザーからの入力を受け付けるフォームは、多くの場合「送信ボタンを押すとページがリロードされる」という動作になります。しかし、ユーザー体験を向上させるためには、画面遷移なしでフォーム送信ができる仕組みが便利です。今回は、jQueryを使ったフォーム非同期送信を簡単に実現できるプラグイン、**「Form Plugin」**を紹介します。

Form Pluginとは？

Form Pluginは、jQuery用の軽量プラグインで、フォームを送信するときにページをリロードせず、非同期（AJAX）でデータをサーバーに送信できるようにするツールです。

主な特徴

ページのリロードなしでフォーム送信可能
簡単な設定で即導入できる
フォーム送信後のメッセージ表示もカスタマイズ可能
jQueryベースなので既存のウェブサイトに導入しやすい

このプラグインを使うと、例えばお問い合わせフォームやコメント欄、アンケートフォームなどで、ユーザーが送信ボタンを押したときにページが一瞬リロードされるストレスを回避できます。UX向上にもつながるため、SEO面でも滞在時間の向上や直帰率改善が期待できます。

Form Pluginの導入方法

ダウロード

Form Pluginは以下のGitHubページからダウンロード可能です。

ダウンロードしたファイルは以下の2つです。

jquery.form.min.js（圧縮版）
jquery.form.js（通常版）

用途に応じて好きな方を選び、プロジェクトのjsフォルダなどに保存しておきます。

HTMLにjQueryとForm Pluginを読み込む

HTMLの<head>内で、まずjQuery本体、その後Form Pluginを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./js/jquery.form.min.js"></script>

※jquery.form.jsを使う場合は、jquery.form.min.jsの代わりに読み込んでください。

フォームの作成

次にHTMLの<body>内にフォームを作成します。

<form id="myForm" action="comment.php" method="post"> 
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
    <input type="submit" value="Submit Comment" /> 
</form>

ポイントは、フォームに一意のIDを付けることです。これがJavaScript側で必要になります。

JavaScriptで非同期送信を設定

最後に、フォーム送信を非同期に処理するスクリプトを作成します。

<script>  
$(document).ready(function() { 
    $('#myForm').ajaxForm(function() { 
        alert("Thank you for your comment!"); 
    }); 
}); 
</script>