更新日: 2022 / 03 / 07

Elementorで問い合わせフォームを設置する方法

カテゴリー: Elementor

ホームページに問い合わせフォームを設置するならWordpressのプラグインを使うのが一番簡単です。

Elementorなら画面にウィジェットを配置してショートコードをコピペするだけでなのでコーディング不要で問い合わせフォームを作ることができます。

このページではElementorを使ってWordpressに問い合わせフォームを設置し動作確認を行うまでを解説します。

このほかにもElementorを使ったレスポンシブデザインのやり方や、スタイル済みのフォームテンプレートを「Elementorの使い方 初心者入門ガイド」で紹介していますのでぜひご覧ください。

Elementorでフォームを設置するには?

Wordpressのプラグインを使ったフォームの設置方法は、テンプレートにショートコードを記入したり、固定ページに貼り付けたりといった方法があります。

Elementorではページにウィジェットを配置して、プラグインで作ったフォームのショートコードをコピペするだけで簡単に問い合わせフォームを作成できます。

Elementorでフォームを設置するには?

ショートコードでフォームを設置できるプラグイン一覧

ショートコードを使って問い合わせフォームを設置できるプラグインはたくさんあるので、とくにおすすめなプラグインを3つだけ紹介します。

ContactForm7

Wordpressで最も多くダウンロードされているプラグインです。基本的なフォームパーツ(ラジオボタンやファイルアップロードなど)が一通り揃っているのでシンプルなフォームをすぐに作成することができます。

作成できるフォームに制限もないため、これ1つで複数のフォームを使い分けることも可能。

ContactForm7

ショートコードでフォームを設置できるプラグイン一覧 ContactForm7

WPForms

WPFormsもWordPressでよく使われているコンタクトフォームプラグインの1つです。フォームビルダーが非常によくできており、大量のテンプレート(有料のものあり)からフォームを作成することもできます。

WPForms

ショートコードでフォームを設置できるプラグイン一覧 WPForms

Ninja Forms

WPFormsがちょっとできること多すぎで複雑だなと感じる方は「Ninja Forms」がおすすめ。シンプルなUIでサクサクフォームを作成することができます。

Ninja Forms

ショートコードでフォームを設置できるプラグイン一覧 Ninja Forms

ContactForm7を使ってElementorにフォームを設置する方法

ここからは実際に完全無料で使えてシンプルなContactForm7を使って問い合わせフォームを設置してみます。

インストール方法

インストール方法は通常のWordpressプラグインと同じです。Wordpress管理画面の「プラグイン > 新規追加」でプラグイン追加画面を表示します。

プラグイン追加画面で「Contact Form 7」と入力するとプラグインが表示されるので「今すぐインストール」でインストールし、「有効化」でプラグインを有効化してください。

ContactForm7を使ってElementorにフォームを設置する方法 インストール方法

フォームの作成

インストールと有効化が完了すると、Wordpress管理画面のメニューに「お問い合わせ」という項目が追加されるので「コンタクトフォーム」を押して編集ページを開きます。

ContactForm7を使ってElementorにフォームを設置する方法 フォームの作成

あらかじめ登録されているフォームの「編集」リンクをクリックして編集画面を開くと、タイトルの下にフォームのショートコードが表示されるのでコピーしておきます。

フォームの設置

次にElementorの編集画面を開いて、ウィジェット一覧の「一般」にある「ショートコード」ウィジェットを設置します。

ContactForm7を使ってElementorにフォームを設置する方法 フォームの設置1

左パネルに入力フォームが表示されるので、そこに先ほどコピーしたショートコードを貼り付けます。

ContactForm7を使ってElementorにフォームを設置する方法 フォームの設置2

すると画像のようにフォームが表示されました。これだけで問い合わせフォームの設置は完了です。

設置したフォームのスタイリングは?

プラグインで作成したフォームはそのまま使っても問題なく動作するのですが、見た目をもう少しホームページのデザインに合わせたい場合があります。

Elementorでフォームのデザインを変更するには「HTML」ウィジェットをページに設置してCSSコードを記入すればOKです。

Elementor 設置したフォームのスタイリングは?

フォームのデザイン例の探し方

Google検索で「フォーム css サンプル」のように入力して画像検索すると、問い合わせフォームのデザイン例を見ることができます。またPinterestでも同じようにフォームのデザインを探すことができるので参考にしてみてください。