ウェブサイトは、そのデザイン、目的、複雑さなどは様々ですが、一般に静的サイトと動的サイトの2種類に分類することができます。前者は事前にレンダリングを行い、すべての訪問者に同じコンテンツを提供します。シンプルな構造で一般に管理が容易、そして読み込みが高速なのが特徴です。対する動的サイトは、サーバーサイドのプログラミング言語を使用して、その場でコンテンツを生成します。

フォームのようなインタラクティブな要素には、データの保存などサーバーサイドの処理機能が必要になるため、静的サイトではサポートされていません。しかし、フォームは訪問者との大切なコミュニケーションチャネルであり、サイトに追加したいところです。お問い合わせフォームを通じて貴重なフィードバックを集めることで、コンテンツを調整し、ユーザー体験をより良いものにすることができます。

そこで今回は、静的サイトにフォームサービスを利用してフォームを設置し、Kinstaの静的サイトホスティングでサイトをデプロイする方法を見ていきます。

フォームサービスを利用する

フォームサービスは、静的サイトのフォームデータを収集、処理するサードパーティのサービスです。静的サイトの利点はそのままに、サイトの機能性とインタラクティブ性を強化し、フォーム送信を処理するために必要なサーバーサイドのインフラストラクチャを提供してくれます。

訪問者がフォームを送信すると、データはフォーム処理サービスのエンドポイントに届きます。その後、サービスがデータを処理し、安全に保存して適切な受信者（この場合はサイト所有者）に転送します。

フォームサービスは多数ありますが、以下の3つは特に人気の高い選択肢です。

Formspree

Formspreeは、ユーザーフレンドリーで、静的サイトへのフォームの設置やフォーム送信の管理を簡素化してくれます。月50件のフォーム送信などの基本機能が利用できる無料プランと、安全な表示やスパム保護など、より高度な機能が付帯した有料プランがあります。

FormBucket

FormBucketは、フォーム送信を「バケツ」（Bucket）に保存することで、フォーム送信を収集・管理できる便利なサービスです。ユーザーフレンドリーな管理画面から、サイトのブランディングに合わせたフォームのフィールドを指定し、バリデーションルールを設定することができます。

Getform

Getformは、フォーム送信をシンプルかつ安全に処理するプラットフォーム。フォーム送信の管理には、直感的なユーザーインターフェースを利用でき、メール通知、SlackやGoogle Sheetsのような一般的なサービスとの統合も可能です。

各サービスの比較

上記3つのサービスの主な機能を表にまとめて比較してみましょう。

Formspree FormBucket Getform
価格 無料プラン、および使用量とストレージ容量に応じた有料プラン 14日間の無料トライアル、および使用量とストレージ容量に応じた有料プラン 無料プラン、および使用量とストレージ容量に応じた有料プラン
フォーム送信数 プランによって異なる プランによって異なる プランによって異なる
フォームのカスタマイズ ◯ ◯ ◯
スパム対策 ◯ ◯ ◯
ファイルアップロード 有料プランのみ ✕ ◯
サードパーティ統合 Zapier、Webhook、Google Sheets、MailChimpなど Webhook Zapier、Slack、Google Sheets、Airtable、Mailchimp、Twilioなど

フォームサービスを選ぶ際には、統合のしやすさ、必要な機能、価格、ホスティングプラットフォームとの互換性などを考慮する必要があります。フォームの具体的な要件を洗い出し、各サービスを比較して、適したものを使用してください。

1. Getformを使ってフォームを設置する

Getformのようなフォームサービスを活用すると、サイトでのフォーム送信の管理が大幅に簡素化されます。ユーザーがフォームを送信したあとの処理は、すべてGetformが行ってくれるため、バックエンドAPIでフォーム送信の処理や保存を行う必要がなくなります。

このシームレスな統合により、すべてのお問い合わせ内容を専用のメッセージ受信箱で一元管理することができます。以下、HTML、CSS、JavaScriptの基礎知識を前提として、フォームの設置方法をご紹介します。

  1. Getformでアカウントを作成する。
  2. Getformの管理画面に移動し、「+ Create…」をクリック。
  3. ダイアログボックスで、「Form」を選択してることを確認した上で、わかりやすいエンドポイント名を入力し、適切なタイムゾーンを選択。その後、「Create」をクリックする。
    Getformでフォーム送信エンドポイントURLを作成
    Getformでフォーム送信エンドポイントURLを作成

    これによって、フォーム送信エンドポイントのURLが生成されます。次のステップでこのURLをフォーム要素のaction属性に追加します。

2. HTMLとCSSでフォームを作成する

フォームサービスの設定を終えたら、HTML、CSS、JavaScriptでフォームを作成していきます。

  1. ターミナルで「forms」というプロジェクトフォルダを作成し、カレントディレクトリをプロジェクトのディレクトリに変更します。 
    mkdir forms
cd forms
  2. 以下のプロジェクトファイルを追加します。 
    #unix-based systems
touch index.html styles.css script.js 

#windows
echo. > index.html & echo. > styles.css & echo. > script.js
  3. HTMLフォームを作成します。以下は、名前とメールアドレスの入力フィールド、問い合わせ内容を記入するテキストエリア、送信ボタンを含むフォームを作成するコード例です。このコードをindex.htmlファイルに貼り付けます。 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>お問い合わせフォーム</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 class="form-title">お問い合わせ</h1>
        <form class="contact-form" name="contactForm" action="<Getform URL>" method="POST">
            <div class="input-group">
                <label for="name" class="form-label">お名前:</label>
                <input type="text" id="name" name="name" class="form-input" required>

                <label for="email" class="form-label">メールアドレス:</label>
                <input type="email" id="email" name="email" class="form-input" required>

                <label for="message" class="form-label">メッセージ:</label>
                <textarea id="message" name="message" class="form-textarea" rows="4" required>
                </textarea>
            </div>

            <div class="form-control">
                <button type="submit" id="submitBtn" class="form-submit">送信する</button>
            </div>  
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>
  4. Getformの管理画面に移動し、エンドポイントURLをコピーし、HTMLコードのフォームの開始タグ内のaction属性に貼り付けます。
  5. styles.cssファイルにCSSスタイルを追加し、フォームのデザインと外観をカスタマイズします。

3. JavaScriptでバリデーションを実装する

データバリデーションとは、ユーザーの入力を処理したり保存したりする前に、特定の条件や基準を満たしているかどうかを検証するものです。

これを行うことで、不正なデータや悪意のあるデータの送信を回避し、入力エラーに対するフィードバックをユーザーに即座に提供して、有効なデータのみを処理するようにします。データの整合性と正確性を維持する上で重要な仕組みです。

バリデーションを実装するには、JavaScriptを使ってクライアントサイドでバリデーションを実行する方法、サーバーサイドでバリデーションを実行する方法、両者を組み合わせる方法など、いくつか選択肢があります。今回は、クライアントサイドのバリデーションを実装して、ユーザーが空のフィールドを送信できないようにし、入力されたメールアドレスが有効な形式であることを検証する例をご紹介します。

  1. 以下のコードをscript.jsファイルに貼り付け、バリデーション関数を定義します。 
    function validateForm() {
    const name = document.getElementById('お名前').value;
    const email = document.getElementById('メールアドレス').value;
    const message = document.getElementById('メッセージ').value;
    if (name.trim() === '' || message.trim() === '') {
        alert('すべてのフィールドを入力してください。');
        return false;
    }
    const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;
    if (!emailRegex.test(email)) {
        alert('有効なメールアドレスを入力してください。');
        return false;
    }
    return true;
}

    validateForm()には、2つの目的があり、まずは名前フィールドとメッセージフィールドが空であるかをチェックします。次に正規表現を使ってメールアドレスフィールドの検証を行い、メールアドレスが有効な形式であるかどうかを確認します。

    フィールドが空であったり、メールアドレスの形式が無効であったりすると、警告メッセージを表示します。すべてのフィールドがバリデーションをパスした場合、関数はtrueを返し、フォームが送信されます。

    送信データの完全性と正確性を保証するため、他のバリデーションルールを追加することも可能です。例えば、ユーザーによる入力内容の長さを検証したり、メッセージ内で特定の文字を使用できないように制限したりすることで、インジェクション攻撃のような潜在的なセキュリティの脆弱性を防ぐことができます。

  2. イベントリスナーコールバックのclickを使用して、上記の関数を呼び出し検証を有効にします。このコールバックは、ユーザーが「送信する」ボタンをクリックするたびに関数をトリガーします。次のコードをscript.jsファイルに貼り付けます。 
    document.addEventListener('DOMContentLoaded', function () {
	const submitButton = document.getElementById('submitBtn');

	if (submitButton) {
		submitButton.addEventListener('click', function (event) {
			event.preventDefault();
			if (validateForm()) {
				document.forms['contactForm'].submit();
				resetFormAfterSubmission();
			}
			return false;
		});
	}
});

function resetFormAfterSubmission() {
	setTimeout(function () {
		const contactForm = document.forms['contactForm'];
		contactForm.reset();
	}, 500);
}

    preventDefault関数がデフォルトのフォーム送信アクションを防ぐため、Getformに情報を送信する前にフォームを検証することができます。

    また、バリデーションと送信に成功すると、resetFormAfterSubmission関数が起動します。これによって、1秒もかからずにフォームがリセットされ、またフォームを送信できるようになります。

4. Kinstaで静的サイトをデプロイする

Kinstaでは、様々なウェブプロジェクトやデータベース向けに、マネージドホスティングソリューションを提供しています。無料プランでは、GitHub、GitLab、またはBitbucketから最大100件まで静的サイトをホストすることができます。

Kinstaで静的サイトをデプロイするには、まず、お好みのGitサービスにコードをプッシュします。次に以下の手順に従ってください。

  1. MyKinstaにログインする。
  2. 「サービスを追加」をクリックし、ドロップダウンメニューから「静的サイト」を選択。
  3. Kinstaを始めて使用する場合は、任意のGitサービスを選択して有効化する。
  4. プロジェクトリポジトリを選択。
  5. デプロイするブランチを選択して、一意のサイト名を指定する。
  6. ピリオド（.）を追加し、デプロイ用のHTMLファイルとアセットを含むパブリッシュディレクトリのルートパスを指定。
  7. 「サイトを作成」をクリック。

これで、数秒以内にサイトがデプロイされます。

フォームを既存のサイトにシームレスに統合するには、フォームのHTMLをコピーし、設置したいセクションに直接貼り付けます。一貫したスタイルと機能を確保するために、関連するCSSプロパティとJavaScriptコードを含めるようにしてください。

あるいは、すでにフォームを個別にデプロイしているため、ユーザーがクリックしてフォームにアクセスできるURLをハイパーリンクまたはボタンとして設置する手もあります。

本番サイトの機能をテストするには、サイトのURLにアクセスし、必要情報を入力してフォームが期待どおりに機能することを確認します。フォームがユーザー入力を検証し、必要に応じて警告を表示し、さらに処理するために有効なデータを正常に送信するかどうかをチェックしましょう。

フォームの送信後、Getformのフォーム送信完了を示すページにリダイレクトされます。

Getformのフォーム送信完了を示すページ
Getformのフォーム送信完了を示すページ

Getformの管理画面でメッセージ受信箱を開くと、フォームの内容を確認することができます。

まとめ

フォームを設置したら、次はフォームのカスタマイズです。CSS やお好きなプリプロセッサ言語を使用してスタイリングしたり、高度なバリデーションを実装したりすることで、フォームのデザインと機能をさらに高めることができます。

Kinstaでは、静的サイトホスティングサービス以外にも、アプリケーションホスティングも提供しており、サーバーサイドの処理、データベースインタラクション、その他の複雑な機能を必要とするウェブアプリなど、より動的なアプリケーション向けに設計されています。

両者を利用すれば、シンプルな静的サイトから複雑なウェブアプリケーションまで、あらゆるプロジェクトを一つのエコシステムの下で一元管理することができます。

フォームサービスを使って、静的サイトで動的な体験を提供してみてください。お好みのフォームサービスがありましたら、以下のコメント欄でお聞かせください。

 

Jeremy Holcombe Kinsta

Kinstaのコンテンツ＆マーケティングエディター、WordPress開発者、コンテンツライター。WordPress以外の趣味は、ビーチでのんびりすること、ゴルフ、映画。高身長が特徴。