ElementsKit には、フォーム ビルダー プラグインの機能を追加する Contact Form 7 ウィジェットが付属しています。 Elementor では、ページビルダーの機能を最大限に活用して、Contact form 7 のスタイルをカスタマイズできます。

Elementor で Contact Form 7 を使用してフォームを作成およびカスタマイズする方法については、このドキュメントをお読みください。

前提条件: #

このウィジェットは Contact Form 7 のアドオンです。

したがって、次のものが必要です Contact Form 7 プラグインがインストールされている WordPress サイト上で。

ステップ 1: Contact Form 7 でフォームを作成する #

1. に行く お問い合わせ > 新規追加.
2. フォーム名を入力します。
3. フォームの設定と属性を構成します。
4. クリックしてください 保存 ボタン。

ステップ 2: Elementor で Contact Form 7 を取得する #

Elementor で Contact Form 7 を取得するには、まず ElementsKit Contact Form 7 ウィジェットを有効にしてから、Elementor エディターを開き、ウィジェットをデザイン領域にドラッグ アンド ドロップします。

Contact Form 7 ウィジェットを有効にする #

コンテンツ ティッカー ウィジェットを有効にするには:

1. 案内する ElementsKit > ウィジェット WordPress ダッシュボードから。
2. を見つける お問い合わせフォーム7 リストからウィジェットを選択し、 ウィジェットを有効にする.
3. クリックしてください 変更内容を保存.

ウィジェットをドラッグ アンド ドロップする #

その後、ElementsKitをドラッグ＆ドロップします。 お問い合わせフォーム7 ウィジェットをElementorエディターに追加します。

ステップ 3: Elementor で編集するフォームを選択する #

このステップでは、編集するフォームを選択できます。そのために、ドロップダウン リストからフォームを選択できます。

で コンテンツ > Contact Form 7 > スタイル Contact Form 7 で作成されたフォームのリストが表示されます。フォームを選択して次のステップに進みます。

ステップ 4: Elementor を使用して Contact Form 7 をカスタマイズする #

Elementor を使用して Contact Form 7 のラベル、入力フィールド、ボタンのスタイルをカスタマイズできるようになりました。

ラベル #

1. タイポグラフィ： ラベルテキストのタイポグラフィを設定します。
2. 色： ラベルのテキストの色を選択します。
3. マージン： フォームフィールドのラベルの余白を調整します。
4. ヒント： プレースホルダーのタイポグラフィーや色も変更できます。

入力 #

1. パディング: 入力フィールドのパディングを調整します。
2. 幅： 入力フィールドの幅を調整できます。
3. 身長： 入力フィールドの高さを変更できます。
4. マージン下: 入力フィールドの下部のマージンを変更します。

5. テキストエリアの高さ: 長いテキストエリアフィールドの場合は、高さを変更できます。
6. テキストエリアのパディング: テキストエリアのパディングを変更することもできます。

7. 背景の種類: 背景色のタイプ (クラシックまたはグラデーション カラー) を選択します。
8. 色： 入力フィールドの背景色を選択します。
9. 境界線の半径: 入力フィールドの境界線の半径を設定します。
10. 枠線の種類: 入力フィールドの枠線の種類を選択します。
11. ボックスシャドウ: 入力フィールドにボックスの影を設定できます。

これらの属性は個別に設定できます。 普通, ホバー、 そして フォーカスモード.

12. タイポグラフィ： 入力テキストのタイポグラフィを設定します。
13. テキストの色： 入力テキストの色を選択します。
14. プレースホルダーのフォント サイズ: プレースホルダーのフォント サイズを調整します。
15. プレースホルダーの色: プレースホルダー テキストの色を選択します。