サイトにフォームを表示する

WordPressサイトで作成したフォームを表示するさまざまな方法について知りたいですか?WPFormsはあなたのウェブサイトのあらゆる側面に簡単に統合することができます。

このチュートリアルでは、WPFormsで作成したフォームをWordPressサイトに表示するさまざまな方法を紹介します。

注:以下の手順は WordPress バージョン 5 以降のものです。古いバージョンの WordPress を使用している場合は、WordPress クラシックエディターでフォームを操作するチュートリアルをご覧ください。


始める前に、WPFormsがあなたのWordPressサイトにインストールされ、有効化されていることを確認し、ライセンスを確認してください。

このチュートリアルでは、ページまたはウィジェット内にフォームを表示する方法に焦点を当てます。

WordPress ページにフォームを埋め込む

WordPress のページにフォームを埋め込むには 2 通りの方法があります。フォームビルダーの組み込み埋め込みウィザードを使うか、ブロックエディターを使って手動でページにフォームを追加します。

WPForms 埋め込みウィザードでフォームを埋め込む

まず始めに、フォームビルダーにアクセスするために新規フォームを作成するか、既存のフォームを編集する必要があります。フォームのカスタマイズが完了したら、フォームビルダーから埋め込みボタンをクリックして埋め込みウィザードを使用することができます。

フォームビルダーのWPForms埋め込みウィザードにアクセスする

ここから、フォームを埋め込む新しいページを作成するか、フォームを追加する既存のページを選択することができます。

フォームを埋め込むページを新規に作成するか、既存のページを選択するかの選択

新規ページ作成オプションを選択すると、ページの名前を入力するよう求められます。次に「Let's Go」ボタンをクリックして次に進みます。

フォーム埋め込みウィザードの新規ページ作成オプション

その後、フォームが埋め込まれた新しいページにリダイレクトされます。準備ができたら、公開ボタンをクリックしてフォームを公開しましょう。

ページの公開

既存のページを選択するオプションを選択した場合、フォームを埋め込むページをドロップダウンから選択するよう求められます。

フォーム埋め込みウィザードの既存ページ選択オプション

ページを選択した後、ブロックエディタにリダイレクトされるようにLet's Goボタンをクリックします。ブロックエディタでは、ページにWPFormsを埋め込むための新しいブロックを追加する必要があります。

既存のページにフォームを表示する

次のセクションでその手順を説明しよう。

ブロックエディタでフォームを埋め込む

ページエディターを開いたら、左上のプラス(+)アイコンをクリックして新しいブロックを追加できます。

ページに新しいブロックを追加する

ブロック・オプションのメニューが開きます。WPFormsブロックを見つけるには、"WPForms "を検索するか、ウィジェットカテゴリまでスクロールします。次にWPForms ブロックをクリックします。

ページにWPFormsブロックを追加する

これでページエディタにWPFormsブロックが追加されます。次に、フォームを選択ドロップダウンから埋め込みたいフォームを選択します。

WPFormsブロックからフォームを選択する

フォームタイトルを選択すると、WPForms ブロック内にフォーム全体が表示されます。右側のサイドバーメニューには、追加のカスタマイズ設定が表示されます。これらのブロックオプションの中で、以下の設定をカスタマイズできます:

WPFormsブロックの設定

  • フォーム:この設定により、表示するフォームを選択できます。
  • タイトルを表示」と「説明を表示」:これらのオプションで、フォームの詳細を非表示にしたり、表示したりすることができます。
  • フォームスタイルオプション:WPForms では CSS を記述することなくブロックエディタでフォームのスタイルを設定できます。詳しくはブロックエディタでのフォームのスタイリングについてのチュートリアルをご覧ください。
  • 詳細設定:このフォームに適用したカスタマイズをコピーし、別のフォームで再利用することができます。また、フォームにCSS クラスを追加することもできます。このオプションは上級ユーザーのみにお勧めします。

フォームとその設定に満足したら、ページを公開し、あなたのウェブサイトのフロントエンドにアクセスしてフォームの動作を確認してください。この例は実際のサイトでどのように表示されるかを示します:

このフォームを入力するには、ブラウザのJavaScriptを有効にしてください。
このフォームのデモをお試しください!
名前

ウィジェットにフォームを埋め込む

注:この手順は、WordPress 5.8 に同梱されているブロックウィジェットエディタ用のものです。クラシック・ウィジェット・エディタをまだ使用している場合は、ウィジェットにフォームを埋め込む手順について、クラシック・エディタでフォームを使用するチュートリアルを参照してください。

WordPressのウィジェットは、特定の機能を実行するサイト上のコンテンツの小さなブロックです。例えば、WPFormsブロックをウィジェットエリアに追加すると、サイトのサイドバーやフッターにフォームを埋め込むことができます。

注:WordPressのウィジェットについてもっと知りたいですか?WPBeginnerのウィジェットの使い方ガイドをご覧ください。

サイトのウィジェットにアクセスするには、WordPress管理エリアの「外観 " ウィジェット」に移動します。ウィジェットの編集画面が開きます。

ウィジェット・エディター画面へのアクセス

ここからの手順は、投稿やページにフォームを埋め込むのとよく似ています。まず、フォームを追加したいウィジェットエリアを見つけます。それをクリックして、正しいエリアを編集していることを確認します。

フォームを追加するウィジェット・エリアを選択する

次にエディターの左上にある青いプラス(+)ボタンをクリックする。

ウィジェット・ブロック・ライブラリを開く

ブロックライブラリで "WPForms "を検索するか、ウィジェットセクションまでスクロールしてWPFormsブロックをクリックします。

WPFroms ブロックをウィジェットに追加する

これで選択したウィジェット領域にWPFormsブロックが追加されます。必要に応じてブロックをドラッグ&ドロップして並べ替えることができます。次に、フォームを選択ドロップダウンから表示したいフォームを選択します。

ウィジェットに表示するフォームを選択する

ウィジェット編集画面の右上にある更新 ボタンをクリックして、変更を保存してください。

変更を保存するウィジェットの更新

以下は、ライブサイトのフッターでフォームがどのように見えるかのサンプルです:

フッターウィジェットに表示されるフォームの例

よくある質問

以下では、最初のフォーム作成に関する質問にお答えします。

Elementorのページにフォームを埋め込むことはできますか?

はい、WPForms Elementorウィジェットを使ってElementorページに簡単にフォームを追加できます。Elementorビルダーに入ったら、WPFormsウィジェットをページにドラッグ&ドロップするだけです。

ElementorページにWPFormsを追加する

完全なチュートリアルについては、ElementorページにWPFormsを追加するガイドをぜひご覧ください。

以上です!これで、WordPressサイトにWPFormsを埋め込むさまざまな方法を学ぶことができました。

次に、WordPressのフォームを通してユーザーが投稿したエントリーを表示したいですか?WPFormsでエントリーを管理するための完全なガイドをご覧ください。

最高のWordPressドラッグ&ドロップフォームビルダープラグイン

簡単、速い、安全。WPFormsを信頼する600万人以上のWebサイトオーナーの仲間入りをしてください。

このフォームを入力するには、ブラウザのJavaScriptを有効にしてください。