HTMLフォームはすぐに使える状態になっていますが、WordPressに追加しようとすると試行錯誤になってしまいます。
その理由は簡単です。WordPressは通常のHTMLウェブサイトとは異なる方法でフォームを処理します。フォームコードをコピー＆ペーストしただけでは、追加の手順なしでは正しく機能しないことがよくあります。
私たちは自身のサイトでWPFormsプラグインを使用しています。なぜなら、すべてのセットアップを私たちに代わって行ってくれるからです。とはいえ、多くのユーザーは、軽量に保つため、コードの完全な制御を維持するため、または別のプラグインを追加するのを避けるために、カスタムHTMLフォームの使用を好むことを私たちは知っています。
このガイドでは、WordPressにHTMLフォームを追加する簡単な2つの方法を紹介します。これにより、フォームが正しく表示され、期待どおりに機能し、サイトを壊すこともありません。💡
HTMLフォームとは何か、そしてなぜ作成するのか？
HTMLフォームは、他のサイトのフォームと同様に機能します。訪問者が名前、メールアドレス、フィードバック、注文などを入力して送信できるようにします。
それらの違いは、HTMLフォームは、フォームプラグインのようなドラッグ＆ドロップのビジュアルエディターではなく、コードを使用して作成されることです。これは、テキストボックス、チェックボックス、ラジオボタン、ドロップダウンメニューなどのフィールドを自分で定義する必要があることを意味します。
HTMLを使用してフォームをゼロから作成する利点をいくつかご紹介します。
- 最適化されたパフォーマンス。 HTMLフォームは、コードが軽量であるため、ロードが速く、メモリの使用量が少なくなります。
- 制御。 フォームビルダーの機能に制限されないため、フォームのデザインと機能性を完全に制御できます。
- カスタマイズ。HTMLフォームはニーズに合わせて正確に調整でき、より柔軟なフォームカスタマイズを提供します。
HTMLフォームを一から作成することは、コーディングを学び実践するのに最適な方法ですが、独自の課題もあります。
フォームが異なるウェブブラウザで異なる動作をするクロスブラウザ互換性に問題がある可能性があります。
また、私たちの経験に基づくと、JavaScriptを使用したフォーム検証の処理はトリッキーになる可能性があります。ユーザーの入力をすべて正しく収集および処理できるようにするには、徹底的なテストが必要です。
とはいえ、これらの複雑さなしに HTML フォームを追加する方法はあります。したがって、WordPress ブログ、ビジネスサイト、または オンラインストア を管理している場合でも、コードをゼロから書く必要なく、サイトに HTML フォームを簡単に追加できます。
次のセクションでは、WordPressにHTMLフォームを追加する方法を説明します。このガイドでカバーする2つの方法の概要を以下に示します。
準備はいいですか？始めましょう。
方法1：HTMLフォームプラグインを使用してWordPressにHTMLフォームを追加する（簡単）
WordPressウェブサイトにHTMLフォームを追加する簡単な方法は、HTML Formsのような無料のフォームプラグインを使用することです。これは、HTMLフォームの作成と設定をすべて1か所で行える優れたツールであり、サーバー側の設定を気にする必要がありません。
このガイドでは、基本的なHTMLフォームを作成するために必要なすべてが含まれているプラグインの無料バージョンを使用します。
開始するには、プラグインがWordPressウェブサイトにインストールされていることを確認してください。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドに従ってください。
有効化後、WordPress管理ダッシュボードのHTMLフォーム » 新規追加に移動して、お問い合わせフォームの作成を開始できます。
これにより、「新規フォームを追加」ページにリダイレクトされます。
ここから、最初に行う必要があることは、フォームの名前を「フォームタイトル」フィールドに入力してフォームに名前を付けることです。たとえば、私たちのフォームには「ニュースレターサインアップ」という名前を付けました。
次に、「作成」ボタンをクリックします。
これを行うと、「編集フォーム」ページが表示され、HTMLお問い合わせフォームのカスタマイズを開始できます。
ページの上部には、フォームのタイトル、スラッグ、ショートコードなどのフォームの詳細が表示されます。これらの詳細は、必要に応じてHTMLフォームダッシュボードで確認できるため、覚える必要はありません。
これらの詳細の下に、メニュータブがあります。「フィールド」タブでは、「テキスト」、「日付」、「チェックボックス」、「ラジオボタン」など、フォームに追加できるさまざまなフィールドボタンが表示されます。
次に、もう少し下にスクロールします。
このタブの下部には、プレビューと共に事前作成されたHTMLフォームがあります。
このお問い合わせフォームは非常にシンプルです。ユーザーが名前、メールアドレス、簡単な件名、メッセージを入力するための4つのフィールドがあります。
さて、例えばメールニュースレター登録の新しいフィールドを追加したいとします。その場合は、単に「フォームコード」の上にあるフィールドボタンのいずれかをクリックしてください。
⚠️ 注意： HTMLフォームはメールマーケティングサービスとの連携をサポートしていないことに注意してください。そのため、ユーザーのメールアドレスをメーリングリストに手動で追加する必要があります。
例えば、ドロップダウンフィールドを使用して、ニュースレター登録用の「はい/いいえ」オプションを作成します。
ここから「ドロップダウン」をクリックすると、ドロップダウンフィールドの設定オプションが開きます。フィールドのラベルや選択肢などの詳細の入力を開始できます。
詳細を入力した後、「フィールドをフォームに追加」をクリックできます。
次に、「フォームコード」セクションにドロップダウンフィールドタグが表示されます。タブを下にスクロールして確認してください。
次のステップは、お問い合わせフォームを再編成することです。
適切な流れを維持するために、ドロップダウンフィールド を「メール」フィールドのすぐ下に配置したいでしょう。
このプラグインにはドラッグ＆ドロップビルダーがないため、コードを手動で移動する必要があります。ドロップダウンフィールドのコード（開始タグから終了
タグまで）をカットしてください。
次に、そのコードスニペットを「メール」フィールドの終了タグの直後に貼り付けます。
ニュースレターサインアップフォームでは、デフォルトの「件名」フィールドは必要ない場合があります。そのため、このフィールドを削除することをお勧めします。
これは、最初の<p>タグから最後の</p>タグまでを削除することで行うことができます。
タグの移動と削除を行った後、タブを下にスクロールして「フォームプレビュー」セクションに移動します。
このセクションでは、何も壊さずにフィールドを正常に移動および削除できたかどうかを確認できます。ドロップダウンメニューが正しく機能しているかどうかも確認できます。
結果に満足したら、「フォームコード」セクションの下にある青い「変更を保存」ボタンをクリックしてください。
保存プロセスが完了すると、このページの最上部に「フォームが更新されました。」という通知が表示されます。
さて、フォームの設定を確認したいかもしれません。HTMLフォームがフォーム送信確認メッセージをどのように設定するかを確認するために、「メッセージ」タブに移動しましょう。
タブを開くには、「メッセージ」をクリックするだけです。
このタブでは、ユーザーのフォーム送信が成功した場合などに表示される、あらかじめ用意されたコピーを編集できます。
すべて問題なければ、そのままにしておくことができます。変更を加えた場合は、「変更を保存」ボタンをクリックして、進捗を失わないようにしてください。
次に、「設定」タブに移動しましょう。
デフォルトでは、HTMLフォームは、各フォーム送信を保存するために「はい」、正常に送信された後にフォームを非表示にするために「いいえ」を設定します。必要に応じてカスタマイズできます。
次に、「サインアップ成功後のURLにリダイレクト」で、WordPressウェブサイトのライブウェブページのURLをコピーして貼り付けることができます。または、フィールドに0と入力して、フォーム送信が成功した後もユーザーを同じページに留めることができます。
すべての設定が完了したら、あとはHTMLフォームをWordPressページに追加するだけです。
WordPressダッシュボードから、投稿または固定ページ » すべての投稿またはすべての固定ページに移動しましょう。
このガイドでは、HTMLフォームを「お問い合わせ」ページに追加します。
そのため、リスト内の「お問い合わせ」ページにカーソルを合わせ、表示されたら「編集」をクリックします。
これにより、「お問い合わせ」ページのブロックエディターが起動します。
エディターで、フォームを追加するエリアを選択し始めます。その後、その上にカーソルを合わせ、「+」ボタンをクリックしてHTMLフォームブロックを追加します。
次に、検索バーに「HTMLフォーム」と入力して、ブロックをすばやく見つけます。検索結果が表示されたら、それをクリックします。
次に、「HTMLフォーム」ブロックにドロップダウンが表示されます。それを展開して、表示したいフォームを選択するだけです。ここでは、作成したばかりの「ニュースレターサインアップ」フォームを選択しています。
フォームはコンテンツを公開すると表示されます。ドロップダウンメニューからフォームを選択したら、「更新」ボタンをクリックできます。
これでフォームが公開され、ユーザーはニュースレターに登録できるようになります。サイト上ではこのようになります。
フォームの送信を表示するには、まず HTMLフォーム » すべてのフォーム に移動します。これにより、すべてのHTMLフォームのリストが表示されます。
次に、フォームにカーソルを合わせると表示される「送信」ボタンをクリックします。
ここから、すべてのフォーム送信を確認できます。
「送信」テーブルには、ユーザーがフォームに入力したすべての情報が詳細に記載されています。次に、「タイムスタンプ」列があり、フォームが送信された日時がわかります。
例えば、ここでは最初の送信は「ユーザー1」によって行われました。
テーブルから、ユーザーが6月25日午後1時頃にフォームを送信したことがわかります。「ニュースレターを購読しますか？」という質問に対して、「ユーザー1」は「また後で」と回答しました。したがって、この場合、メールアドレスをメーリングリストに追加すべきではありません。
WPFormsでWordPressフォームにカスタムHTMLを追加する方法：メソッド2
別の方法として、ビジュアルなお問い合わせフォームビルダーを使用することもできます。これは、フォームをビジュアルに構築したいが、リンク、テキスト形式、またはツールチップなどの特定のHTML要素をコードを使用して挿入する必要がある場合に最適なオプションです。
例えば、カスタムHTMLを使用して、チェックアウトフォームに簡単な警告メッセージを表示し、「返金・返品ポリシー」ページへのリンクを含めることができます。または、ユーザーにフォームの完了までの進捗状況を知らせるためにプログレスバーを追加することもできます。カスタムHTMLを使用すると、絵文字を挿入したり、ツールチップを追加したりすることも可能です。
この方法では、WordPressフォームをカスタマイズするためにHTMLコードスニペットを追加する方法を、WordPress向けのWPFormsを使用して紹介します。WPFormsは、WordPress向けの最高のフォームビルダーです。
WPBeginnerサイトでは、お問い合わせフォーム、年次アンケート、サイト移行リクエストにこれを利用しています。このプラグインの詳細については、WPFormsの詳細レビューをご覧ください。
WPFormsには、包括的なワンクリックアドオンとサードパーティ連携機能が付属しています。例えば、フォーム放棄アドオンをインストールして、フォーム放棄の問題を追跡・削減したり、その他多くのことができます！
そのため、WPFormsを使用すると、WordPressフォームをゼロからハードコーディングするよりも簡単にフォームの機能を拡張できます。
💡 注: WPForms Lite は完全に無料ですが、HTML フィールドを使用するにはプレミアムバージョンが必要です。アップグレードすると、2,000 以上のフォームテンプレート、条件付きロジック機能、および専用サポートにアクセスできるようになります。WPBeginner の読者の方は、WPForms クーポンを使用して 50% オフで購入できます。
開始する前に、WPFormsがWordPressウェブサイトにインストールされ、有効化されていることを確認してください。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。
有効化後、WPForms » 設定 に移動してライセンスコードを入力できます。キーを入力したら、「キーを検証」ボタンをクリックして検証を開始してください。
完了したら、フォームの作成とカスタムHTMLの追加を開始できます。このガイドでは、簡単なツールチップを連絡フォームに追加する方法を説明します。
ツールチップは、ウェブ要素にマウスカーソルを合わせたときに表示される小さなポップアップボックスのようなものです。クリックしたり、現在表示しているページを離れたりすることなく、ユーザーが特定のウェブ要素についてさらに詳しく知ることができるため便利です。
しかし、まず、お問い合わせフォームを作成しましょう。WordPress管理エリアからWPForms »新規追加に移動するだけで開始できます。
これで「設定」パネルが開きます。まず、フォームに名前を付ける必要があります。この名前は内部参照用ですので、好きな名前を自由に使用できます。
次のステップは、フォームをどのように構築したいかを選択することです。
WPForms を使用すると、AIフォームビルダー、既製のテンプレート、またはゼロからフォームを作成できます。
AI搭載ビルダーを使用したい場合は、簡単なプロンプトを入力するだけです。AIが数秒でフォームを作成します。
ただし、このチュートリアルでは、事前に作成されたテンプレートを使用します。
2,000 以上のフォームテンプレートから選択できるため、検索バーを使用してすばやく絞り込むことができます。これを行うには、「お問い合わせフォーム」と入力して、検索が完了するのを待ちます。
各検索結果を詳しく見て、フォームがどのようなものかを確認したい場合は、プレビュー機能をご利用ください。フォームテンプレートにカーソルを合わせ、「デモを表示」をクリックするだけです。
あなたのニーズに合った完璧な連絡フォームを見つけたら、もう一度それにカーソルを合わせ、「テンプレートを使用」をクリックします。
これでフォームビルダーが起動します。
現在、すべてのカスタマイズツールは左側のパネルにあり、フォームのライブプレビューは画面の右側にあります。
このページでは、ドラッグアンドドロップ機能を使用して、左側のパネルからライブプレビューに要素を追加できます。また、ライブプレビューでフィールドを移動するためにもこの機能を使用できます。
HTMLフィールドをフォームに追加してみましょう。左側のパネルを下にスクロールして、「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>
これはサンプルコードですので、必要に応じてテキストを自由に編集してください。
🧑💻 重要：直接メールリストにユーザーを追加したい場合は、フォームをメールマーケティングプロバイダーと統合する必要があります。これを行うには、WordPressでコンタクトフォームを使ってメールリストを増やす方法に関するガイドを参照してください。
WPFormsでは、フォームビルダーのプレビューでHTMLコードは表示されないことに注意してください。フィールドをプレビューしてすべてが正しいことを確認するには、まず変更を保存して「プレビュー」をクリックできます。
これで新しいタブが開きます。
それでは、ツールチップ用のHTMLコードスニペットが正しく機能するかどうかをテストしましょう。テキストにカーソルを合わせ、数秒間待ってツールチップが表示されるのを待ちます。
結果に満足したら、フォームビルダーに戻ってフォームを最終決定できます。
フォームの通知と確認の設定はWPFormsで既に設定されています。ただし、カスタマイズしたい場合は、「設定」の「通知」または「確認」に移動してください。
「通知」セクションでは、お問い合わせフォームの複数の受信者を追加できます。
「メールアドレスに送信」フィールドの横にある疑問符ボタンにカーソルを合わせると、簡単な説明が表示されます。通知が正しいメールアドレスに送信されるように、それに従ってください。
メール件名の事前作成されたコピーを編集することもできます。
例えば、私たちは「新しいエントリ：お問い合わせフォーム」を「メールが届きました：新しいお問い合わせ」に変更しました。
通知をカスタマイズしたら、「確認」パネルに移動します。
デフォルトでは、WPFormsは確認タイプを「メッセージ」に設定し、事前に作成されたコピーを用意しています。必要に応じてこれらの設定を変更することも definitely できます。
確認メッセージを表示する以外に、ユーザーを新しいページまたは特定のURLにリダイレクトすることもできます。
すべての設定が完了したら、公開してWordPressフォームを埋め込む時間です。
「埋め込み」ボタンをクリックして公開を開始してください。WPFormsは、既存のページに追加するか、新しいページに追加するかを尋ねます。このガイドでは、「既存のページを選択」を選択します。
次のポップアップウィンドウで、利用可能なページのリストからページを選択します。その後、「Let’s go!」をクリックすると、ページのブロックエディターに移動できます。
次に、フォームを配置したい領域にカーソルを合わせ、「+」ボタンをクリックします。WPFormsブロックを選択してください。
次に、WPFormsブロックのドロップダウンからフォームを選択できます。
フォームを選択すると、WPFormsはそれを選択したコンテンツ領域に読み込みます。フォームのタイトルを表示したい場合は、右側のパネルの「ブロック」タブに移動し、「タイトルを表示」スライダーをオンにします。
すべてに満足したら、「更新」ボタンをクリックしてください。
そして完了です！WPFormsの連絡先フォームにカスタムHTMLを追加し、WordPressウェブサイトで公開しました。
これで、ユーザーはフォームの入力を開始し、おそらくあなたのメールニュースレターに登録できるようになります。
すべてのWPFormsのフォーム送信を表示するには、WPForms » すべてのフォームに移動してください。
次に、「コンタクトフォーム」またはリスト内の任意のフォームにカーソルを合わせ、「エントリー」ボタンが表示されたらクリックします。
次の画面で、すべてのフォーム送信を確認できるはずです。
テーブルには、ユーザーがフォームとともに送信したすべての情報と、送信時間が記載されています。
例えば、7月2日の午前8時頃に、「ユーザー3」がメールニュースレターを購読したいと述べ、カスタマーサポートチームへの連絡方法について質問を残しました。
「アクション」列も確認できます。この列には、「表示」、「編集」、「スパム」、「ゴミ箱」といったいくつかのボタンがあります。
「表示」をクリックすると、WPFormsはエントリ専用の概要ページに移動します。このページで、プラグインは2つのアドオンを有効にするように促します。
1つ目は、ユーザーがフォームを送信した場所を追跡するためのジオロケーションアドオンです。2つ目は、ユーザーが「送信」ボタンをクリックするまでのサイト内でのユーザーの経路を分析するのに役立つユーザー体験アドオンです。
より最適化されたフォームパフォーマンスのために、これらのアドオンのインストールと有効化をお勧めします。
「スパム」および「ゴミ箱」ボタンは、不正な送信をマークし、エントリーから削除するのに便利です。不正なフォーム送信を減らす方法について詳しくは、スパムをブロックする方法に関するガイドをご覧ください。
ボーナスのヒント: カスタムHTMLページをWordPressにアップロードする
WordPress サイトにカスタム HTML ページをアップロードする方法も探しているかもしれません。これは、使用したい静的テンプレートがある場合や、古いウェブサイトの HTML ページがある場合に便利です。
原則として、個別のCSSまたは画像ファイルなしの単一のHTMLページを直接アップロードできます。
ただし、アップロードしたいページに個別のCSSファイルや画像が含まれている場合は、HTMLファイルで使用されているのと同じディレクトリ構造を維持して、それらをフォルダにアップロードする必要があります。
AIOSEOは、WordPressの最高のSEOプラグインであり、カスタムHTMLページをXMLサイトマップに追加することで、検索エンジンがそれを見つけられるように支援します。
詳細については、404エラーなしでWordPressにHTMLページをアップロードする方法に関する初心者向けガイドをご覧ください。
よくある質問：WordPressにHTMLフォームを追加する方法
WordPressにHTMLフォームを簡単に追加する方法について、よくある質問にお答えしました。
WordPress で HTML フォームが機能しないのはなぜですか？
これはよくある問題です。WordPressでは、HTMLフォームを単純に貼り付けるだけでは、通常は機能させるのに十分ではありません。
フォームは正しく表示されるかもしれませんが、WordPressはフォームの送信を自動的に処理しません。基本的なHTMLサイトとは異なり、誰かが送信をクリックしたときにデータを処理するための組み込みスクリプトがありません。
フォームを機能させるには、送信を処理するためのカスタムPHPコードを追加するか、これを処理するプラグインを使用する必要があります。
フォーム送信が確実に送信されるようにするにはどうすればよいですか？
最も簡単な方法は、WPFormsやFormidable Formsのようなお問い合わせフォームプラグインを使用することです。これらのプラグインは、エントリーの保存、メール通知の送信、スパムのブロックなど、すべてをバックグラウンドで処理するため、自分で設定する必要はありません。
HTMLを使用してもフォームをカスタマイズできますか？
はい、もちろんです。HTMLを使用すると、フォームの外観と動作を完全に制御できます。ただし、次のような他のすべてについても責任を負う必要があることに注意してください。
ですから、はい、あなたは完全な柔軟性を持っていますが、完全な責任も負います。
追加リソース：WordPressフォームに関するその他のガイド
この記事で、WordPressにHTMLフォームを追加する方法を学べたことを願っています。次に、以下のガイドを確認することをお勧めします。
- WordPressでRSVPフォームを作成する方法
- WordPressでオンライン予約フォームを作成する方法
- 日付ピッカー付き WordPress フォームの作成方法
- WordPressで多言語フォームを作成する方法
- WordPressで会話型フォームを作成する方法
- WordPressフォームのスタイル設定とカスタマイズ方法
- WordPress フォームの入力情報を CSV および Excel にエクスポートする方法
- WordPress フォーム使用の究極ガイド
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
イジー・ヴァネック
WP Forms を使用しているので、このプラグインを使った2番目の方法が好きです。AI が提供したフォーム用の HTML コードがいくつかありますが、それをウェブサイトに追加するかどうか迷っていました。当初は、サイトにフォームを挿入する主なツールとして Elementor の使用を検討していましたが、WP Forms が同じ機能を優れて処理しているのを見て、問題は解決しました。不必要に Elementor をインストールする必要なく WP Forms を使用でき、手間が省けるだけでなく、FTP のスペースも節約でき、ウェブサイトのパフォーマンスも向上します。
モイヌディン・ワヒード
wpforms経由でhtmlフォームを使用することは、wpformsダッシュボードに完全に慣れているため、論理的な選択だと思います。
コードを挿入し、wpformsの助けを借りて使用するのが非常に簡単になります。
以前は、htmlフォームコードを追加してWordPressのウェブサイトで実際に使用することは、非常に困難な作業でした。
イジー・ヴァネック
はい、このガイドを読んだので、今は簡単に見えることに同意せざるを得ません。しかし、それ以前はElementorを使ってフォームを追加しようとしましたが、うまくいきませんでした。一部は正しく機能し、一部は機能しませんでした。Elementorを仲介役として使用したのは、私にとって良い選択ではありませんでした。個人的には、WP Formsが同じ目的で使用できるとは思っていませんでした。なぜなら、それはフォームを作成するだけの完成されたソリューションであり、事前に作成されたHTMLフォームを追加することはできないと思っていたからです。しかし、知らないことには常に驚かされます。そうでなければ、私は完全に同意します。以前は本当に難しい作業でしたが、WP Formsを試した後、簡単な操作に軽減されました。このプラグインが大好きです。