静的ウェブサイトにフォームを実装する方法

ウェブサイトのデザイン、目的、複雑さはさまざまですが、一般的に静的なものと動的なものに分類されます。静的ウェブサイトはあらかじめレンダリングされており、すべての訪問者に同じコンテンツを提供します。シンプルな構造で、通常は管理が簡単で読み込みも速い。一方、動的ウェブサイトは、サーバーサイドのプログラミング言語を使用して、コンテンツをその場で生成します。

静的なウェブサイトでは、フォームのようなインタラクティブな要素をサイト上で直接扱うことは通常サポートされていません。しかし、ここで重要なことがあります。フォームはユーザーと私たちをつなぐ重要な架け橋なのです。フォームを通じて、ユーザーから貴重な提案や問い合わせを得ることができ、そのフィードバックに基づいてウェブサイトのコンテンツを最適化し、ユーザーにより良い体験を提供することができます。しかし、静的なウェブサイトではこのタスクを直接達成することができないため、コンテンツをカスタマイズすることでユーザー体験を向上させることができるのです。

フォーム処理サービスを選択

フォーム処理サービスは、静的ウェブサイトのフォームデータを収集し処理するサードパーティです。フォーム送信を処理するために必要なサーバー側のインフラを提供し、静的ウェブサイトの利点を維持しながら、ウェブサイトの機能性と双方向性を向上させます。

ユーザーがフォームを送信すると、データはフォーム処理サービスのエンドポイントに送信されます。その後、サービスはデータを処理し、安全に保管し、適切な受信者に通知を送信します。多くのフォーム処理サービスがあります。最も人気のあるフォーム処理サービスをいくつか見てみましょう。

1.フォームスプリー

フォームスプリーはユーザーフレンドリーなフォーム処理サービスで、静的サイトのフォーム追加やフォーム送信の管理プロセスを簡素化します。月50件のフォーム送信などの基本機能を備えた無料版と、セーフリストやスパム保護などの高度な機能を備えた有料版があります。

2.フォームバケット

フォームバケット Formbucketの使いやすいダッシュボードページを使って、フォームのフィールドを定義したり、サイトのブランディングに合わせたバリデーションルールを設定したりできます。フォームフィールドを定義し、あなたのサイトのブランディングに沿ったバリデーションルールを設定することができます。

3.ゲットフォーム

ゲットフォーム Getformは、フォーム送信をシンプルかつセキュアに処理するためのフォームバックエンドプラットフォームです。Getformは、フォーム送信を管理するための直感的なユーザーインターフェイス、Eメール通知、SlackやGoogle Sheetsのような一般的なサービスとの統合を提供します。

Getformでフォーム処理サービスを設定する

Getformのようなフォーム処理サービスを利用することで、ウェブサイトでのフォーム送信管理を大幅に簡素化することができます。ユーザーがフォームを送信すると、Getformがすべての処理を引き継ぐので、バックエンドAPIでフォーム送信を処理したり保存したりする必要はありません。

このシームレスな統合により、すべての返信を専用のメッセージ受信トレイで効率的に管理できます。まずはHTMLそしてカスケーディングスタイルシート歌で応えるジャバスクリプト基本的なことを理解し、以下のステップを踏む：

在籍 Getformのアカウント。
Getformアカウントのダッシュボードに移動し、以下の項目をクリックします。+ 作成済み ボタン。
表示されたダイアログボックスで、"フォーム" .説明的なエンドポイント名を入力し、適切なタイムゾーンを選択します。次に"創造".

form要素のaction属性に追加する必要があります。

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

フォーム処理サービスを設定したら、HTML、CSS、JavaScriptを使ってフォームを作成できます。

1.ターミナルで、以下の名前のファイルを作成する。フォームのプロジェクト・フォルダーに移動し、カレント・ディレクトリーをプロジェクト・ディレクトリーに変更する：mkdir forms

mkdir forms
cd forms

2.以下のプロジェクトファイルを追加する：

#unixベースのシステム
touch index.html styles.css script.js

#windows
echo. > index.html & echo. > styles.css & echo. > script.js

3.次に、HTMLフォームを作成します。このガイドでは、名前とメールアドレスの入力ボックス、メッセージテキストエリア、送信ボタンを含むフォームを作成するのに役立つコードを以下に示します。このコードは インデックス.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="/ja/Getform%20URL/" method="POST" data-trp-original-action="<Getform URL>">
            <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">Eメール</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>  
        <input type="hidden" name="trp-form-language" value="ja"/></form>
    </div>
    <script src="script.js"></script>
</body>
</html>

4.Getformパネルに移動し、エンドポイントURLをコピーし、このURLをHTMLコードのフォームの開始タグ内のaction属性に貼り付けます。
5.最後に、styles.cssファイルにCSSスタイルを追加して、フォームのデザインと外観をカスタマイズします。

JavaScriptによるデータ検証

データ・バリデーションは、ユーザー入力が処理または保存される前に、特定の基準およびバリデーション・ルールを満たしていることをチェックします。データ・バリデーションの実行は、不正なデータや悪意のあるデータの送信を回避し、入力エラーに関するフィードバックをユーザーに即座に提供し、有効なデータのみがさらに処理されることを保証します。データの完全性と正確性を維持する上で重要な役割を果たします。

データのバリデーションを実装するには、JavaScriptを使ったクライアントサイドのバリデーション、サーバーサイドのバリデーション、あるいはその2つの組み合わせなど、いくつかの方法があります。この記事では、問い合わせフォームにクライアントサイドのバリデーションを実装して、ユーザーが空のフィールドを送信しないようにし、提供されたEメールが正しくフォーマットされるようにします。

1.まず、以下のコードをscript.js ファイルで検証関数を定義する：

function validateForm() {
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const message = document.getElementById('message').value;
    if (name.trim() === '' || message.trim() === '') {
        alert('Please fill out all fields.');
        return false;
    }
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        alert('Please enter a valid email address.');
        return false;
    }
    return true;
}

validateForm()関数は2つのことを行います。まず、nameフィールドとmessageフィールドが空であることをチェックし、次に正規表現を使ってemailフィールドを検証し、emailアドレスが有効なフォーマットであることをチェックします。

もしフィールドが空であったり、Eメールフォーマットが無効であったりすると、この関数はトリガされ、アラートメッセージを表示します。逆に、すべてのフォームフィールドがこれらのバリデーションチェックをパスした場合、関数はtrueを返し、フォームは送信されます。

送信されたデータの正確性と完全性を保証するために、バリデーションルールを追加することができます。例えば、ユーザー入力の長さを検証したり、メッセージ内の特定の文字の送信を制限したりすることができ、潜在的なセキュリティ侵害（インジェクション攻撃など）の防止に役立ちます。

2.次に、上記の関数を呼び出して、クリックイベントリスナーのコールバックを使用してバリデーションを有効にします。ユーザーがだすコールバックは、ボタンが押されるたびに関数をトリガーする。関数を呼び出すには script.js 次のコードをファイルに追加します：

document.addEventListener('DOMContentLoaded', function () {)
const submitButton = document.getElementById('submitBtn')；

if (submitButton) { { submitButton.addEventListener('DOMContentLoaded')
submitButton.addEventListener('click', function (event) {)
event.preventDefault(); if (submitButton) { submitButton.addEventListener('click', function (event) { event.preventDefault(); }.
もし (validateForm()) {
document.forms['contactForm'].submit()；
resetFormAfterSubmission()を実行します；
}
return false.
}); }
}
}).

関数のresetFormAfterSubmission() { {を設定します。
setTimeout(function () {
const contactForm = document.forms['contactForm']；
contactForm.reset(); }, 500); function resetFormAfterSubmission()
}, 500);
}

このコードには、デフォルトのフォーム送信アクションを防ぐための preventDefault() 関数が含まれていることに注意しましょう。これにより、Getform に情報を送信する前にフォームを検証することができます。

バリデーションと送信に成功すると、resetFormAfterSubmission() 関数がトリガーされ、半秒遅れてフォームがリセットされ、さらに送信できるようになります。

概要

フォームの実装に成功した今、フォームをカスタマイズする機会は無数にあります。例えば、CSS やお好みのプリプロセッサ言語を使ってフォームをさらにスタイリングしたり、高度なバリデーションテクニックを実装してフォームのデザインや機能を強化したりすることができます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み