WordPress に HTML フォームを追加する方法（2つの方法）

ビジュアルビルダーでフィールドをドラッグする代わりに、独自のフォームマークアップを記述したいですか？

朗報：そのフォームを機能させるためにPHPを記述する必要はありません。軽量プラグインに処理を任せ、すべてのタグを自分で記述できます。または、ビジュアルでフォームを構築し、必要な場所にカスタムHTMLをドロップすることもできます。

このガイドでは、WordPressで機能するカスタムHTMLフォームを作成する方法を説明します。

HTMLフォームとは何か、そしてなぜ作成するのか？

HTMLフォームは、他のWebフォームと同様に、名前、メール、フィードバックなどの訪問者情報を収集します。それを区別するのは、それがどのように構築されているかです。重いドラッグアンドドロップビジュアルエディターに依存する代わりに、プレーンコードでHTMLフォームを構築します。つまり、テキストボックス、チェックボックス、ドロップダウンなどのフィールドを自分で入力します。

ドラッグ＆ドロップのフォームビルダーではなくHTMLフォームを使用するユーザーは、通常、ウェブサイトのパフォーマンスを最大化するためにそうします。プレーンなHTMLフォームは、ウェブページの読み込みをわずかに速く保ちます。スピードだけでなく、自分でコードを書くことで、デザインを完全にコントロールできます。ビルダーの厳格な設定に縛られるのではなく、レイアウトをニーズに合わせて正確にカスタマイズできます。

ほとんどのWordPressユーザーは、ドラッグ＆ドロップのフォームビルダープラグインが最高のユーザーエクスペリエンスを提供すると考えています。手動のサーバー設定の手間なしに、完全なHTMLカスタマイズが可能です。

このガイドでカバーする内容は以下のとおりです。

方法1：プラグインを使用してWordPressにHTMLフォームを追加する

🎖️ 対象者: 軽量でパフォーマンス重視のソリューションで完全なHTML制御を求める開発者およびサイト管理者。このプラグインは、ビジュアルフォームビルダーよりもシンプルさとスピードを重視しています。

無料のフォームプラグインであるHTML Formsのようなプラグインを使用して、WordPressにHTMLフォームを追加できます。このプラグインは、WordPressでHTMLフォームを実行するために必要なPHPと少量のJavaScriptを管理しながら、HTMLを自分で自由に記述できます。

無料バージョンには、メール通知の送信や送信の保存など、このチュートリアルに含まれるすべての機能が含まれています。スパム保護も無料です。

開始するには、WordPressウェブサイトにプラグインをインストールしてください。ヘルプが必要な場合は、WordPressプラグインのインストールに関するステップバイステップガイドに従ってください。

有効化したら、HTML Forms » Add Newに移動してフォームの作成を開始します。

「フォームタイトル」フィールドにフォームの名前を入力します。このガイドでは、シンプルな連絡フォームを作成するため、「Contact Form」と名付けました。

次に、「フォームの作成」ボタンをクリックします。

そうすると、「フォームの編集」ページが表示され、HTMLフォームのカスタマイズを開始できます。

ページの上部には、フォームタイトル、スラッグ、ショートコードを含むフォームの詳細が表示されます。これらの詳細の下には、「フィールド」、「メッセージ」、「設定」、「アクション」、「送信」の5つのタブがあります。

「フィールド」タブには、フィールドコードを生成する10個のボタンがあります。

このタブの下部には、事前作成されたHTMLフォームとプレビューがあります。

デフォルトのフォームは非常にシンプルです。ユーザーが名前、メールアドレス、簡単な件名、メッセージを入力するための4つのフィールドがあります。

新しいフィールドを追加するには、「フォームコード」ボックスのすぐ上にある対応するボタンをクリックします。

このチュートリアルでは、件名フィールドをドロップダウンフィールドに置き換えます。

「ドロップダウン」をクリックして設定を開きます。次に、「フィールドラベル」ボックスに質問を入力し、問い合わせの種類ごとに「一般的な質問」、「営業」、「サポート」などの選択肢を追加します。

この情報を入力したら、「フィールドをフォームに追加」をクリックします。

次に、新しいドロップダウンタグが「フォームコード」ボックスに表示されます。下にスクロールして、更新されたマークアップを確認してください。

フォームをユーザーフレンドリーにするために、ドロップダウンフィールドを「あなたのメール」フィールドの直下に配置しましょう。このプラグインにはドラッグ＆ドロップビルダーがないため、コードビルダーからコードをカットして、配置したい場所に貼り付ける必要があります。

件名フィールドを削除するには、件名フィールドを含む段落ブロック全体を削除します。

完了したら、「フォームプレビュー」パネルを確認します。

表示されない場合は、「フォームプレビューを表示」リンクをクリックします。

このライブプレビューにより、レイアウトを壊すことなく変更が機能したことを確認できます。

件名フィールドが消えていることをすばやく確認し、新しいドロップダウンが正常に機能するかをテストできます。

次に、青い「変更を保存」ボタンをクリックします。

次に、フォームの設定を確認します。「メッセージ」タブをクリックして、HTMLフォームがフォーム送信確認メッセージをどのように設定するかを確認します。

このタブでは、ユーザーが表示する確認メッセージをカスタマイズできます。

デフォルトのテキストで問題なければ、そのままにしておくことができます。そうでない場合は、編集してから変更を保存をクリックします。

デフォルトでは、新しいフォームはデータベースにエントリを保存しますが、誰かが送信してもメールで通知されません。

これを修正するには、「アクション」タブをクリックします。「このフォームにはフォームアクションが設定されていません」という通知が表示されます。

「メールを送信」をクリックします。

「送信元」、「宛先」、「メッセージ」フィールドはすべて必須です。メッセージボックスのすぐ下にある変数フィールドを使用して、訪問者がフォームに入力した情報を自動的に挿入できます。

それらを入力したら、「変更を保存」をクリックします。これで、誰かがフォームを送信するたびにメールを受信できるようになります。

すべて設定したら、HTMLフォームを発行するだけです。フォームを埋め込みたいページまたは投稿に移動します。次に、フォームを挿入したい領域にカーソルを合わせ、「+」ボタンをクリックします。

ここから、「HTML Forms」を検索バーに入力し始めます。正しいブロックが表示されたら、クリックしてページまたは投稿に追加します。

HTML Formsブロック内で、ドロップダウンメニューをクリックし、表示したいフォームを選択します。

ドロップダウンメニューからフォームを選択したら、「更新」ボタンをクリックします。

これで、お問い合わせフォームが公開されました。訪問者には次のように表示されます。

どこかでフォームを宣伝する前に、サンプルエントリを送信して自分でテストすることをお勧めします。これにより、フォームが表示されているだけでなく、実際に配信されていることを確認できます。

テストエントリを送信した後、HTML Forms » All Formsに移動します。ここで、フォームの「送信」リンクをクリックします。

これにより、すべてのフォーム送信が表示されます。テストエントリがテーブルに表示され、受信トレイにも通知が届くはずです。

「送信」テーブルは、フォームが送信された日時を示す「タイムスタンプ」列で開かれ、その後、各フィールドの列が続きます。

方法2：ドラッグ＆ドロップでフォームにカスタムHTMLを追加する

🎖️ 最適：ツールチップ、リンク、書式設定されたメモなど、特定のHTMLをドロップする必要がある場合でも、ビジュアルでフォームを作成したいすべての人。

フォームの作成に関しては、WPFormsをお勧めします。ドラッグアンドドロップビルダーを備えており、独自のマークアップを挿入できるため、リンク、書式設定されたメモ、またはツールチップを希望の場所に正確に配置できます。

私たちは、お問い合わせフォーム、リードジェネレーション、年次アンケートなどのために、独自のウェブサイトでWPFormsを使用しています。

WPForms Liteは完全に無料ですが、この方法で使用されるHTMLフィールドは有料機能です。これは、Basicプラン（年間39.60ドル）以上のプランで利用できます。

この方法では、WPFormsを使用してWordPressフォームをカスタマイズするために、HTMLコードスニペットを追加する方法を説明します。

開始するには、WPFormsをインストールしてアクティブ化してください。

完了したら、フォームの作成とカスタムHTMLの追加を開始できます。このガイドでは、お問い合わせフォームに簡単なツールチップを追加する方法を示します。

開始するには、WPForms » Add Newに移動して、お問い合わせフォームを作成しましょう。

セットアップパネルで、まずフォームに名前を付けます。

この名前は内部参照用ですので、好きな名前を使用できます。

次のステップは、フォームの作成方法を決定することです。WPFormsでは、事前に作成されたテンプレートから開始したり、ゼロから作成したり、必要なものを説明してAIフォームビルダーに組み立てさせたりできます。

AI搭載ビルダーを使用したい場合は、簡単なプロンプトを入力してください。AIが数秒でフォームを作成します。

このチュートリアルでは、事前に作成されたテンプレートを使用します。

2,100以上のフォームテンプレートから選択できるため、検索バーを使用してすばやく絞り込むことができます。これを行うには、「お問い合わせフォーム」と入力して検索が完了するのを待ちます。

テンプレートを詳しく見るには、組み込みのプレビュー機能を使用できます。フォームテンプレートにカーソルを合わせ、「デモを見る」をクリックするだけです。

あなたのニーズに合った完璧な連絡フォームを見つけたら、もう一度それにカーソルを合わせ、「テンプレートを使用」をクリックします。

これにより、フォームビルダーが起動します。左側のパネルにすべてのカスタマイズツールが表示され、右側にライブプレビューが表示されます。

左側のパネルから要素をドラッグしてライブプレビューにドロップできます。ドラッグアンドドロップを使用して、プレビュー内の要素を並べ替えることもできます。

左側のパネルを下にスクロールして「Fancy Fields」グループに移動し、HTMLフィールドをフォームに直接ドラッグアンドドロップします。

HTMLフィールドを追加したら、それをクリックしてカスタマイズオプションを開きます。

まず、「ラベル」を入力して、このフィールドを識別できるようにします。これは参照用であり、訪問者には表示されないため、好きな名前を使用できます。フィールドを空のままにすることもできます。

次に、カスタムHTMLコードを「コード」フィールドに挿入します。

ツールチップを作成するには、<span> タグを使用するか、次のコードをコピーして「コード」フィールドに貼り付けます。

<span title="We have cool stuff to share every week. :)">Hi there! We have an email newsletter you might want to subscribe to. Let us know in the Comment or Message field, and we'll sign you up.</span>

これはサンプルコードですので、必要に応じて自由に編集してください。コードのtitle=""部分は、Webブラウザにホバーポップアップ効果を作成するように指示するものであり、サイトにCSSを追加せずにツールチップを取得できます。

WPFormsはフォームビルダープレビューでHTMLコードを表示しないことに注意してください。ツールチップをテストするには、「プレビュー」をクリックします。

これにより、新しいタブが開きます。

ここでは、ツールチップ用のHTMLコードスニペットが正しく機能するかどうかを、テキストにカーソルを合わせてテストできます。しばらくすると、ツールチップが表示されるはずです。

結果に満足したら、フォームビルダーに戻ってフォームを完成させることができます。

WPForms は、通知と確認の設定を自動的に構成します。ただし、カスタマイズしたい場合は、「設定」を選択し、「通知」または「確認」のいずれかを選択してください。

「通知」セクションでは、お問い合わせフォームの送信に対して複数の受信者を追加できます。

複数の受信者を追加するには、メールアドレスをカンマで区切ります。例: email1@example.com, email2@example.com, email3@example.com。

通知やその他の設定をカスタマイズしたら、WordPress フォームを公開して埋め込む時間です。

フォームビルダーの右上隅にある「埋め込み」ボタンをクリックしてください。

次に、WPForms がフォームを既存のページに追加するか、新しいページに追加するかを尋ねます。

このガイドでは、「既存のページを選択」を選択します。

次のポップアップウィンドウで、利用可能なページのリストからページを選択します。その後、「開始！」をクリックしてブロックエディターを開くことができます。

次に、フォームを追加したい領域にカーソルを合わせ、「+」ボタンをクリックします。次に、WPForms ブロックを選択してください。

ドロップダウンメニューを使用して、表示したいフォームを選択できるようになりました。

フォームを選択すると、WPForms がブロックエディターに読み込みます。

すべてがセットアップされたら、「更新」ボタンをクリックします。

そして完了です！WPFormsの連絡先フォームにカスタムHTMLを追加し、WordPressウェブサイトで公開しました。

実際の訪問者をフォームに送信する前に、簡単なテストエントリを送信してすべてが機能することを確認することをお勧めします。

テストを送信したら、WPForms » すべてのフォーム に移動します。ここで、連絡先フォームにカーソルを合わせ、表示されたら「エントリ」をクリックします。

次の画面で、すべてのフォーム送信が表示されます。

テーブルには、ユーザーが送信したすべての情報と、正確な送信時間が表示されます。

よくある質問：WordPressにHTMLフォームを追加する方法

WordPress で HTML フォームが機能しないのはなぜですか？

おそらく、WordPress はフォームを表示していますが、処理していません。HTML フォームをページに貼り付けるだけでは、機能しません。

フォームは正しく表示されるかもしれませんが、WordPressはフォームの送信を自動的に処理しません。基本的なHTMLサイトとは異なり、誰かが送信をクリックしたときにデータを処理するための組み込みスクリプトがありません。

フォームを機能させるには、送信を処理するためのカスタムPHPコードを追加するか、これを処理するプラグインを使用する必要があります。

HTMLを使用してもフォームをカスタマイズできますか？

はい、もちろんです。HTML を使用すると、フォームの外観と機能を完全に制御できます。ただし、次のような他のすべてについても責任を負う必要があることに注意してください。

• 独自のCSSでフォームをスタイリングする
• カスタムコードで検証、エラーメッセージ、または条件付きロジックを追加する
• フォームが異なるデバイスやブラウザで正しく動作することを確認する

ですから、はい、あなたは完全な柔軟性を持っていますが、完全な責任も負います。

追加リソース：WordPressフォームに関するその他のガイド

この記事で、WordPressにHTMLフォームを追加する方法を学べたことを願っています。次に、以下のガイドを確認することをお勧めします。

• WordPress フォームの入力情報を CSV および Excel にエクスポートする方法
• WordPressフォームのカスタマイズとスタイリング方法
• 最高のWordPressお問い合わせフォームプラグイン

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。