Elementor の Essential Addons プラグインを使用して Contact Form 7 フォームをカスタマイズしますか?
Contact Form 7 はそのうちの XNUMX つです。 WordPressのプラグイン 最も人気のあるフォームビルダーの. それは完全に無料で、それを使用して作成することができます お問い合わせフォーム WordPress Webサイトで。
予約フォームやファイルアップロードフォームなど、さまざまな種類のフォームを作成することもできます。 フォームの作成中に使用できる 14 種類のフィールドが用意されています。
参照してください： Elementor ウィジェット/テンプレートを Gutenberg ブロックとして使用する方法
Contact Form 7 プラグインの一般的な問題の 7 つは、そのカスタマイズ プロセスです。 Contact Form XNUMX はデフォルトのスタイルを使用します ワードプレスのテーマ 資産。 別のスタイルを使用することもできますが、CSS のスキルが必要になります。 CSS のスキルがない場合は、モジュールを使用できます エッセンシャルアドオン フォームのスタイルを設定します。
Essential Addons は、Elementor を使用して Contact Form 7 フォームをカスタマイズするプロセスを強化する Elementor アドオンです。 Elementor および Essential Addons はフリーミアム プラグインです。 両方の無料版を使用して、Contact Form 7 フォームのスタイルを設定できます。
Essential Addons を使用して Contact Form 7 フォームのスタイルを設定する方法
フォームのスタイリングを開始する前に、インストールされていることを確認してください Elementor et エッセンシャルアドオン. インストールしてアクティブ化したら、新しいページを作成します (ページ – >追加)そしてElementorで編集します。
カスタマイズ プロセスを開始する前に、左下隅にある歯車アイコンをクリックしてページ レイアウトを設定します。 ドロップダウン メニューからレイアウトを設定します。
編集ボックスのプラス アイコンをクリックし、ウィジェットをドラッグして、新しいセクションを追加します。 EAお問い合わせフォーム7 エディターの左パネルから。
左側のパネルに移動し、スタイルをカスタマイズするフォームを選択します。
フォームを選択したら、タブに移動します 形式. ご覧のとおり、いくつかのスタイル オプションを設定できます。 設定できる一般的なスタイル オプションは次のとおりです。
- フォームの幅、配置、および背景
ブロックの下 フォームコンテナで、セクションのカラー ピッカーをクリックします。 背景タイプ フォームの背景に希望の色を設定します。 背景として単色またはグラデーション色を使用できます。
また読みます： Elementor: テンプレートをインポートまたはエクスポートする方法
フォームの配置を設定するには、セクションで好みの配置オプションを選択するだけです フォームの配置.
フォームの幅を設定するには、フィールドのフォームの最大幅の値を設定します フォームの最大幅.
- 背景フィールド、境界線の幅と半径
フィールドの背景、境界線の幅と半径を定義するには、セクションを開くことができます 入力とテキストエリア. フィールドカラーピッカーをクリック 背景色 背景を設定します。
タブをクリックして、デバッグモードでフィールドの背景色を設定することもできます FOCUS.
フィールドの幅を定義するには、フィールドで値を定義できます 入力幅. このセクションでは、テキスト ボックス フィールドの幅も設定できます。 テキストエリアの幅.
境界線の半径を設定するには、フィールドを編集してください 境界半径 好みの境界線の値を設定します。 フィールドの鉛筆アイコンをクリックして、タイポグラフィ (フォント ファミリー、フォント サイズ、フォント スタイル) を設定することもできます。 タイポグラフィ.
- ラベル
Essential Addons を使用すると、フォーム ラベルのスタイルをカスタマイズすることもできます。 テキストの色とタイポグラフィを設定できます。 これを行うには、オプションを開きます ラベル. フィールドのカラー ピッカーをクリックして、テキストの色を設定します。 テキストの色.
タイポグラフィを設定するには、フィールドの鉛筆アイコンをクリックします タイポグラフィ.
- 送信ボタン
送信ボタンのスタイルをカスタマイズするには、ブロックを開きます 送信ボタン. ここから、ボタンの配置、幅、背景色、テキストの色、境界線の半径、タイポグラフィを設定できます。
- エラーメッセージ
エラー メッセージのスタイルをカスタマイズするには、ブロックを開くことができます エラー. エラー メッセージのテキストの色、タイポグラフィ、検証エラーの背景色、検証エラーのテキストの色などを設定できます。
他にもいくつかのスタイル オプションを設定できます。 フォームのスタイルに満足するまで、左側のパネルをいじってみてください。
Elementor および Essential Addons によって提供される利用可能なウィジェットを使用して、ページに他のいくつかの要素を追加できます。 完了したら、 ボタンをクリックします PUBLISH 左パネルの下部にある をクリックして、ページを公開します。
フォームを通常のページに統合する
ボタンをクリックした後 PUBLISH、お問い合わせページは基本的に公開されています。 ページ自体は Elementor を使用しています。 追加したい場合 お問い合わせフォーム 7 通常のページ（デフォルトの WordPress エディタである Gutenberg で作成されたページ）に、プラグインをインストールできます。 グーテンベルクのエレメンターブロック. このプラグインは、Elementor テンプレートを Gutenberg ブロックに変換します。
登録するには お問い合わせフォーム 7 Elementor テンプレートとして、ボタンの横にある矢印ボタンをクリックします。 公開/更新 左側のパネルで テンプレートとして保存する.
テンプレートに名前を付けて、ボタンをクリックします 登録者.
新しいページを作成します (ページ – >追加）、「お問い合わせ」「お問い合わせ」など、お好きな名前を付けてください。
新しいブロックを追加して選択 エレメンターライブラリ 作成したお問い合わせフォーム フォーム テンプレートを選択します。
これで、Contact Form 7 フォームのパーソナライズが完了しました。
ElementorProを今すぐ入手!!!
まとめ
ここに ！ Essential Addons を使用して Contact Form 7 フォームをカスタマイズする方法を示すこの記事は以上です。 そこに行く方法について懸念がある場合は、 commentaires.
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
