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

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

正直なところ、以前はこれほど簡単だとは思っていませんでした。WPFormsを使う前は、ページに問い合わせフォームを設置するだけでも、iframeのコードやカスタムCSSが必要になるだろうと想像していました。ところが、実際にはそんなものは一切必要なかったのです。

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

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

WordPressの任意のページにフォームを追加する3つの方法

主な比較

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

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

WPFormsを使えば、WordPressサイトにフォームを追加するのがずっと簡単になります。複雑なコードを記述することなく、ウェブサイトにフォームを埋め込むための3つの方法が用意されています。

方法	おすすめ	適用範囲
埋め込みボタン	初心者向け — 最も手っ取り早い方法	ページ（新規または既存）
WPForms ブロック	Gutenbergユーザー — ビジュアルプレビュー	ページと投稿
ショートコード	最大限の柔軟性	ページ、投稿、サイドバー、フッター、ウィジェット

いくつかの前提条件

フォームの埋め込みに入る前に、いくつか確認すべき点があります。

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

WPFormsでは、一から独自のウェブフォームを作成したり、2,100種類以上のフォームテンプレートから選択したりできます。サインアップフォーム、登録フォーム、あらゆる業種向けの業界特化型フォームなど、豊富なオプションが用意されています。WordPressサイトへの埋め込みも非常に簡単です。まずはWPFormsプラグインをダウンロードしてください。

プラグインをダウンロードしたら、それをウェブサイトにアップロードする必要があります。アップロードの方法がわからない場合は、初心者向けWordPressプラグインインストールガイドをご覧ください。

今すぐWPFormsプラグインを入手しましょう

新しいフォームを作成する

WPFormsプラグインをインストールしたら、ドラッグアンドドロップでフォームを作成できます。独自のフォームを作成するか、テンプレートから始めるかはあなた次第ですが、最初にすることは新規追加をクリックすることです。

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

選択範囲にマウスを合わせると、2つのオプションが表示されます：

• テンプレートを使用する
• デモを見る

デモをご覧になれば、埋め込みフォームがどのように見えるかがわかります。このテンプレートはカスタマイズ可能なので、変更したいところがあれば変更できます。

使用するテンプレートが決まったら、テンプレートを使用するボタンをクリックしてください。エディターが開きます。この投稿では、シンプルなコンタクトフォームテンプレートを使用します。

必要であれば、フォームをカスタマイズしてください。私たちの場合、テンプレートは電話番号のみを収集していました。私たちはまず、連絡先の希望を尋ねるチェックボックスフィールドを追加し、Eメールオプションを追加することでカスタマイズしました。

次に、フィールドオプションの スマートロジックタブにある条件付きロジックを少し設定します。条件付きロジックを使用すると、ユーザーに該当するフィールドだけが表示されるようにルールを設定できます。

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

電話を選択した場合は、電話番号を入力することができます。フォームを埋め込む方法を選択しましょう。

さあ、いよいよ本題に入りましょう。フォームの埋め込みです！

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

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

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

ボタンをクリックすると、既存のWordPressページを選択するか、新しいページを作成するかのオプションが表示されます。あなたのサイトにとって最も理にかなった方を選んでください。ここではお問い合わせページを作成しました。ページを作成したら、「Let's Go！」ボタンをクリックします。

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

方法 2：WordPress ブロックエディタの使用

WordPressのブロックエディター（Gutenbergとしても知られています）からフォームを埋め込むことも、投稿やページにフォームを追加する簡単な方法です。

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

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

選択後、ページにフォームが埋め込まれます。

方法3：ショートコードによる埋め込み

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

埋め込みボタン

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

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

WordPressのダッシュボードから、サイドバーのWPFormsプラグインをクリックします。作成したフォームのリストが表示され、すべてのフォームのショートコードが表示されます。これは、フォームを作成中ではないが、どこかに埋め込むためにショートコードをすぐに取得する必要がある場合に便利です。

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

前のようにWPFormsウィジェットを選択する代わりに、Shortcodeウィジェットを選択します。

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

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

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

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

さあ、フォームを公開しましょう

フォームの作成と埋め込みが完了したら、いよいよ公開しましょう！WordPressの「公開」ボタンをクリックしてください。公開されたページにアクセスすると、埋め込まれたフォームが情報を収集する準備が整っています。

デフォルトでは、ユーザーは同じページに留まります。ユーザーがフォームの回答を送信した後に別のページにリダイレクトしたい場合は、次のようにします。

WordPressのフォームを今すぐ作成しましょう

FAQ - 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の統合機能があり、簡単にできます。hCaptchaを使用してWordPressフォームを保護する方法をご覧ください。

WordPressフォームを今すぐ作成

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

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