AI要約
Elementorを使用してWordPressフォームをウェブサイトに追加しませんか？WPForms Elementorウィジェットを使用すると、簡単にフォームをページに追加し、希望どおりの外観に編集できます。さらに良いことに、すべてElementorページビルダー内で直接行うことができます。
このチュートリアルでは、WPFormsをElementorページに追加する方法を説明します。
開始する前に、WPFormsプラグインがインストールされ有効化されており、ライセンスキーが検証済みであることを確認してください。
1. モダンマークアップの有効化
注意: WPFormsの設定で既にモダンマークアップを有効にしている場合は、このセクションをスキップして、このガイドのフォームの埋め込みセクションに進んでください。
Elementorでフォームのスタイルを設定する前に、WPFormsでモダンマークアップを有効にする必要があります。これを行うには、WPForms » 設定に移動し、一般タブを選択します。
次に、一般セクションまでスクロールし、フォームスタイリングを含めるオプションが基本およびフォームテーマのスタイリングに設定されていることを確認します。
その後、モダンマークアップを使用するトグルボタンをオンの位置に設定して有効にします。
このオプションを有効にした後は、必ず変更を保存してください。モダンマークアップが有効になったら、次のセクションで説明するように、Elementorを使用してフォームのスタイルを設定する準備が整いました。
2. フォームの埋め込み
まず、フォームを埋め込みたいページまたは投稿を開く必要があります。
ページまたは投稿エディターを最初に開いたときにElementorビルダーが表示されない場合は、青いElementorで編集ボタンをクリックしてください。
Elementorビルダーを開いたら、左側のサイドバーを確認します。基本ウィジェットセクションに、WPFormsというラベルのウィジェットが表示されるはずです。
WPFormsウィジェットを画面の右側にあるウィジェットエリアにドラッグします。
次に、既存のフォームを追加するか、Elementorでまったく新しいフォームを作成するかを選択する必要があります。
既存のフォームを追加する
このページに既に作成したフォームを追加したい場合は、WPFormsウィジェット内のドロップダウンをクリックします。作成したすべてのフォームが表示されます。ページに追加したいものを選択してください。
Elementorは、ウェブサイトに表示されるフォームのライブプレビューを表示します。フォームに変更を加える必要がある場合は、左側のパネルにある選択したフォームを編集リンクをクリックします。
フォームビルダーがポップアップウィンドウで開くので、フォームに変更を加えることができます。編集が完了したら、保存をクリックし、次に右上隅にあるXアイコンをクリックしてビルダーを閉じます。
Elementorビルダーで加えた変更はすぐに表示されます。
新規フォームの作成
まだフォームがない場合、またはこのページ用に新しいフォームを作成したい場合は、Elementorページビルダーを閉じずに新しいフォームを作成できます。これを行うには、左側のパネルにある + 新規フォーム ボタンをクリックします。
WPFormsのフォームビルダーがポップアップ表示されるので、名前の追加とテンプレートの選択から始めてフォームの作成を開始できます。
注意: フォームの作成方法については、最初のフォームの作成方法ガイドをご覧ください。また、既製のフォームテンプレートを使用したい場合は、マルチページElementorフォームテンプレートも確認してください。
フォームの作成が完了したら、フォームビルダーの右上にある 保存 ボタンをクリックし、次に X アイコンをクリックして閉じます。
次に、Elementorページビルダーに新しいフォームが表示されます。さらに変更を加える必要がある場合は、ページビルダーの左側にあるパネルの 選択したフォームを編集 リンクをクリックするだけです。
3. 表示オプションの設定
ページにフォームのタイトルまたは説明を表示するには、ページビルダーの左側にあるパネルのWPFormsウィジェットの 表示オプション をクリックして展開します。
次に、好みに合わせてフォーム名とフォームの説明を 表示 する設定を切り替えます。
Elementorのビルダーの 高度な設定 タブで、フォームのフロントエンドでの表示方法を変更することもできます。
ここの設定の使用方法については、Elementorの高度なウィジェットオプションに関するドキュメントを参照してください。
4. フォームのカスタマイズ
WPFormsはElementorと統合されており、フォームの外観をカスタマイズできます。開始するには、ページビルダーのサイドバーメニューのスタイルタブに移動します。
注意: Elementor画面にスタイルタブが表示されない場合は、サイトでモダンマークアップオプションが有効になっていることを確認する必要があります。その方法については、このガイドの冒頭にあるモダンマークアップの有効化セクションを参照してください。
Elementorのスタイルタブでは、CSSの知識がなくても、フォームフィールド、ラベル、ボタンのスタイルを調整できます。高度な設定セクションには、これらのスタイル設定をあるフォームから別のフォームにコピーするオプションもあります。
これらの各オプションについては、以下で詳しく説明します。
テーマ
テーマ設定では、定義済みのカラーテーマを選択して、フォームのフィールド、ラベル、ボタン、コンテナ、および背景のスタイルを自動的に更新できます。
適用するには、好みのテーマをクリックするだけで、フォームのフィールド、ラベル、ボタン、コンテナ、または背景の色が即座に調整されます。
テーマを選択した後に個々の設定をカスタマイズした場合、これらの変更は新しいカスタムフォームテーマとして保存されます。この新しいテーマは、利用可能なテーマのリストに追加され、他のフォームテーマと同様に任意のフォームに適用できます。
このテーマを簡単に識別できるように、テーマ名フィールドで名前を変更することもできます。
カスタムフォームテーマを削除するには、テーマ名の下の テーマを削除 ボタンをクリックするだけです。
フィールドスタイル
フィールドスタイルのオプションでは、サイズ、境界線の半径、および 背景、境界線、テキスト の色のオプションの設定が表示されます。
サイズ設定は、フォームの各フィールドのサイズを制御します。利用可能なオプションには、小、中、大があります。
次に、 境界線の半径設定があります。これはフィールドの角の丸さを変更します。数値が大きいほど、角は丸くなります。
次に、フォームフィールドの背景、境界線、テキストの色を更新するオプションがあります。デフォルトの色を変更するには、ラベルの隣の色をクリックします。
これによりカラーピッカーが開き、目的の色を選択できます。フォームに特定のブランドカラーがある場合は、HEXAフィールドに直接カラーコードを入力できます。HEXAがデフォルトの単位ですが、必要に応じてRGBAまたはHSLAに切り替えることもできます。
ラベルスタイル
ラベルのスタイルの下には、フォームラベルのサイズと色を調整するオプションがあります。サイズドロップダウンから、お好みに応じて小、中、または大のいずれかを選択できます。
次に、フィールドのラベル、サブラベルとヒント、およびエラーメッセージの色を更新するオプションがあります。以下に、利用可能な色のオプションを説明します。
- ラベル：このオプションは、ラベルのテキストの色を変更します。
- サブラベルとヒント：このオプションは、WPFormsがフロントエンドでユーザーに値を提案するときに表示されるフィールドのサブラベルとヒントの色を制御します。
- エラー：ユーザーがフォームに入力する際、エラーが発生した場合に表示されるエラーメッセージの色。
ボタンのスタイル
ボタンのスタイル設定では、ボタンのスタイルをカスタマイズできます。ボタンのサイズを変更するには、サイズドロップダウンをクリックして、使用したいオプションを選択します。
ボタンに丸い角を付けるには、境界線の半径フィールドに値を入力するだけです。
次に、ボタンの背景色とテキスト色を更新するオプションが表示されます。
注意: ボタンに設定した背景色は、デフォルトのアクセントカラーとしても使用されます。これは、フィールド、プログレスバー、ラジオボタン、チェックボックスのフォーカス状態の色にボタンの背景色が使用されることを意味します。
コンテナースタイル
コンテナのスタイル設定を使用すると、フォームコンテナのパディング、境界線のスタイル、境界線のサイズ、境界線の半径、影、および色をカスタマイズできます。以下に、利用可能なコンテナオプションを詳しく説明します。
- パディング: このオプションは、フォームコンテナの境界線の内側のスペースを設定します。この値を増減して、フォームコンテンツの周りの間隔を調整できます。
- 境界線（スタイル）：この設定では、コンテナのアウトラインを選択できます。実線、破線、または点線の境界線のオプションがあります。
- 境界線の太さ: コンテナの境界線の太さを決定します。デフォルトの単位はピクセル（px）ですが、デザインのニーズに最適な単位を選択できます。
- 境界線の半径: コンテナの角の丸みを調整し、フォームの外観に柔らかい、またはよりはっきりしたエッジを追加します。デフォルトの測定単位はピクセル（px）ですが、スタイルに合わせて変更できます。
- 影: コンテナの影の効果のサイズを選択して、フォームのデザインに奥行きを追加します。オプションは「なし」から「大」まであります。
- 境界線（色）：コンテナの境界線の色を更新して、ビジュアルテーマに合わせ、フォーム全体の美観を高めます。
背景スタイル
背景スタイルの設定により、フォームの背景画像と色を制御できます。
開始するには、画像ドロップダウンメニューから画像ソースを選択します。ウェブサイトに既にアップロードされている画像、または新しい画像をアップロードするには、メディアライブラリオプションを選択します。より幅広いプロフェッショナルな画像を選択するには、ストックフォトオプションを選択します。
選択後、画像を選択セクションをクリックして続行します。
画像ドロップダウンからメディアライブラリを選択した場合、ウェブサイトのメディアギャラリーが開き、画像を選択するか新しい画像をアップロードできます。ストックフォトが選択された場合、フォームの背景として選択できるストックフォトのセレクションが表示されます。
画像を選択したら、背景スタイルセクションで追加のカスタマイズオプションが提供されます。
- 位置: この設定では、上部中央、下部中央などのオプションを選択して、フォーム内の背景画像を配置し、最適な配置を取得できます。
- 繰り返し: 背景画像の繰り返し方法を選択します。オプションは、単一の画像の場合は繰り返しなし、背景全体に画像を繰り返す場合はタイル、幅全体に繰り返す場合は水平繰り返し、長さ方向に繰り返す場合は垂直繰り返しです。
- サイズ: フォーム内の背景画像のフィット感を調整します。カバーは、画像がフォームのサイズに合わせて、背景全体をカバーすることを保証します。寸法が選択された場合、画像の正確な幅と高さを指定できます。
- 色：このオプションを使用すると、画像が使用されていない場合に表示される背景色を選択できます。
高度なスタイリング
このセクションでは、追加クラスフィールドにクラス名を入力して、フォームにCSSクラスを追加できます。
次に、スタイルの設定をコピー/貼り付けの下に、フォームに追加したすべてのスタイルを反映したCSSコードが表示されます。
このオプションを使用すると、あるフォームから別のフォームにスタイルをコピーできます。
別のフォームからスタイル設定をコピーした場合、ここにすばやく貼り付けることができます。コードスニペットを貼り付けると、フォームは前のフォームのスタイルを使用します。
フォームに加えたカスタマイズをリセットしたい場合は、スタイル設定のリセットボタンをクリックしてください。これにより、カスタムスタイルなしでフォームが元の状態に復元されます。
フォームのスタイル設定が完了したら、ページを公開するか下書きとして保存することで、変更を保存してください。
5. フォームの公開
フォームを公開する前に、テストして意図したとおりに機能することを確認することをお勧めします。WordPressフォームを公開前に正しくテストする方法に関するガイドには、このプロセスを支援するための完全なチェックリストが含まれています。
フォームを公開する準備ができたら、Elementorページビルダーの下部にある公開または更新ボタンをクリックします。
これで完了です！これで、Elementorを使用してWPFormsをページに埋め込む方法がわかりました。
次に、ユーザーの選択やフォームへの入力に基づいてフィールドを表示または非表示にしたいですか？スマート条件付きロジックの使用に関する簡単なガイドをご覧ください。実装方法の手順が記載されています。