HTMLフォームはすぐに使える状態で用意されていますが、WordPressに追加するのは難しい場合があり、多くのテストが必要です。
理由は簡単です。WordPressにHTMLフォームを追加するには、正しく機能し、サイトにシームレスに統合されるようにするための適切なアプローチが必要です。
WordPressは、通常のHTMLウェブサイトとは異なる方法でフォームを処理します。フォームコードをコピー&ペーストするだけでは、追加の手順なしでは正しく機能しないことがよくあります。
私たちは自身のサイトでWPFormsプラグインを使用しています。なぜなら、すべてのセットアップを私たちに代わって行ってくれるからです。とはいえ、多くのユーザーは、軽量に保つため、コードの完全な制御を維持するため、または別のプラグインを追加するのを避けるために、カスタムHTMLフォームの使用を好むことを私たちは知っています。
このガイドでは、WordPressにHTMLフォームを追加する簡単な2つの方法を紹介します。これにより、フォームが正しく表示され、期待どおりに機能し、サイトが壊れるのを防ぎます。💡

HTMLフォームとは何か、そしてなぜ作成するのか?
HTMLフォームは、他のサイトフォームと同様に機能します。訪問者が名前、メールアドレス、フィードバック、注文などの情報を入力して送信できます。
それらの違いは、HTMLフォームは、フォームプラグインのようなドラッグアンドドロップのビジュアルエディターではなく、コードを使用して作成されることです。これは、テキストボックス、チェックボックス、ラジオボタン、ドロップダウンフィールドなどのフィールドを自分で定義する必要があることを意味します。
HTMLを使用してフォームをゼロから作成する利点をいくつかご紹介します。
- 最適化されたパフォーマンス。コードが軽量であるため、HTMLフォームはより速くロードされ、メモリの使用量が少なくなります。
- 制御。フォームビルダーの機能に制限されないため、フォームのデザインと機能性を完全に制御できます。
- カスタマイズ。HTMLフォームはニーズに合わせて正確に調整でき、より柔軟なフォームカスタマイズを提供します。
ゼロからHTMLフォームを作成することは、コーディングを学び実践するための優れた方法ですが、それには独自の課題があります。
フォームが異なるウェブブラウザで異なる動作をするクロスブラウザ互換性に問題がある可能性があります。
また、私たちの経験に基づくと、JavaScriptでフォーム検証を処理するのは難しい場合があります。ユーザーのすべての入力を正しく収集および処理できるようにするには、徹底的なテストが必要です。
要約すると、HTMLフォームを手動でコーディングする際の主な利点と課題は次のとおりです。
| ✅ 利点 | 🛑 課題 |
|---|---|
| 軽量なコードによるページ読み込み時間の短縮 | 異なるブラウザ間での互換性の確保 |
| デザインと機能性の完全な制御 | フォーム検証とエラー処理の構築 |
| 特定の要件に対する正確なカスタマイズ | スパム保護の手動設定 |
| パフォーマンス最適化のためのより良い機会 | サーバー側の設定と処理の処理 |
ほとんどのWordPressユーザーは、プラグインが最良の妥協点を提供すると考えています。これにより、手動のサーバー設定の複雑さなしにHTMLカスタマイズオプションが得られます。
とはいえ、これらの複雑さなしにHTMLフォームを追加する方法はあります。したがって、WordPressブログ、ビジネスサイト、またはオンラインストアを管理している場合でも、コードをゼロから書く必要なしに、サイトにHTMLフォームを簡単に追加できます。
次のセクションでは、WordPressにHTMLフォームを追加する方法を説明します。このガイドでカバーする2つの方法の概要を以下に示します。
- 方法1:HTMLフォームプラグインを使用してWordPressにHTMLフォームを追加する(簡単)
- WPFormsでWordPressフォームにカスタムHTMLを追加する方法:メソッド2
- ボーナスのヒント: カスタムHTMLページをWordPressにアップロードする
- よくある質問:WordPressにHTMLフォームを追加する方法
- 追加リソース:WordPressフォームに関するその他のガイド
準備はいいですか?始めましょう。
方法1:HTMLフォームプラグインを使用してWordPressにHTMLフォームを追加する(簡単)
🎖️ 最適: 軽量でパフォーマンス重視のソリューションで完全なHTML制御を求める開発者およびサイト管理者。このプラグインは、ビジュアルビルダーよりもシンプルさとスピードを重視しています。
WordPressはデフォルトで生のHTMLフォーム送信を処理しないため、WordPressウェブサイトにHTMLフォームを追加する簡単な方法は、HTML Formsのような無料のフォームプラグインを使用することです。これにより、HTMLは自分で記述したままで、データを収集してメールで送信するために必要なバックエンドコードが提供されます。
10,000以上の有効インストール数とWordPress.orgで5つ星中4.9の評価を持つこのプラグインは、HTMLフォームをすべて1か所で作成および設定するための信頼できるツールであり、サーバー側の設定に対処する必要はありません。

💡 注: 無料のHTML Formsプラグインはメール通知と基本的な機能を提供しますが、WPFormsのようなプレミアムプラグインと比較して、メールマーケティング統合は限定的です。
直接のMailchimp統合、Google reCAPTCHA v3サポート、サードパーティサービスへの接続用のWebフック、送信制限、フォームにアクセスする前にユーザーにログインを要求する機能、またはその他の高度な機能が必要な場合は、プレミアムバージョンでこれらの機能が追加されます。
開始するには、プラグインがWordPressウェブサイトにインストールされていることを確認しましょう。
WordPressダッシュボードの左側サイドバーからプラグイン » 新規追加に移動し、検索ボックスを使用してプラグインを検索します。

検索結果でプラグインを見つけたら、「今すぐインストール」をクリックし、次に「有効化」をクリックします。ヘルプが必要な場合は、WordPressプラグインのインストールに関するステップバイステップガイドに従ってください。
有効化後、WordPress管理ダッシュボードの左側サイドバーからHTML Forms » 新規追加に移動して、お問い合わせフォームの作成を開始できます。

これにより、「新規フォームを追加」ページにリダイレクトされます。
ここから、最初に行う必要があることは、フォームの名前を「フォームタイトル」フィールドに入力してフォームに名前を付けることです。たとえば、私たちのフォームには「ニュースレターサインアップ」という名前を付けました。
次に、「作成」ボタンをクリックします。

これを行うと、「編集フォーム」ページが表示され、HTMLお問い合わせフォームのカスタマイズを開始できます。
ページの先頭には、フォームのタイトル、スラッグ、ショートコードを含むフォームの詳細が表示されます。これらの詳細は、必要に応じてHTML Formsダッシュボードで利用できるため、記憶する必要はありません。
これらの詳細の下に、メニュータブがあります。「フィールド」タブでは、「テキスト」、「日付」、「チェックボックス」、「ラジオボタン」など、フォームに追加できるさまざまなフィールドボタンが表示されます。

次に、もう少し下にスクロールします。
このタブの下部には、プレビューと共に事前作成されたHTMLフォームがあります。
このお問い合わせフォームは非常にシンプルです。ユーザーが名前、メールアドレス、簡単な件名、メッセージを入力するための4つのフィールドがあります。

次に、メールニュースレター登録サインアップの新しいフィールドを追加したいとします。その場合は、「フォームコード」の上にあるフィールドボタンのいずれかをクリックするだけです。
💡 注: 無料のHTML Formsプラグインには、組み込みのメール通知が含まれています。これにより、送信を簡単に収集し、ユーザーがフォームとやり取りしたときに通知を受けることができます。
例えば、ドロップダウンフィールドを使用して、ニュースレター登録用の「はい/いいえ」オプションを作成します。
ここから「ドロップダウン」をクリックすると、ドロップダウンフィールドの設定オプションが開きます。フィールドのラベルや選択肢などの詳細の入力を開始できます。

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

次のステップは、お問い合わせフォームを再編成することです。
良い流れを維持するために、ドロップダウンフィールドを「メール」フィールドのすぐ下に配置したいでしょう。
🧑💻 重要:フォームコードを編集する前に、「変更を保存」をクリックして復元ポイントを作成してください。HTMLの編集を誤ると、フォームが壊れる可能性があります。
このプラグインにはドラッグアンドドロップビルダーがないため、コードを手動で移動する必要があります。<p>タグの開始から終了</p>タグまで、ドロップダウンフィールドコードをカットしてください。
次に、そのコードスニペットを「メール」フィールドの終了タグ(通常は</p>または</label>のように表示されます)の直後に貼り付けます。

ニュースレターサインアップフォームでは、デフォルトの「件名」フィールドは必要ない場合があります。そのため、このフィールドを削除することをお勧めします。
これは、開始タグ<p>と終了タグ</p>の両方を含む、件名フィールドのラベルと入力が含まれる段落ブロック全体を削除することで実行できます。

タグの移動と削除を行った後、タブを下にスクロールして「フォームプレビュー」セクションに移動します。
このセクションでは、フィールドを移動および削除しても何も壊れていないことを確認できます。以下のフォームプレビューで、件名フィールドがフォームのレイアウトを壊すことなく消えたことを確認できます。ドロップダウンが正しく機能するかどうかも確認できます。

結果に満足したら、「フォームコード」セクションの下にある青い「変更を保存」ボタンをクリックしてください。
保存プロセスが完了すると、このページの最上部に「フォームが更新されました。」という通知が表示されます。
さて、フォームの設定を確認したいかもしれません。HTMLフォームがフォーム送信確認メッセージをどのように設定するかを確認するために、「メッセージ」タブに移動しましょう。
タブを開くには、「メッセージ」をクリックするだけです。

このタブでは、ユーザーのフォーム送信が成功した場合などに表示される、あらかじめ用意されたコピーを編集できます。
すべて問題なければ、そのままにしておくことができます。変更を加えた場合は、「変更を保存」ボタンをクリックして、進捗を失わないようにしてください。
次に、「設定」タブに移動しましょう。

デフォルトでは、HTMLフォームは、各フォーム送信を保存するために「はい」、正常に送信された後にフォームを非表示にするために「いいえ」を設定します。必要に応じてカスタマイズできます。
次に、「サインアップ成功後のリダイレクト先URL」で、WordPressウェブサイトのライブウェブページのURLをコピーして貼り付けることができます。または、フィールドを空のままにするか、0を入力して、フォーム送信が成功した後にユーザーを現在のページに留めることもできます。
すべての設定が完了したら、あとはHTMLフォームをWordPressページに追加するだけです。
WordPressダッシュボードから、投稿または固定ページ » すべての投稿またはすべての固定ページに移動しましょう。

このガイドでは、HTMLフォームを「お問い合わせ」ページに追加します。
そのため、リスト内の「お問い合わせ」ページにカーソルを合わせ、表示されたら「編集」をクリックします。

これにより、「お問い合わせ」ページのブロックエディターが起動します。
エディターで、フォームを追加するエリアを選択し始めることができます。次に、ブロック間のエリアにカーソルを合わせ、プラス(+)ボタンをクリックしてHTMLフォームブロックを追加するか、左上のツールバーにあるブロックインサーターアイコンをクリックします。

次に、ブロックインサーターパネルの上部にある検索バーに「HTMLフォーム」と入力して、ブロックをすばやく見つけることができます。検索結果が表示されたら、それをクリックします。
次に、「HTMLフォーム」ブロックにドロップダウンが表示されます。それを展開して、表示したいフォームを選択するだけです。ここでは、作成したばかりの「ニュースレターサインアップ」フォームを選択しています。

フォームはコンテンツを公開すると表示されます。ドロップダウンメニューからフォームを選択したら、「更新」ボタンをクリックできます。
これでフォームが公開され、ユーザーはニュースレターに登録できるようになります。サイト上ではこのようになります。

フォームの送信を表示するには、まずHTMLフォーム » すべてのフォームに移動します。これにより、すべてのHTMLフォームのリストが表示されます。
次に、フォームにカーソルを合わせると表示される「送信」ボタンをクリックします。

🧑💻 プロのヒント: フォームを公開する前に、サンプルエントリを送信して自分でテストしてください。メール通知を受信し、送信がHTMLフォーム » すべてのフォーム » 送信に表示されることを確認してください。
ここから、すべてのフォーム送信を確認できます。
「送信」テーブルには、ユーザーがフォームに入力したすべての情報が詳細に記載されています。次に、「タイムスタンプ」列があり、フォームが送信された日時がわかります。
例えば、ここでは最初の送信は「ユーザー1」によって行われました。
テーブルから、ユーザーが6月25日午後1時頃にフォームを送信したことがわかります。「ニュースレターを購読しますか?」という質問に対して、「ユーザー1」は「また後で」と回答しました。したがって、この場合、メールアドレスをメーリングリストに追加すべきではありません。

WPFormsでWordPressフォームにカスタムHTMLを追加する方法:メソッド2
🎖️ 最適: コーディングなしで数分でプロフェッショナルなフォームを作成したい非技術ユーザー。WPFormsは、直感的なドラッグアンドドロップインターフェイスで美しいフォームをすばやく作成できるため、ユーザーから高く評価されています。
別の方法は、WPFormsのようなビジュアルコンタクトフォームビルダーを使用することです。WPFormsは、600万以上のアクティブインストールを持つトップ評価のWordPressフォームプラグインであり、14,000件以上のレビューで5つ星中4.8の評価を得ています。

💡 注: WPForms Lite は完全に無料ですが、HTMLフィールドを使用するにはプレミアムバージョンが必要です。HTMLフィールドは、Basicプラン(年間49.50ドル)から利用できます。アップグレードすると、2,100以上のフォームテンプレートにアクセスできるようになります。条件付きロジックなどの他の高度な機能については、Proプラン(年間199.50ドル)以上が必要です。
WPBeginnerの読者として、WPFormsクーポンを使用して50%割引を利用できます。
これは、フォームを視覚的に構築したいが、コードを使用してリンク、テキスト形式、またはツールチップなどの特定のHTML要素を挿入する必要がある場合に最適なオプションです。
たとえば、カスタムHTMLを使用して、チェックアウトフォームに短い警告メッセージを表示し、「返金および返品ポリシー」ページへのリンクを含めることができます。
または、ユーザーに進捗バーを表示して、フォーム完了までの進捗状況を知らせることもできます。カスタムHTMLを使用すると、絵文字を挿入したり、ツールチップを追加したりすることもできます。
この方法では、WPForms、つまりWordPress向けの最高のフォームビルダーを使用して、WordPressフォームをカスタマイズするためにHTMLコードスニペットを追加する方法を説明します。
WPFormsの詳細
WPFormsは、600万以上の有効インストール数を誇る、最も人気のあるWordPressフォームビルダーです。
ドラッグアンドドロップビルダーの他に、カスタム開発を必要とせずにフォームを拡張できるアドオンと統合の豊富なライブラリが含まれています。たとえば、次のようなことができます。
- フォーム放棄の追跡と回復(Eliteプラン)
- 会話型フォームの作成(Proプラン)
- アンケートと投票の実施(Proプラン)
- Stripe、PayPal、Square、Authorize.Netを介した支払い受け付け(Plusプラン)
- デジタル署名の収集(Proプラン)
- WordPressユーザーの自動登録(Proプラン)
無料のWPForms Liteバージョンには、コアフォームビルダーと基本的なフィールドが含まれています。このチュートリアルで使用するHTMLフィールドには、プレミアムライセンス(Basic以上)が必要です。利用可能性はプランによって異なります。HTMLフィールドはBasic(49.50ドル/年)から利用でき、ほとんどの高度なアドオンにはPro(199.50ドル/年)またはElite(299.50ドル/年)が必要です。
WPBeginnerでは、連絡フォーム、年次アンケート、サイト移行リクエストフォームにWPFormsを使用しています。これは、コーディングで手作業で作成するよりも、フォームの作成と管理がはるかに簡単になるためです。
このプラグインの詳細については、WPFormsの詳細レビューをご覧ください。
始める前に、HTMLフィールド(Basicプラン以上)を含むプレミアムライセンスを持つWPFormsアカウントをお持ちであることを確認してください。
WPFormsのウェブサイトで、「今すぐWPFormsを入手」ボタンをクリックし、HTMLフィールドを含むプラン(Basicライセンス以上、49.50ドル/年以上)を選択して、チェックアウトを完了してください。
サインアップすると、独自のWPFormsダッシュボードが表示され、WPForms zipファイルをダウンロードし、ライセンスキーをコピーできます。

これで、WPFormsをWordPressウェブサイトにインストールして有効化する準備ができました。
WordPressダッシュボードから、プラグイン » 新規追加に移動し、上部にある「プラグインのアップロード」ボタンをクリックします。

これでファイルアップローダーが表示されるはずです。
「ファイルを選択」をクリックして、ローカルコンピューターからWPForms zipファイルをアップロードしてください。その後、「今すぐインストール」をクリックしてから「有効化」をクリックします。

ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。
有効化後、WPForms » 設定に移動してライセンスコードを入力できます。キーを入力したら、「キーの検証」ボタンをクリックして検証を開始します。

完了したら、フォームの作成を開始し、カスタムHTMLを追加できます。
このガイドでは、連絡フォームに簡単なツールチップを追加する方法を説明します。
ツールチップは、Web要素にマウスカーソルを合わせたときに表示される小さなポップアップボックスのようなものです。クリックしたり、現在表示しているページを離れたりすることなく、特定のWeb要素についてユーザーがさらに詳しく知ることができるため便利です。
しかし、まず最初にお問い合わせフォームを作成しましょう。開始するには、WordPress管理画面から WPForms » 新規追加 にアクセスしてください。

これで「設定」パネルが開きます。まず、フォームに名前を付ける必要があります。この名前は内部参照用ですので、好きな名前を自由に使用できます。
次のステップは、フォームをどのように構築したいかを選択することです。
WPFormsでは、AIフォームビルダー(ベーシックプラン以上)、既製のテンプレート、またはゼロからフォームを作成できます。
AI搭載ビルダーを使用したい場合は、簡単なプロンプトを入力するだけです。AIが数秒でフォームを作成します。

ただし、このチュートリアルでは、事前に作成されたテンプレートを使用します。
2,100以上のフォームテンプレートから選択できるため、検索バーを使用してすばやく絞り込むことができます。これを行うには、「お問い合わせフォーム」と入力して検索が完了するのを待ちます。
各検索結果を詳しく見て、フォームがどのようなものかを確認したい場合は、プレビュー機能をご利用ください。フォームテンプレートにカーソルを合わせ、「デモを表示」をクリックするだけです。
あなたのニーズに合った完璧な連絡フォームを見つけたら、もう一度それにカーソルを合わせ、「テンプレートを使用」をクリックします。

これでフォームビルダーが起動します。
現在、すべてのカスタマイズツールは左側のパネルにあり、フォームのライブプレビューは画面の右側にあります。
このページでは、ドラッグアンドドロップ機能を使用して、左側のパネルからライブプレビューに要素を追加できます。また、ライブプレビューでフィールドを移動するためにもこの機能を使用できます。
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>
これはサンプルコードですので、必要に応じてテキストを自由に編集してください。コードの title="" 部分が、Webブラウザにホバーポップアップ効果を作成するように指示するものです!
🧑💻 重要: メーリングリストに直接ユーザーを追加したい場合は、フォームをEメールマーケティングプロバイダーと統合する必要があります。これを行うには、WordPressでお問い合わせフォームを使用してEメールリストを成長させる方法に関するガイドを参照してください。
Eメールマーケティング統合(Mailchimp、AWeber、Constant Contact)には、プラスプラン($99.50/年)以上が必要です。
WPFormsでは、フォームビルダーのプレビューでHTMLコードは表示されないことに注意してください。フィールドをプレビューしてすべてが正しいことを確認するには、まず変更を保存して「プレビュー」をクリックできます。

これで新しいタブが開きます。
それでは、ツールチップ用のHTMLコードスニペットが正しく機能するかどうかをテストしましょう。テキストにカーソルを合わせ、数秒間待ってツールチップが表示されるのを待ちます。

結果に満足したら、フォームビルダーに戻ってフォームを最終決定できます。
フォームの通知と確認の設定はWPFormsですでにセットアップされています。ただし、カスタマイズしたい場合は、「設定」に移動してから「通知」または「確認」を選択してください。
「通知」セクションでは、お問い合わせフォームの送信に対して複数の受信者を追加できます。
複数の受信者を追加するには、メールアドレスをカンマで区切ります: email1@example.com, email2@example.com, email3@example.com。「送信先メールアドレス」フィールドの横にある疑問符ボタンにカーソルを合わせると、追加の手順が表示されます。

メール件名の事前作成されたコピーを編集することもできます。
例えば、私たちは「新しいエントリ:お問い合わせフォーム」を「メールが届きました:新しいお問い合わせ」に変更しました。

通知をカスタマイズしたら、「確認」パネルに移動します。
デフォルトでは、WPFormsは確認タイプを「メッセージ」に設定し、事前に作成されたコピーを用意しています。必要に応じてこれらの設定を変更することも definitely できます。
確認メッセージを表示する以外に、ユーザーを新しいページまたは特定のURLにリダイレクトすることもできます。

すべてが設定されたら、WordPressフォームを公開して埋め込む時間です。
フォームビルダーの右上にあるオレンジ色の「埋め込み」ボタンをクリックして、公開を開始してください。
WPFormsは、既存のページに追加するか、新しいページに追加するかを尋ねます。このガイドでは、「既存のページを選択」を選択します。

次のポップアップウィンドウで、利用可能なページのリストからページを選択します。その後、「開始」をクリックして、ページのブロックエディターに移動できます。
ブロックとブロックの間にある領域にカーソルを合わせて「+」ボタンをクリックするか、左上のツールバーにあるブロックインサーターアイコンをクリックします。WPFormsブロックを選択してください。

次に、WPFormsブロックのドロップダウンからフォームを選択できます。
フォームを選択すると、WPFormsはそれを選択したコンテンツ領域に読み込みます。フォームのタイトルを表示したい場合は、右側のパネルの「ブロック」タブに移動し、「タイトルを表示」スライダーをオンにします。

すべてに満足したら、「更新」ボタンをクリックしてください。
そして完了です!WPFormsの連絡先フォームにカスタムHTMLを追加し、WordPressウェブサイトで公開しました。
これで、ユーザーはフォームの入力を開始し、Eメールニュースレターに登録できるようになります。

すべてのWPFormsのフォーム送信を表示するには、WPForms » すべてのフォームに移動してください。
次に、「コンタクトフォーム」またはリスト内の任意のフォームにカーソルを合わせ、「エントリー」ボタンが表示されたらクリックします。

次の画面で、すべてのフォーム送信を確認できるはずです。
テーブルには、ユーザーがフォームとともに送信したすべての情報と、送信時間が記載されています。
例えば、7月2日の午前8時頃に、「ユーザー3」がメールニュースレターを購読したいと述べ、カスタマーサポートチームへの連絡方法について質問を残しました。

「アクション」列も確認できます。この列には、「表示」、「編集」、「スパム」、「ゴミ箱」といったいくつかのボタンがあります。
「表示」をクリックすると、WPFormsはエントリ専用の概要ページに移動します。このページで、プラグインは2つのアドオンを有効にするように促します。
1つ目は、ユーザーがフォームを送信した場所を追跡するためのジオロケーションアドオンです。2つ目は、ユーザーが「送信」ボタンをクリックするまでのサイト内でのユーザーのパスを分析するのに役立つユーザー旅程アドオンです。
より最適化されたフォームパフォーマンスのために、これらのアドオンをインストールして有効にすることをお勧めします。両方のアドオンはProライセンス($199.50/年)以上で利用可能であることに注意してください。
「スパム」および「ゴミ箱」ボタンは、偽の送信をマークしてエントリーから削除するのに便利です。偽のフォーム送信を減らす方法の詳細については、連絡フォームスパムをブロックする方法に関するガイドをお読みください。
ボーナスのヒント: カスタムHTMLページをWordPressにアップロードする
WordPress サイトにカスタム HTML ページをアップロードする方法も探しているかもしれません。これは、使用したい静的テンプレートがある場合や、古いウェブサイトの HTML ページがある場合に便利です。
一般的に、File ManagerプラグインまたはFTPクライアントを使用して、個別のCSSまたは画像ファイルなしで単一のHTMLページをアップロードできます。
ただし、アップロードしたいページに個別のCSSファイルや画像が含まれている場合は、HTMLファイルで使用されているのと同じディレクトリ構造を維持して、それらをフォルダにアップロードする必要があります。
WordPressの最高のSEOプラグインであるAIOSEOは、カスタムHTMLページをXMLサイトマップに追加することで、検索エンジンがそれを見つけられるように役立ちます。

詳細については、WordPressにHTMLページを404エラーなしでアップロードする方法に関する初心者向けガイドをご覧ください。
よくある質問:WordPressにHTMLフォームを追加する方法
WordPressにHTMLフォームを簡単に追加する方法について、よくある質問にお答えしました。
WordPress で HTML フォームが機能しないのはなぜですか?
これはよくある問題です。WordPressでは、HTMLフォームを単純に貼り付けるだけでは、通常は機能させるのに十分ではありません。
フォームは正しく表示されるかもしれませんが、WordPressはフォームの送信を自動的に処理しません。基本的なHTMLサイトとは異なり、誰かが送信をクリックしたときにデータを処理するための組み込みスクリプトがありません。
フォームを機能させるには、送信を処理するためのカスタムPHPコードを追加するか、これを処理するプラグインを使用する必要があります。
フォーム送信が確実に送信されるようにするにはどうすればよいですか?
最も簡単なオプションは、WPFormsやFormidable Formsのような連絡フォームプラグインを使用することです。これらのプラグインは、エントリーの保存、メール通知の送信、スパムのブロックなど、すべてをバックグラウンドで処理するため、自分で設定する必要はありません。
HTMLを使用してもフォームをカスタマイズできますか?
はい、もちろんです。HTMLを使用すると、フォームの外観と動作を完全に制御できます。ただし、次のような他のすべてについても責任を負う必要があることに注意してください。
- 独自のCSSでフォームをスタイリングする
- カスタムコードで検証、エラーメッセージ、または条件付きロジックを追加する
- フォームが異なるデバイスやブラウザで正しく動作することを確認する
ですから、はい、あなたは完全な柔軟性を持っていますが、完全な責任も負います。
追加リソース:WordPressフォームに関するその他のガイド
この記事で、WordPressにHTMLフォームを追加する方法を学べたことを願っています。次に、以下のガイドを確認することをお勧めします。
- 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を試した後、簡単な操作に軽減されました。このプラグインが大好きです。