WordPressウェブサイトにフォームを埋め込む方法（3つの方法）

WordPressウェブサイトにフォームを埋め込むということは、作成したフォームを直接任意のページや投稿に追加して、訪問者がサイトを離れることなく問い合わせ、登録、情報送信ができるようにすることです。WPFormsのようなプラグインを使えば、組み込みの埋め込みボタン、GutenbergのWPFormsブロック、または簡単なショートコードを使って、わずか数クリックで完了できます。

正直に言うと、これは実際よりもずっと複雑だと思っていました。WPFormsを使う前は、ページに問い合わせフォームを設置するためだけにiframeコードやカスタムCSSが必要になるだろうと考えていました。しかし、実際にはその必要はありませんでした。

このガイドでは、WordPressサイトにフォームを埋め込む3つの異なる方法をステップバイステップで説明しますので、ご自身にとって最も簡単な方法を選んでください。

WordPressフォームを今すぐ作成 🙂

WordPressのあらゆるページにフォームを追加する3つの方法

クイック比較

WPFormsのようなフォームプラグインを使用することで、ウェブサイトにフォームを埋め込むことができます。これが最も簡単で迅速な方法です。通常、フォームをウェブサイトに追加するには、埋め込みコードスニペットを使用する必要があります。

例えば、Googleフォームをサイトに埋め込みたい場合、フォームをサイトに追加するためにiframeと呼ばれるHTMLコードが必要になります。その後、CSSを使用してフォームをスタイル設定し、希望通りの見た目に調整する必要があります。

WPFormsを使用すると、WordPressサイトにフォームを追加するのがはるかに簡単になります。 extensiveなコードスニペットを必要とせずに、ウェブサイトにフォームを埋め込むための3つの異なる方法が用意されています。

方法	最適	動作箇所
埋め込みボタン	初心者 — 最速のオプション	ページ（新規または既存）
WPFormsブロック	Gutenbergユーザー — ビジュアルプレビュー	ページと投稿
ショートコード	最大の柔軟性	ページ、投稿、サイドバー、フッター、ウィジェット

いくつかの前提条件

フォームの埋め込みに入る前に、リストからいくつか確認しておくべきことがあります。

WPFormsプラグインをインストールする

WPFormsを使用すると、独自のウェブフォームをゼロから作成したり、2,100以上のフォームテンプレートから選択したりできます。サインアップフォーム、登録フォーム、あらゆるビジネス向けの業界固有のフォームなど、さまざまなオプションがあります。これらはWordPressウェブサイトに簡単に埋め込むことができます。まず、WPFormsプラグインをダウンロードしてください。

プラグインをダウンロードしたら、ウェブサイトにアップロードする必要があります。方法がわからない場合は、このWordPressプラグインのインストール初心者ガイドで手順を説明しています。

WPFormsプラグインを今すぐ入手！ 🙂

新しいフォームを作成

WPFormsプラグインをインストールしたら、ドラッグ＆ドロップビルダーを使用してフォームを作成する準備が整います。独自のフォームを作成したいか、テンプレートから始めたいかはあなた次第ですが、最初に行うことは新規追加をクリックすることです。

そのボタンをクリックすると、選択できるさまざまなテンプレートが表示されます。空白のフォームを選択して独自のフォームを作成するオプションもあります。

選択した項目にマウスを重ねると、2つのオプションが表示されます。

• テンプレートを使用
• デモを表示

デモを表示すると、埋め込まれたフォームの外観が表示されます。テンプレートはカスタマイズ可能なので、変更したい点があれば変更できることを覚えておいてください。

使用したいテンプレートが決まったら、テンプレートを使用ボタンをクリックします。エディターで開かれます。この記事では、シンプルなコンタクトフォームテンプレートを使用します。

ここで、必要に応じてフォームをカスタマイズします。この例では、テンプレートは電話番号のみを収集していました。連絡先の希望を尋ねるチェックボックスフィールドを追加し、メールオプションを追加することでカスタマイズしました。

次に、条件付きロジックを少し設定しました。これは、フィールドオプションの下のスマートロジックタブにあります。条件付きロジックを使用すると、ユーザーが自分に関連するフィールドのみを表示するようにルールを設定できます。

この例では、メールを選択した場合、メールアドレスを入力するためのフィールドが表示されます。GDPRチェックボックスをここに追加したい場合は、簡単に追加することもできます。

電話を選択した場合、電話番号を提供できます。次に、フォームを埋め込む方法を選択します。

さて、メインイベントに進みましょう。フォームの埋め込みです！

方法1：WPForms埋め込みボタンを使用する

WPFormsには、フォームをウェブサイトに追加する方法が3つあります。ここでは3つの方法すべてを紹介しますので、最も簡単な方法を選択してください。

最初 の埋め込み方法は、フォームエディターの上部にある埋め込みボタンを使用するだけです。

そのボタンをクリックすると、既存のWordPressページを選択するか、新しいページを作成するオプションが表示されます。サイトに最も適した方を選択できます。ここでは連絡先ページを作成しました。それが完了したら、開始！ボタンをクリックできます。

それを実行すると、ページの下書きが開き、埋め込まれたフォームが表示されます。公開をクリックすれば完了です！

方法2：WordPressブロックエディターを使用する

WordPressのブロックエディター（Gutenbergとも呼ばれます）から直接フォームを埋め込むのは、投稿やページにフォームを追加するもう1つの簡単な方法です。

フォームを表示したいページを開き、青いプラス（+）アイコンをクリックします。

さまざまなウィジェットオプションが表示されるメニューが開きます。WPFormsウィジェットが見つかるまで下にスクロールしてクリックします。それをクリックするとボックスが開き、埋め込みたいフォームを選択できます。

選択後、ページにフォームが埋め込まれているのが表示されます。

方法3：ショートコード埋め込みを使用する

ウェブサイトにフォームを埋め込むもう1つの簡単な方法は、数秒で完了するショートコードを貼り付けることです。フォームのショートコードは2つの場所にあります。

埋め込みボタン

上記で行ったように、エディターから埋め込みボタンをクリックすると、代替オプションの1つにショートコードを使用するがあります。これをクリックすると、フォームのショートコードが表示され、コピーできます。

WPFormsプラグインのフォーム一覧

WordPressダッシュボードから、サイドバーのWPFormsプラグインをクリックします。作成したフォームの一覧が表示され、すべてのショートコードが表示されます。これは、フォームを積極的に操作していないが、どこかに埋め込むためにショートコードをすばやく取得する必要がある場合に役立ちます。

ショートコードをコピーしたら、埋め込みたいページまたは投稿に移動します。もう一度、ドロップダウンオプションのリストを取得するために、左上隅にある青いプラス（+）記号をクリックします。

以前に行ったようにWPFormsウィジェットを選択する代わりに、代わりにショートコードウィジェットを選択します。

それをクリックすると、投稿エディターにボックスが表示されます。このボックスにショートコードを貼り付けるだけです。

ページをプレビューすると、フォームが正常に埋め込まれていることがわかります。さらに、ウィジェットを使用せずに、エディターに直接ショートコードを貼り付けることもできます。

そして再び、コンテンツ内で表示したい場所に貼り付けた後、ページをプレビューして埋め込まれていることを確認できます。

この方法では、ウェブサイトのフッターにフォームを追加するのも簡単です。

これでフォームを公開する

フォームを正常に作成して埋め込んだら、公開する時間です！WordPressの公開ボタンをクリックしてください。ライブページにアクセスすると、埋め込まれたフォームが情報を収集する準備ができています。

デフォルトでは、ユーザーは同じページに残ります。フォームの回答を送信した後、ユーザーを別のページにリダイレクトする場合は、それを行うことができます。

今すぐWordPressフォームを作成！🙂

よくある質問 — WordPressウェブサイトにフォームを埋め込む方法

WordPressウェブサイトにコンタクトフォームを埋め込むにはどうすればよいですか？

WordPressウェブサイトにフォームを埋め込むには、WPFormsでフォームを作成し、フォームビルダーの上部にある埋め込みボタンをクリックします。既存のページにフォームを追加するか、新しいページを作成できます。どこに配置したいかを選択すると、フォームはページに自動的に表示されます。

ウェブサイトに記入可能なフォームを追加するにはどうすればよいですか？

WPFormsを使用すると、WordPressサイトに記入可能なフォームを簡単に追加できます。フォームを作成したら、提供されたショートコードをコピーして、任意のページまたは投稿に貼り付けます。または、ブロックエディターを使用してWPFormsブロックを挿入し、ドロップダウンからフォームを選択することもできます。

WordPressでフォームにリンクするにはどうすればよいですか？

WordPressでフォームにリンクするには、フォームが埋め込まれたページまたは投稿を作成し、そのページのURLをコピーします。このURLは、サイトのどこかのボタンまたはテキストリンクで共有でき、ユーザーをフォームに誘導できます。

WordPressにフォームウィジェットを追加する最良の方法は何ですか？

WordPressにフォームウィジェットを追加する最も簡単な方法は、WPFormsのネイティブWordPressブロックを使用することです。任意のページまたは投稿を編集し、プラス（+）ボタンをクリックして「WPForms」を検索し、フォームを選択するだけです。

この方法は、従来のWordPressウィジェットよりも柔軟性が高く、テーマ固有のウィジェット領域を必要としないため、より効果的です。

コーディングの知識がなくてもフォームを埋め込むことはできますか？

もちろんです！WPFormsは、特に技術に詳しくないユーザー向けに設計されています。ビジュアルWordPressエディター、ワンクリック埋め込みボタン、または簡単なショートコードを使用してフォームを埋め込むことができます。

HTML、CSS、PHPの知識は必要ありません。これにより、Googleフォーム（iframeコードが必要）やカスタムHTMLフォームのような代替手段よりもはるかに簡単になります。

ブロックとショートコードでフォームを埋め込む違いは何ですか？

WordPressブロック（WPFormsブロック）はビジュアルインターフェースを提供し、初心者には簡単ですが、ショートコードは上級ユーザーにより多くの柔軟性を提供します。

ブロックはメインコンテンツ領域でうまく機能しますが、ショートコードはサイドバー、フッター、カスタムテンプレートの場所、または他のプラグインのコンテンツ領域など、どこにでも配置できます。

同じフォームをウェブサイトの複数の場所に埋め込むことはできますか？

はい！3つの埋め込み方法のいずれかを使用して、同じWPFormsフォームを複数のページ、投稿、または場所に埋め込むことができます。

すべての送信は同じ場所に集められるため、ヘッダー、フッター、および専用の連絡先ページに同時に連絡先フォームを設置するのに最適です。

埋め込まれたWordPressフォームはモバイルデバイスで動作しますか？

はい、WPFormsは自動的にモバイル対応の埋め込みフォームを作成し、すべてのデバイスで完全に機能します。

モバイル表示に問題が発生することがある外部フォームビルダーとは異なり、WPFormsはWordPressテーマのレスポンシブデザインを使用し、デスクトップ、タブレット、モバイルで一貫した表示と機能性を保証します。

次に、hCaptchaでフォームを保護する

フォームにスパム保護の追加レイヤーを追加したいですか？WPFormsにはhCaptcha統合が含まれており、簡単に行えます。WordPressフォームをhCaptchaで保護する方法を学んでください。

今すぐWordPressフォームを作成する

フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。

この記事がお役に立った場合は、FacebookとTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。