今回は Divi の各種モジュールのうちから、お問い合わせフォームモジュール(Contact Form)について図解したいと思います。

Diviの使い方10-5 お問い合わせフォームモジュールの利用方法

ここではお問い合わせフォームモジュールの設定について図解します。各モジュール設定のうち、デザイン設定の共通項については下記を参照ください

https://websvr.org/matome/wordpress-divi-design/

お問い合わせフォームモジュールを利用する

「お問い合わせフォームモジュール」はサイトの連絡先として利用できるコンタクトフォームを表示させたいときに使用します。

1)お問い合わせフォームモジュールを追加する

お問い合わせフォームモジュールを利用するには、

add-new-module「新たなモジュールを追加」をクリックし、
「お問い合わせフォーム」をクリックします。

初期設定では、名前とメールアドレス、メッセージの入力欄だけのシンプルな構成です。また、数字ベースの Captcha が表示されます。

2)お問い合わせフォームモジュールのコンテンツ設定

画像モジュールではコンテンツに下記を設定できます。

  • 新規フィールドを追加
  • テキスト
  • Eメール
  • 要素
  • 転送
(1) 新規フィールドを追加する

新規フィールドを追加では、利用者に入力させるための複数のフィールドを追加できます。また各フィールドに表示条件を設定することも可能です。初期設定では、Name 、 Email 、 Message のフィールドが設置されています。

フィールドを追加するには「新規フィールドを追加」をクリックします。
① 新規フィールドのコンテンツのテキスト
  • フィールドID:IDとして利用される一意の値(未入力だと自動設定されます)
  • タイトル:タイトルとして表示される名称
② 新規フィールドのコンテンツのフィールドオプション

フィールドオプションでは、追加するコンテンツの種類がなんであるのかを設定します。下記の種類より選択が可能で、選択した種類によって動きが変わります。

  • 入力フィールド
  • eメール
  • テキストエリア
  • チェックボックス
  • ラジオボタン
  • ドロップダウンメニュー

チェックボックス、ラジオボタン、ドロップダウンメニューについては、複数の値を設定可能となる。下記にチェックボックスの例を示す。

  • オプションで新しいフィールドを複数追加でき、その一つ一つにチェックボックスが配置されます

ちなみに、フィールドの入力を必須としたい場合は、「必須のフィールド」の設定に「はい」を選ぶことで設定できます。

③ 新規フィールドのコンテンツの条件付きロジック

条件付きロジックをフィールドに設定するとことで、設定したルールに該当したときにそのフィールドを表示させるということができる。

  • 能:条件ロジックを機能させる
  • 関係:全部該当で機能か、一部でも機能か
  • ルール:条件設定。複数可能
(2) テキスト

テキストでは下記を設定できます。

  • タイトル:
  • 成功したメッセージ:
  • 送信ボタンのテキスト:
(3) Eメール

Eメールでは下記を設定できます。

  • Eメール:送信先のメールアドレス(空白でサイトのアドレスに送信)
  • メッセージパターン:(空白で全内容送信)
(4) 要素

要素では Captcha の有無を設定できます。

  • Captchaを表示:数字ベースのキャプチャを表示
(5) 転送

転送ではメール送信後の動きを設定できます。

  • リダイレクトURLを有効にする:
  • リダイレクトURL:

ワードプレス Divi レッスン Diviの使い方図解

写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。

divi-lesson3-2-logo

ワードプレス Diviの使い方3 レイアウトを使ったWebページ作成2

今回は Divi を使ったサイト( Webページ )作成練習の続きとして、サイトに写真ギャラリーと、自己紹介と、連絡先情報のページを追加で作成します。ワードプレス Divi の使い方3...
divi-lesson4-logo

ワードプレス Diviの使い方4 背景設定と新機能 Dividers

Divi は Web ページの背景を編集過程をリアルタイムに確認しながら編集することができます。背景の設定はセクション、行、モジュールのそれぞれで設定できます。さらに、セクションの背景では新たに「...

Diviモジュールの設定方法8 トグルとアコーディオン

今回は Diviの各種モジュールのうちから「トグル」と「アコーディオン」のモジュールの使い方について、Divi初心者向けに図解したいと思います。 Diviモジュールの設定方法8...
divi-lesson6-logo

ワードプレス Diviの使い方6 設定でデザインできる共通項目と固有項目

Divi Builder の設定のデザインタブで設定できる項目として、セクションの Dividers...
divi-lesson3-3-logo

ワードプレス Diviの使い方3 レイアウトを使ったWebページ作成3

今回は Divi のレイアウトライブラリを使ったサイト( Webページ...

ワードプレス Diviの使い方 7-2 イラストの形にグラデーション画像を表示する

前回は文字の形に画像を切り抜いて表示させましたが、今回はイラストの形にグラデーション画像を切り抜いてみましょう。Divi Builder...

Pin It on Pinterest