パーツ一覧 >ツール > 【コピペでOK】お問い合わせフォーム生成ツール

【コピペでOK】お問い合わせフォーム生成ツール

Webサイトに「お問い合わせフォーム」はなぜ必要か？

Webサイトは、ただ情報を発信するだけでなく、訪問者とのコミュニケーションの窓口でもあります。サービスに関する質問、仕事の依頼、あるいはサイトへのフィードバックなど、訪問者がいつでも気軽に連絡を取れる手段を用意しておくことは、信頼関係を築く上で非常に重要です。

その最も基本的な仕組みが「お問い合わせフォーム」です。

フォームに必要な項目とは？

一般的なお問い合わせフォームには、最低限以下の項目が含まれます。

  • お名前: 誰からの問い合わせかを知るための基本項目です。
  • メールアドレス: 返信先として必須です。入力間違いがないよう、type="email"を指定するのが親切です。
  • お問い合わせ内容: 訪問者が伝えたいことを自由に記述できる欄です。

その他、必要に応じて「件名」や「電話番号」などを追加することもあります。

注意！HTMLだけではフォームは機能しない

フォームは、見た目を作る**HTML（フロントエンド）と、入力されたデータを受け取って処理するプログラム（バックエンド）**の2つが揃って初めて機能します。

HTMLをサイトに設置しただけでは、訪問者が「送信」ボタンを押しても、データはどこにも届きません。

従来、バックエンド処理は専門的なプログラミング知識が必要でしたが、現在では**「フォーム処理サービス」**を使えば、誰でも簡単に安全なフォームを設置できます。

おすすめは「Formspree」

Formspreeは、世界中で広く使われているフォーム処理サービスです。無料プランでも十分に利用でき、以下のようなメリットがあります。

  • 設定が簡単: 発行される専用URLをフォームのactionに指定するだけ。
  • 強力なスパム対策: AIによるスパムフィルタが標準で備わっており、迷惑メールを大幅に削減できます。
  • 通知機能: フォームが送信されると、指定したメールアドレスに内容が即座に通知されます。

お問い合わせフォーム生成ツール

以下のツールを使えば、Formspreeと連携できるお問い合わせフォームのHTMLコードを簡単に生成できます。必要な項目を選び、発行されたあなたのFormspreeのURLを設定してください。

このツールのソースコード

このツール自体のソースコードも掲載します。どのような仕組みでフォームが生成されているか興味がある方や、ご自身のサイトにツール自体を設置したい方はご活用ください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>シンプルフォーム生成ツール</title>
    <style>
        /* ... CSS styles ... */
    </style>
</head>
<body>

<div class="container">
    <h1>シンプルフォーム生成ツール</h1>
    <p>...</p>

    <div class="main-layout">
        <div class="controls-section">
            <!-- Checkboxes and URL input -->
        </div>

        <div class="results-section">
            <div class="preview-section">
                <h2>フォームのプレビュー</h2>
                <div id="formPreview" class="form-preview"></div>
            </div>

            <div class="code-section">
                <h2>埋め込みコード</h2>
                <button id="copyButton" class="copy-button">コピー</button>
                <pre><code id="codeBox" class="code-box"></code></pre>
            </div>
        </div>
    </div>
</div>

<script>
    const fieldsContainer = document.getElementById('fields');
    const formActionInput = document.getElementById('formAction');
    const formPreview = document.getElementById('formPreview');
    const codeBox = document.getElementById('codeBox');
    const copyButton = document.getElementById('copyButton');

    const fieldTemplates = {
        name: `\n<div class="form-field">\n    <label for="name">お名前</label>\n    <input type="text" id="name" name="name" required>\n</div>`,
        email: `\n<div class="form-field">\n    <label for="email">メールアドレス</label>\n    <input type="email" id="email" name="email" required>\n</div>`,
        subject: `\n<div class="form-field">\n    <label for="subject">件名</label>\n    <input type="text" id="subject" name="subject">\n</div>`,
        phone: `\n<div class="form-field">\n    <label for="phone">電話番号</label>\n    <input type="tel" id="phone" name="phone">\n</div>`,
        message: `\n<div class="form-field form-field-textarea">\n    <label for="message">お問い合わせ<br />内容</label>\n    <textarea id="message" name="message" rows="5" required></textarea>\n</div>`,
    };

    function generateForm() {
        const actionUrl = formActionInput.value;
        let formHtml = `<form action="${actionUrl}" method="POST">`;

        const selectedFields = Array.from(fieldsContainer.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value);

        selectedFields.forEach(field => {
            if (fieldTemplates[field]) {
                formHtml += fieldTemplates[field];
            }
        });

        formHtml += `\n<div class="form-field">\n    <button type="submit">送信する</button>\n</div>`;
        formHtml += '\n</form>';

        formPreview.innerHTML = formHtml;
        codeBox.textContent = formHtml;
    }

    fieldsContainer.addEventListener('change', generateForm);
    formActionInput.addEventListener('input', generateForm);

    copyButton.addEventListener('click', () => {
        navigator.clipboard.writeText(codeBox.textContent).then(() => {
            copyButton.textContent = 'コピー完了！';
            setTimeout(() => { copyButton.textContent = 'コピー'; }, 2000);
        }).catch(err => {
            alert('コピーに失敗しました。');
        });
    });

    // Initial generation
    generateForm();
</script>

</body>
</html>
免責事項: 本コードを利用したことによって生じたいかなる損害についても、当サイトは一切の責任を負いません。自己責任の上でご利用ください。

導入でお困りですか？

専門家による導入サポート（有料）も承っております。お気軽にご相談ください。

お問い合わせはこちら