AI要約
WordPressサイトで作成したフォームを表示するさまざまな方法について知りたいですか？WPFormsは、ウェブサイトのあらゆる側面に簡単に統合できます。
このチュートリアルでは、WPFormsで作成したフォームをWordPressサイトに表示するさまざまな方法を説明します。
この記事の内容
注意: 以下の手順はWordPressバージョン5以降を対象としています。古いバージョンのWordPressを使用している場合は、WordPressクラシックエディターでのフォームの操作に関するチュートリアルを参照してください。
開始する前に、WPFormsがWordPressサイトにインストールおよび有効化されており、ライセンスが検証済みであることを確認してください。
このチュートリアルでは、ページまたはウィジェット内でサイトにフォームを表示する方法に焦点を当てます。
WordPressページにフォームを埋め込む
WordPressページにフォームを埋め込むには、2つの異なる方法があります。フォームビルダーの組み込み埋め込みウィザードを使用するか、ブロックエディターを使用して手動でページにフォームを追加できます。
WPForms埋め込みウィザードを使用してフォームを埋め込む
まず、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスする必要があります。フォームのカスタマイズが完了したら、埋め込むボタンをクリックして、フォームビルダーから直接埋め込みウィザードを使用できます。
フォーム埋め込みウィザードが開き、フォームを公開するための6つのオプションが表示されます。
左側の3つのオプションは、サイトにフォームを埋め込むための従来の一般的な方法をカバーしています。
- 既存のページ: すでに作成したページにフォームを追加します。
- 新規ページ: フォームがすでに埋め込まれた新しいページを作成します。
- ショートコード: フォームのショートコードをコピーして、サイトのどこにでも貼り付けます。
右側の3つのオプションは、当社の会話型フォーム、フォームページ、およびリードフォームアドオンを使用して、フォーム専用のランディングページエクスペリエンスを開きます。各アドオンには独自のガイドがあります。
以下では、3つの従来の埋め込みオプションそれぞれについて説明します。
既存のページ
既存のページをクリックし、ドロップダウンからフォームを埋め込みたいページを選択します。ページに追加ボタンをクリックして続行します。
選択したページのブロックエディターにリダイレクトされます。フローの残りの部分については、下のブロックエディターでフォームを埋め込むセクションを参照してください。
新規ページ
新規ページをクリックし、ページの名前を入力して、ページを作成ボタンをクリックします。
フォームが埋め込まれた新しいページにリダイレクトされます。公開ボタンをクリックしてページを公開します。
ショートコード
ショートコードをクリックします。フォームのショートコードがクリップボードにコピーされ、ショートコードを受け入れるサイトのどこにでも貼り付ける準備ができます。
ブロックエディターを使用してフォームを埋め込む
ページエディターを開いたら、左上隅のプラス（+）アイコンをクリックして新しいブロックを追加できます。
これにより、ブロックオプションのメニューが開きます。WPFormsブロックを見つけるには、「WPForms」を検索するか、ウィジェットカテゴリまでスクロールします。次に、WPFormsブロックをクリックします。
これにより、WPFormsブロックがページエディターに追加されます。次に、フォームを選択ドロップダウンから埋め込みたいフォームを選択します。
フォームのタイトルを選択すると、WPFormsブロック内に完全なフォームが表示されます。右側のサイドバーメニューには、追加のカスタマイズ設定が表示されます。これらのブロックオプション内で、次の設定をカスタマイズできます。
- フォーム: この設定では、表示する別のフォームを選択できます。
- タイトルを表示および説明を表示: これらのオプションを使用すると、追加のフォーム詳細を非表示または表示できます。
- フォームのスタイリングオプション: WPFormsを使用すると、CSSを記述せずにブロックエディターでフォームをスタイル設定できます。詳細については、ブロックエディターでフォームをスタイル設定するチュートリアルをご覧ください。
- 高度な設定: ここでは、このフォームに適用したカスタマイズをコピーして、別のフォームで再利用できます。また、フォームにCSSクラスを追加することもできます。このオプションは、上級ユーザーにのみ推奨されます。
フォームとその設定に満足したら、ページを発行し、ウェブサイトのフロントエンドにアクセスして、フォームが機能していることを確認してください。以下は、例がライブサイトでどのように表示されるかです。
ウィジェットにフォームを埋め込む
注意: これらの手順は、WordPress 5.8 に同梱されていたブロックウィジェットエディター用です。クラシックウィジェットエディターを使用している場合は、ウィジェットにフォームを埋め込む手順については、クラシックエディターでフォームを使用するチュートリアルを参照してください。
WordPressウィジェットは、特定の機能を実行するサイト上の小さなコンテンツブロックです。たとえば、WPFormsブロックをウィジェットエリアに追加して、サイトのサイドバーまたはフッターにフォームを埋め込むことができます。
注意: WordPressウィジェットについてさらに詳しく知りたいですか？ WPBeginner のウィジェットの使用ガイドをご覧ください。
サイトのウィジェットにアクセスするには、WordPress管理エリアの外観 » ウィジェットに移動します。これにより、ウィジェット編集画面が開きます。
ここからのプロセスは、投稿またはページにフォームを埋め込むプロセスと非常によく似ています。まず、フォームを追加したいウィジェットエリアを見つけます。正しいエリアを編集していることを確認するためにクリックします。
次に、エディターの左上隅にある青いプラス (+)ボタンをクリックします。
ブロックライブラリで、「WPForms」を検索するか、ウィジェットセクションにスクロールして、WPFormsブロックをクリックします。
これにより、選択したウィジェットエリアにWPFormsブロックが追加されます。必要に応じて、ブロックをドラッグアンドドロップして並べ替えることができます。次に、フォームを選択ドロップダウンから表示したいフォームを選択します。
ウィジェット編集画面の右上隅にある更新ボタンをクリックして、変更を保存してください。
ライブサイトのフッターにフォームが表示される場合のサンプルを以下に示します。
よくある質問
以下に、最初のフォームの作成に関するよくある質問への回答をいくつか示します。
Elementorページにフォームを埋め込むことはできますか？
はい、WPForms Elementorウィジェットを使用して、Elementorページに簡単にフォームを追加できます。Elementorビルダーに入ったら、WPFormsウィジェットをページにドラッグアンドドロップするだけです。
完全なウォークスルーについては、ElementorページにWPFormsを追加するガイドをご覧ください。
これで完了です！これで、WPFormsをWordPressサイトに埋め込むさまざまな方法を学びました。
次に、WordPressフォームを通じてユーザーから送信されたエントリを表示しますか？完全なウォークスルーについては、WPFormsのエントリ管理に関する完全ガイドをご覧ください。