Fluent Formsで作ったフォームを選び、ページの中へ表示できます。
このページでできること
作成済みのFluent Formsを配置する
作成済みのFluent Formsを配置する
スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、手順に記載した画面で行います。
① 「カスタムフォーム」を追加する
- 編集したいページを「Elementorで編集」で開きます。
- 左上の「＋」（要素を追加）を押し、「カスタムフォーム」で検索します。
- 該当するウィジェットをページの入れたい場所へドラッグします。配置済みなら、その部品をクリックします。
添付画像の「カスタムフォーム」はFluent Formsを配置するウィジェットです。Elementor Proの「フォーム」や「Atomic フォーム」とは別の部品です。テスト送信すると設定済みの宛先へ通知されるため、受信先を確認してから行います。
② 作成済みのフォームを選ぶ
赤い番号は手順の番号に対応しています。
- 先にWordPressの「カスタムフォーム」で必要なフォームを作成・保存します。
- Elementorの「カスタムフォーム」を置き、「Fluent Form を選択」の欄からフォームを選びます。
- 「ラベル」「プレースホルダー」の表示を確認します。
- 入力項目や送信先を変更するときは、Fluent Forms側のフォーム編集・設定へ戻ります。
ここを確認：正しいフォームが表示されている。
③ 見た目と表示を確認する
赤い番号は手順の番号に対応しています。
- 「スタイル」→「フォームコンテナ」で最大幅や余白を整えます。
- 「ラベル」「入力欄とテキストエリア」で文字と入力欄を読みやすくします。
- 「送信ボタン」「成功メッセージ」「エラーメッセージ」も確認します。
入力・使い方の例
Fluent Formsで作った「お問い合わせ」を選択 → ページに入力欄と送信ボタンが表示されます。
④ スマホで確認して保存する
上部のスマートフォンのアイコンで表示を確認します。「公開」または「更新」で保存し、プレビューや実際のページで動作を確認します。作成途中の場合は下書き保存を使います。
完了チェック
- 正しいフォームが表示されている。
- 公開前に自分のテスト情報で送信し、完了表示と受信先を確認した。
うまくいかないとき
フォームを選べない・候補がない
Fluent Formsが有効か、フォームが作成・保存されているか確認します。
画面は撮影時のバージョンです。同じ名前のAtomic版・Pro版・追加プラグインのウィジェットは設定が異なる場合があります。