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

WordPressサイトにHTMLフォームを追加したのに、見た目は良いのに実際には機能しないということはありませんか？あなただけではありません。

多くのサイト所有者が、フォームが送信されない、または正しく接続されない理由を疑問に思い、このフラストレーションに直面します。

その理由は単純です。WordPressは、標準的なHTMLウェブサイトと同じ方法でフォームを扱わないためです。生のHTMLフォームをコピー＆ペーストしても、追加の手順なしでは通常機能しません。

私たちのサイトでは、WPFormsプラグインを使用しています。これは、バックエンドのセットアップをすべて処理してくれるからです。それでも、多くのユーザーは、軽量に保ち、コードを完全に制御し、プラグインへの依存を減らすために、カスタムHTMLフォームでの作業を好むことを私たちは知っています。

このガイドでは、WordPressにHTMLフォームを追加し、実際に機能させるための実証済みの2つの方法を紹介します。初心者の方でも、コードに慣れている方でも、試行錯誤なしで機能するフォームを作成できます。💡

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

HTMLフォームは、他のウェブサイトフォームとほぼ同じように機能します。訪問者が名前、メールアドレス、フィードバック、注文などの情報を入力して送信できるようにします。

これらが異なる点は、HTMLフォームは、フォームプラグインのようなドラッグ＆ドロップのビジュアルエディターではなく、HTMLコードを使用して作成されることです。そのため、テキストボックス、チェックボックス、ラジオボタン、ドロップダウンメニューなどのフィールドを自分で定義する必要があります。見た目や動作の特定のルールを設定するのはあなた次第です。

HTMLを使用してフォームをゼロから作成する利点をいくつかご紹介します。

• 最適化されたパフォーマンス。 HTMLフォームは、コードが軽量であるため、ロードが速く、メモリの使用量が少なくなります。
• 制御。 フォームビルダーの機能に制限されないため、フォームのデザインと機能性を完全に制御できます。
• カスタマイズ。HTMLフォームはニーズに合わせて正確に調整でき、より柔軟なフォームカスタマイズを提供します。

HTMLフォームを一から作成することは、コーディングを学び実践するのに最適な方法ですが、独自の課題もあります。

フォームが異なるウェブブラウザで異なる動作をするクロスブラウザ互換性に問題がある可能性があります。

また、私たちの経験に基づくと、JavaScriptを使用したフォーム検証の処理はトリッキーになる可能性があります。ユーザーの入力をすべて正しく収集および処理できるようにするには、徹底的なテストが必要です。

とはいえ、これらの複雑さなしに HTML フォームを追加する方法はあります。したがって、WordPress ブログ、ビジネスサイト、または オンラインストア を管理している場合でも、コードをゼロから書く必要なく、サイトに HTML フォームを簡単に追加できます。

次のセクションでは、WordPressにHTMLフォームを追加する方法を説明します。このガイドでカバーする2つの方法の概要を以下に示します。

• 方法1：HTMLフォームプラグインを使用してWordPressにHTMLフォームを追加する（簡単）
• WPFormsでWordPressフォームにカスタムHTMLを追加する方法：メソッド2
• ボーナスのヒント: カスタムHTMLページをWordPressにアップロードする
• よくある質問：WordPressにHTMLフォームを追加する方法
• 追加リソース：WordPressフォームに関するその他のガイド

準備はいいですか？始めましょう。

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

WordPressウェブサイトにHTMLフォームを追加する簡単な方法は、HTML Formsのような無料のフォームプラグインを使用することです。これは、HTMLフォームの作成と設定をすべて1か所で行える優れたツールであり、サーバー側の設定を気にする必要がありません。

このガイドでは、HTMLフォームを作成するために必要なすべてが含まれている、プラグインの無料バージョンを使用します。

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

有効化後、WordPress管理ダッシュボードのHTMLフォーム » 新規追加に移動して、お問い合わせフォームの作成を開始できます。

これにより、「新規フォームを追加」ページにリダイレクトされます。

ここから最初に行う必要があるのは、フォームのタイトルフィールドに名前を入力してフォームに名前を付けることです。たとえば、フォームに「ニュースレターサインアップ」という名前を付けました。

次に、「作成」ボタンをクリックします。

これを行うと、「編集フォーム」ページが表示され、HTMLお問い合わせフォームのカスタマイズを開始できます。

タブの上部には、フォームのタイトル、スラッグ、およびショートコードを含むフォームの詳細が表示されます。これらの詳細は、必要に応じて HTML Forms ダッシュボードで確認できるため、暗記する必要はありません。

これらの詳細の下に、メニュータブがあります。「フィールド」タブでは、「テキスト」、「日付」、「チェックボックス」、「ラジオボタン」など、フォームに追加できるさまざまなフィールドボタンが表示されます。

もう少し下にスクロールしましょう。

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

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

さて、例えば メールニュースレター の購読サインアップを追加したいとします。その場合は、[Form Code] の上のいずれかのフィールドボタンをクリックしてください。

例えば、ドロップダウンフィールドを使用して「はい/いいえ」のオプションを作成します。

ここから「ドロップダウン」をクリックすると、ドロップダウンフィールドの設定オプションが開きます。フィールドのラベルや選択肢などの詳細の入力を開始できます。

詳細を入力した後、「フィールドをフォームに追加」をクリックできます。

次に、「フォームコード」セクションにドロップダウンフィールドタグが表示されます。タブを下にスクロールして確認してください。

次のステップは、お問い合わせフォームを再編成することです。

適切な流れを維持するために、ドロップダウンフィールド を「メール」フィールドのすぐ下に配置したいでしょう。

移動するには、最初のタグの <p> から最後の </> までドロップダウンフィールドタグをカットします。次に、それを「Email」タグのすぐ下に貼り付けます。

ニュースレターサインアップフォームでは、デフォルトの「件名」フィールドは必要ない場合があります。そのため、このフィールドを削除することをお勧めします。

これは、最初の<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を使用して、チェックアウトフォームに簡単な警告メッセージを表示し、「返金・返品ポリシー」ページへのリンクを含めることができます。または、ユーザーにフォームの完了までの進捗状況を知らせるためにプログレスバーを追加することもできます。カスタムHTMLを使用すると、絵文字を挿入したり、ツールチップを追加したりすることも可能です。

この方法では、WordPressフォームをカスタマイズするためにHTMLコードスニペットを追加する方法を、WordPress向けのWPFormsを使用して紹介します。WPFormsは、WordPress向けの最高のフォームビルダーです。

WPBeginnerサイトでは、お問い合わせフォーム、年次アンケート、サイト移行リクエストにこれを利用しています。このプラグインの詳細については、WPFormsの詳細レビューをご覧ください。

WPFormsには、包括的なワンクリックアドオンとサードパーティ連携機能が付属しています。例えば、フォーム放棄アドオンをインストールして、フォーム放棄の問題を追跡・削減したり、その他多くのことができます！

そのため、WPformsを使用すると、WordPressフォームをゼロからハードコーディングするよりも簡単にフォームの機能を拡張できます。

開始する前に、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>

これはあくまでサンプルコードですので、必要に応じて自由に編集してください。

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ファイルや画像が含まれている場合は、それらをディレクトリ構造内に配置する必要があります。

AIOSEO は、WordPress向けの最高のSEOプラグインであり、これに役立ちます。

詳細については、404エラーなしでWordPressにHTMLページをアップロードする方法に関する初心者向けガイドをご覧ください。

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

WordPressにHTMLフォームを簡単に追加する方法について、よくある質問にお答えしました。

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

これはよくある問題です。WordPressは、サーバーサイドスクリプトと連携した場合に、通常のHTMLサイトが処理するような方法でフォーム送信を自動的に処理しません。そのため、基本的なHTMLフォームを貼り付けただけでは、見た目は問題なくても、誰かが「送信」をクリックしても実際には何も起こりません。

それは、WordPressにはフォームデータを処理するための組み込み機能が含まれていないためです。標準的なHTMLサイトでは、開発者は通常、入力を処理するためにform-handler.phpのようなスクリプトにフォームを接続します。WordPressでは、フォームを機能させるために独自のカスタムPHPコードを追加するか、プラグインを使用する必要があります。

要するに、フォームの表示は簡単ですが、機能させるには少し追加の設定が必要です。

フォーム送信が確実に送信されるようにするにはどうすればよいですか？

最も簡単な方法は、WPFormsやFormidable Formsのようなお問い合わせフォームプラグインを使用することです。これにより、送信の処理、通知の送信、スパムのブロックなど、バックグラウンドで行われるすべての作業が処理されるため、すべてを手動で設定する必要がなくなります。

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

もちろんです！コードの操作に慣れている場合は、生のHTMLを使用することで、フォームの構造を完全に制御できます。ただし、次の点に注意してください。

• レイアウト、色、間隔などのスタイルを設定するには、独自のCSSを記述する必要があります。
• フォームの検証、エラーメッセージ、または条件付きロジックには、カスタムJavaScriptまたはサーバーサイドコードが必要です。
• また、フォームが異なるブラウザやデバイスで機能することを確認する責任もあります。

はい、あなたは完全な自由を持っていますが、完全な責任も負います。

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

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

• WordPressでRSVPフォームを作成する方法
• WordPressでオンライン予約フォームを作成する方法
• 日付ピッカー付き WordPress フォームの作成方法
• WordPressで多言語フォームを作成する方法
• WordPressで会話型フォームを作成する方法
• WordPressフォームのスタイル設定とカスタマイズ方法
• WordPress フォームの入力情報を CSV および Excel にエクスポートする方法
• WordPress フォーム使用の究極ガイド

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。