(↑Pinterestでシェアお願いします!)

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

執筆者 | 更新日 2020年02月12日 | Elementorの使い方 | コメント0件

こんにちは、根本です。

この記事では、Elementorとコンタクトフォーム7を使って、お問い合わせページを作成することができます。デザイン性の高いお問い合わせページを作成したいと考えているのであれば、この記事を参考にしてみてください。ステップバイステップになっているので、比較的簡単に作成可能です。

【限定】Elementorの使い方を網羅的に解説したオンラインコースが”無料”で受講できます。詳しくはこちら>>>
Elementorでお問い合わせページを作成する方法

(↑Pinterestでシェアお願いします!)

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

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

関連記事Elementorの基本的な使い方に関しては、「【完全版】無料で使えるページビルダープラグイン・Elementorの使い方」をご確認ください。

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

  • Elementor
  • Contact Form7(コンタクトフォーム7)

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

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

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

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

7で作成したフォームのショートコードをコピー

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

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

scaled

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

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

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

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

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

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

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

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

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

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

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

scaled

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

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

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

 

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

7のショートコードを設定

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

Step5. フッターを作成する

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

5カラムを選択する

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

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

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

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

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

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

まとめ

ということで、今回ご紹介した手順でやると、右(モバイルだと上)にあるようなページが作成できます。Elementor単体では、お問い合わせページは作成できませんが、コンタクトフォーム7を組み合わせることによって作成が可能です。ぜひ、あなたのビジネスにも活用してみてください。

Elementor)

Elementorの使い方を動画レクチャーで網羅的に学びませんか?
 

無料でオンラインコースを受講できます。

・Elementorのウィジェットの使い方

・ランディングページの作り方

・テンプレートの使い方

 

以下のボタンから、無料でオンラインコースに登録し、今すぐアクセスしてください。

0コメント

コメントを提出

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Elementorの使い方

無料でElementorの使い方を網羅的に学びませんか?
 

基本的なウィジェットの使い方から、ページを作成する方法までカバーしています。デザイン性の高いランディングページの作成を考えている方にオススメです。 下のボタンから無料で受講できます。

かっこいいLP作りたくないですか?

Elementorの使い方を"無料"で学びませんか?

プロのようなランディングページが作れるElementorの使い方が無料で受講できます。