いつも【初心者のためのWordpress完全マニュアルブログ】をご覧いただきありがとうございます。
Webサイトは誰でも作れる！このブログでは、Web開発知識や経験のない初心者の方でも、ドラッグ&ドロップなどの簡単操作でできるウェブサイト作りを提案しています。

このStep By Stepチュートリアルの通りに作っていくだけで、サンプルの様なスタイリッシュなウェブサイトが作れちゃいます！

 前回までのおさらい

Diviテーマ Step By Stepチュートリアル サンプルデザイン:  https://yukifel-divitutorial.com/

Diviテーマの購入はこちら:  https://www.elegantthemes.com

前回までのチュートリアル

• Step1: テーマのセットアップ
• Step2: ランディングページ・ナビゲーションメニューの作成
• Step3: コラム・広告モジュールの使い方
• Step4: メンバープロフィールの作り方
• Step5: カウンターの設置方法
• Step6: 価格表モジュールの使い方

ストック画像オススメ

Pexels:　無料だけどやたらと解像度の良い、クオリティの高いストック画像が著作権フリーでダウンロードできます。ちなみにこのチュートリアルで使っている画像は、著作権を考慮して、大体このサイトから取得しています。

Shutterstock: 有料には有料の良さがある！種類の豊富さとクオリティの高さはお墨付き。ネットサーフィンをしていて、この画像いいなと思った画像はだいたいShutterstockと言っても過言ではありません。ただ有料であることには間違いないので、トップ画像とかここぞという場所に！

今回は世界人気No.1 WordPressテーマ【Divi】Step By Stepチュートリアルシリーズ第7弾ということで、コンタクトフォームの作り方についてご紹介します。

コンタクトフォームを作るプラグインはたくさんありますが（有名どころで言うとコンタクトフォーム7など）、DIVIはコンタクトフォームモジュールをデフォルトで搭載しているので、今回はそのコンタクトフォームモジュールを使ったコンタクトフォームの作り方ご紹介したと思います。使い方はとっても簡単です^^

今回作るサンプル画像はこちらです。

コンタクトフォームの作り方

①　ビジュアルビルダーを立ち上げて、新規セクションを追加する。

それではいつものようにビジュアルビルダーを立ち上げることから始めます。ビジュアルビルダーを有効にするをクリックします。

今回も通常セクションを選択します。新規セクションを作成したら、コラムを挿入します。サンプルでは２コラムを選択していますが、１コラムを選択して、背景画像をセクションに設定するなど、お好きなようにカスタマイズして構いません。

②　画像モジュールを左側のコラムに挿入する。

サンプルでは左側のコラムに画像を挿入しているので、画像モジュールを挿入してみたいと思います。こちらもお好みで。１コラムを選択した方は、ここはスキップしていただいて構いません。

また画像モジュールの代わりに、テキストモジュールを挿入して、背景画像を設置してもいいかもしれません^^

ちなみに今回使用している画像は、こちらをクリックしてダウンロードいただけます。

③　お問い合わせモジュールを挿入する。

右側のコラムに、モジュールを挿入します。グレイの+アイコンをクリックして、お問い合わせモジュールを選択します。

z

④　アイテムの設定と追加、削除

前回値段表を作成した時のように、お問い合わせモジュールではアイテムを先に作成して設定してから、全体のデザインを一括して設定したいと思います。もちろんアイテム毎に設定することもできます。

では試しにNameアイテムの設定を変更してみたいと思います。下画像の赤太枠で囲んである設定アイコンをクリックして、アイテムの設定ページに行きます。

今回はフィールドの表示名のみ設定変更します。

下記の画像のようにタイトルに表示させたいテキストを打ち込むと、フィールド内のテキストが変更ができます。下の画像では、タイトルに”お名前”とタイプしたので、フィールドの表示が、”お名前”に変更になりました。

同じ要領で、他のアイテム名も変更して行きます。

アイテム毎の設定画面からお問い合わせモジュールの設定トップに戻りたい場合は、下の画像の赤太枠で囲まれている矢印をクリックすると戻れます。

アイテム一覧の下にあるグレイの+アイコンをクリックすると、アイテムが新規追加できます。

ゴミ箱マークをクリックすると、アイテムが削除でき、設定アイコンの隣にあるアイコンをクリックするとアイテムが複製できます。

またアイテムをドラッグ&ドロップすることによって、アイテムの順番を変更することができます。

⑤　モジュールコンテンツのカスタマイズ

では次にモジュールをカスタマイズして行きます。

コンテンツタブをクリックして、コンテンツの設定を変更します。各項目毎の説明は以下の通りです。

テキスト

タイトル:  モジュールにヘッダーテキストを挿入できます。（今回は後ほどテキストモジュールでテキストを挿入したいので、空欄にしてあります。）

成功したメッセージ: 閲覧者がメールを送信した後に、表示されるメッセージを変更できます。

Submit Button Text: サブミットボタン内のテキストを変更できます。

Eメール

Eメール:  送信先のメールアドレスを設定します（自分のメールアドレス）

メッセージパターン： 受信した際のメッセージのパターンを変更できますが、ここは空欄で大丈夫です。

Submit Button Text: サブミットボタン内のテキストを変更できます。

要素

Captchを表示:  いいえにすると、サブミットボタンの左隣にある5+7=という表示が消えます。

リダイレクト

リダイレクトURLを有効にする:  はいにすると、閲覧者がメッセージを送信した後に特定のURLに閲覧者を飛ばすことができます。例えば、ここをトップページのURLに設定すると、閲覧者はメッセージを送信した後、トップページに飛ばされます。

背景

フォーム背景色: フォームの背景色を変更できます。

⑥　モジュールデザインのカスタマイズ

こちらはいつもの設定と同じで、特筆する項目もないので、詳細はスキップします。フォームフィールドテキストで、フォーム内のデザインをカスタマイズすることができます。

Extra!

もしボタン内にパディングをもっと入れたい場合は、

詳細設定タブ>>カスタムCSS>>問合せボタン内に、以下のコードをコピーアンドペーストするとパディングが挿入できます。

/*ここから下をコピーアンドペースト*/

padding: 5px 30px;

これでお問い合わせモジュールのカスタマイズは終了です。カスタマイズが終了したら、チェックボタンをクリックして変更を保存後モジュール設定画面を閉じます。

⑦　コラムとセクションのカスタマイズ

次にグリーンの設定アイコンをクリックして、コラムの設定を変更します。

今回はフルワイドのコラムを使用しているので、デザインタブ>>サイズ変更の順にクリックして、この行を全幅にするをはいにします。

次にブルーの設定アイコンをクリックして、セクションの余白を調整します。今回はセクション間の余白を0にしたいので、デザインタブ>>余白のカスタムパディングをトップ0px、ボトム0pxと打ちます。

⑧　テキストモジュールの挿入

最後にテキストモジュールを挿入します。グレイの+アイコンをクリックして、新しいモジュールを挿入します。今回は、テキストモジュールを選択します。

下記のようにコンテンツを編集する時に、タイトルにHeading1を使用すると、デザイン設定をする際に、ヘッダーテキストとして他のテキストとは別のデザインにすることができます。

あとはいつものようにデザインタブからテキスト・ヘッダーテキストのデザイン、または余白を変更します。

テキストモジュールのデザインが変更できたら下画像の赤太枠で囲まれているアイコンをクリックして、モジュールの順番を変更します。

こちらが完成図です。

 まとめ

DIVIチュートリアル第７弾、コンタクトフォームの作り方はいかがだったでしょうか？トップページのカスタマイズも残すところあとフッターのみとなりました！！^^

お問い合わせモジュールの代わりに、他のプラグインを使用してもいいですが、コンタクトフォーム7はカスタマイズが初心者の方には少し難しいかもしれません。。

DIVIのコンタクトモジュールはカスタマイズがとっても簡単なので、初心者の方にも快適にカスタマイズができるのがいいところですね。

今回もわからないところや、質問等ございましたら、コメント欄やSNSまたはメールにてお答えします。また、Wordpressに関して使ってみたいけど、使い方が分からないプラグインやテーマ、こんな事してみたいけどどういうプラグインを使ったらいいか分からない等のリクエストもどしどし受け付けてます！ お気軽にご連絡ください！

では次回また！See you later<3