Elementorでお問い合わせページを作成する前に

Elementorは、ワードプレスのテーマやプラグインによっては不具合が生じることがあるので、「Elementorが使えない？不具合が起こる原因はこれ！」記事で環境を整えてから本記事を参考に、ページの作成をしてみてください。

Elementorでお問い合わせページを作成するのに必要なツール

• Elementor
• Contact Form7（コンタクトフォーム7）

今回お問い合わせページを作成するのに使用して行くツールは、この2つです。Elementorはメインで使用して行くプラグインですが、フォームを作成する事ができません。Elementor ProというElementorの有料の版であればフォームを作成する機能が備わっているんですけど、それを補うプラグインとしてコンタクトフォーム7を使用していきます。他のフォームが作成できるプラグインやサービスを使っているのであれば、そちらで代用していただいても構いません。

Elementorでお問い合わせページを作成する手順

それでは、以下からお問い合わせページをステップバイステップで作成する手順をご紹介していきます。

Step1. コンタクトフォーム7でお問い合わせフォームを作成する

コンタクトフォーム7をインストールすると、デフォルトでお問い合わせフォームが1つ追加されているので、そのショートコードをコピーします。取得する情報を細かく設定したい場合は、「コンタクトフォーム7の使い方【カスタマイズ方法も紹介！】」を参考にしてみてください。

Step2. 固定ページを作成する

まずは、「固定ページ」の「新規追加」から記事のタイトルを入力して、「Elementorで編集」ボタンをクリックします。

Step3. タイトルセクションを作成する

まずは、編集画面の左下で「設定」をクリックして、「ページレイアウト」を「エレメンターキャンパス」に切り替えます。

次に、セクションを追加していきます。編集画面の真ん中にあるプラスボタンをクリックして、1カラムを選択します。

そして、セクションの設定をしていきます。「スタイル」に切り替え、以下のように設定していきましょう。

• 「背景タイプ」で「クラシック」を選択
• 「画像」でWordPressにアップしている画像を背景画像として設定
• 「位置」で「中央の中」に設定
• 「繰り返し」で「繰り返しなし」に設定
• 「サイズ」で「カバー」を選択

僕は、このように設定をしましたが、お好きなように変更してください。

これは、追加するタイトルの色にもよりますが、白背景に白い文字を追加すると見えにくくなってしまうので、「背景オーバーレイ」で色を設定することをお勧めします。「背景タイプ」を「クラシック」にして、「色」を設定します。あとは、「透明度」を調節して完了です。

次に、「見出し」ウィジェットを追加して、タイトルを設定していきます。「タイトル」にお問い合わせページのタイトルを入力します。「お問い合わせ」とか「お問い合わせページ」みたいにしておくと良いと思います。あとは「HTMLタグ」を「H1」に設定し、「配置」を「中央」にすればタイトルの設定は完了です。

そしたら次に、「区切り線」というウィジェットを追加していきます。これは、通常上と下のウィジェットを区切るために使用するんですけど、装飾のために使うこともあります。今回は、装飾のために使っていきます。「コンテンツ」タブでは、「幅」を「10」くらいに設定して、「配置」を「中央」にします。

「スタイル」タブでは、「色」を設定し、「幅」を調節しましょう。「3」くらいが良いと思います。

最後に、セクションの設定で「高さ」を「最小の高さ」にします。あとは、「最小の高さ」という項目を調節します。

Step4. お問い合わせフォームのセクションを作成する

Step4では、お問い合わせフォームを追加していきます。Step3でやったように、1カラムのセクションを追加します。

そしたら、いきなりお問い合わせフォームを追加してもOKなんですけど、「何かご質問がある場合は、以下のフォームからお願いします。みたいな文言を追加しておくと良いと思うので、このセクションのトップに見出しを追加します。見出しの色は、背景が白なので黒にします。

次に、お問い合わせフォームを追加していきます。Step1でコンタクトフォーム7のフォームを作成したので、ショートコードをコピーしてきて、Elementorの「ショートコード」というウィジェットの中にペースとします。そうすると、作成したフォームが表示されます。

Step5. フッターを作成する

最後にフッターを作成していきます。

今回は、5カラムのセクションを追加します。

「スタイル」では、「背景タイプ」で「クラシック」を選択して、「色」で薄いグレーに設定します。

次にコンテンツを追加していきます。今回は、左から、見出し、見出し、画像、見出し、見出しという順番にしたいと思います。見出しに関しては、好きなページを設定しましょう。例えば、サイトのトップページとか、ブログ一覧ページ、プロフィールページ、プライバシーポリシーページなどですね。

そして、見出しの設定に関してですが、次の4つの項目を設定します。

• 「タイトル」でページのタイトルを入力
• 「リンク」のページのURLを入力
• 「HTMLタグ」で「p」を選択
• 「配置」で「中央」に設定

画像は、サイトのロゴを選択しておきましょう。

まとめ