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

Elementor Proのフォームウィジェットの使い方

執筆者 | 更新日 2020年02月10日 | Elementor Proの使い方 | 7 コメント

Elementor ProのFormウィジェット

Elementor Proのフォームウィジェットは、問い合わせフォームやアンケートなどを取ることができる機能になります。WordPressのプラグインには、「Contact Form 7」などのコンタクトフォームが作成できるものがありますが、Elementor Proでも同様のものが作成できます。また、ラジオボタンやチェックボックスなども設置することができるので、問い合わせフォームを作成するためのプラグインとアンケートを作成するためのプラグインをインストールしなくてもElementor proだけで完結することができます。

また、海外のEメールプロバイダーと連携することができるので、単にアンケートを作成するだけでなく、見込み客リストも一緒に集めることもできます。

【限定】Elementor Proの使い方を動画で網羅的に学びませんか?こちらから無料でコースを受講できます。

この記事で学べる内容

コンテンツのForm Fieldsの使い方

Elementor ProのFormウィジェットでForm Fieldsを設定する

「+ 項目を追加」ボタンをクリックすると、新規でフィードを追加することができます。同じフィールドを複製したい場合は、書類のアイコンをクリックします。削除する場合は、バツボタンをクリックします。フィールドの細かい設定をする場合は、それぞれのフィールドをクリックして開き、設定していきます。「コンテンツ」と「詳細」があります。

「CONTENT」には、「タイプ」、「Label」、「Placeholder」、「Required」、「カラム幅」の5つの設定項目があります。「ADVANCED」には、「Default Value」と「ID」、「ショートコード」の3種類あります。

Form Name

フォームに名前をつけることができます。フォームに表示されませんが、必要があれば、記入しておいてください。デフォルトでもOKです。

コンテンツ設定

Elementor ProのFormウィジェットでForm FieldsのCONTENTを設定する

「CONTENT」では、フィールドの追加や削除などフォームの基本的な設定を行います。

タイプ

ドロップダウンメニューから、フォームに追加したい情報を選択します。

Label

「Label」は、フィールドの上に表示される文言で、そのフィールドのタイトルみたいな感じです。デフォルトで英語になっているので、日本語に変更しておきましょう。「Name」なら「名前」、「Email」なら「Eメールアドレス」みたいな感じですね。

Placeholder

同様に、「Placeholder」でも文言を変更しておきましょう。こちらは、フィールド内部に表示される文言になります。

Required

デフォルトでは「いいえ」になっていますが、「はい」にすると、そのフィールドの記入が必須になります。

カラム幅

フィールドの幅を設定することができます。「20%」、「25%」、「33%」、「40%」、「50%」、「60%」、「66%」、「75%」、「80%」、「100%」、「Default」の11種類あります。ちなみに、上にあるフィールドと下にあるフィールドの幅をどちらも「50%」以下に設定すると、それらが1列に表示されます。

詳細設定

Elementor ProのFormウィジェットのForm Fieldsで ADVANCEDの設定をする

「ADVANCED」設定では、高度な設定をすることができます。でも、基本的には何もいじる必要はないと思います。

Default Value

フォームを利用する人全員に同じ文言を入力してもらう必要があれば、あらかじめ文字を入力しておくことができます。例えば、全員に「〇〇を希望します。」みたいに記入してもらうのであれば、「を希望します。」と入力しておけば、読者は「〇〇」だけ入力すれば済みます。

ID

基本的にデフォルトでOKです。でも、フィールドを複製した場合は、IDが「field_1」みたいに形式的なテキストになっているので、変更したい場合はユニークなIDを割り当てましょう。

ショートコード

ショートコードも基本的にデフォルトのままでOKです。もし「ID」を変更したのであれば、「[field id=”email”]」の「””」の中身を変更する必要があります。この「ショートコード」はどこで使うのかということですが、「Actions After Submit」で「Email」を選ぶと、通知メールを送る設定ができます。ここで、その通知メールでフォームのどの内容を受け取るか設定するんですけど、その時にこのショートコードを使う場合があります。

Fieldのタイプ

ドロップダウンに用意されている「Filed」は、以下の通りです。

テキスト

これは、シンプルなタイプのフィールドで、名前とかを入力します。

Email

Eメールアドレスを入力するフィールドです。

Text Area

テキストエリアで自由に文章を入力することができるフィールドです。

URL

URLを入力するフィールドです。

Tel

電話番号を入力するフィールドです。

Radio

ラジオボタン形式のフィールドで、設定した選択肢に1つにチェックを入れてもらいます。「Inline List」を「はい」にすると、横並びに、「いいえ」にすると縦並びにすることができます。

選択

ドロップダウン形式で1つの選択肢を選んでもらうフィールドです。「Multiple Selection」を「はい」にすると全部の選択肢が表示されます。

Checkbox

チェックボックス形式のフィールドで、これは「Radio」や「Select」フィールドと違って複数の選択肢を選べます。「Inline List」にチェックを入れると選択肢が横並びになります。

Acceptance

条件を入力して、ユーザーに許可をもらうためのフィールドです。例えば、条項を読んで同意してもらう時とかにしようします。

番号

番号を入力するためのフィールドです。「Min. Value」に最小値、「Max. Value」に最大値を入力します。そして、ユーザーに設定した数値の内1つの数字を選んでもらいます。

Date

日付を選択するフィールドです。「Min. Date」に最初の日付、「Max. Date」に最後の日付を入力して、その間の日付を選択してもらいます。「Native HTML5」を「はい」にすると、フィールドの表記が「年/月/日」になり、ドロップダウンをクリックするとカレンダーが表示され、日付を選択できるようになります。

Time

時間を選択してもらうためのフィールドです。「Native HTML5」を「はい」にすると、「–:–」という表記になります。

File Upload

ファイルをアップロードしてもらいたい時に使用するフィールドです。「Max. File Size」にファイルの大きさの最大値を入力します。「Allowed File Type」では、許可するファイルタイプを入力します。「Multiple Files」を「はい」にすると、複数のファイルをアップしてもらえるようになります。「Max. Files」では、アップロードできるファイルの数に上限を設けることができます。

Password

パスワードのフィールドを追加することができます。

HTML

HTMLを使ってフィールドを追加したい場合はこれを使います。もしくは、注意書きなどをしたい時にも使えます。

Hidden

隠しフィールドを追加できます。ユーザーには、見えませんが、Adminユーザーには見えます。

reCAPTCHA

reCAPTCHAを追加できます。ユーザーがロボットでないか確認したい場合に、追加します。

Honeypot

フォームに「Honeypot」を追加できます。スパムを防止するためのものです。

Input Size

フィールドの高さを設定できます。

Label

「SHOW」にするとフィールドのラベルを表示、「HIDE」にすると非表示にすることができます。

Required Mark

フィールドに入力必須マークをつけることができます。

Submit Button(提出ボタン)の使い方

Elementor ProのFormウィジェットでSubmit Buttonを設定する

「Submit Button」では、提出ボタンの設定を行います。

テキスト

ボタンに表示するテキストを設定できます。単純に「提出」で良いのかなと思います。

サイズ

  • 微小
  • 特大

提出ボタンの大きさを設定できます。上記のの5種類あります。

カラム幅

ボタンの幅を設定できます。「20%」、「25%」、「33%」、「40%」、「50%」、「60%」、「66%」、「75%」、「80%」、「100%」、「Default」の11種類ありますので、好きな大きさにしておきましょう。もし、2つのフィールドを1行に並べたい場合は、「50%」以下の設定にすると良いです。

配置

ボタンの位置設定ができます。「左」、「中央」、「右」、「均等割付」の4種類あります。

アイコン

ボタンにアイコンを追加できます。「アイコンを選択」というボタンをクリックすると、ドロップダウンが表示されますので、その中から表示したいアイコンを選択します。

アイコンの位置

アイコンの位置をテキストの「Before-前」か「After-後」に設定できます。

アイコンスペース

アイコンとテキストのスペースを設定できます。

ボタンID

ボタンにIDを付与したい場合は、こちらにIDを入力します。基本的には空白のままでOKだと思います。

Actions After Submitの使い方

Elementor ProのFormウィジェットでActions After Submitを設定する

フォームを提出してもらった後、どんなアクションを取るか設定します。一般的には、Eメールを例えば、ポップアップを表示したり、Eメールを送信したり、リダイレクトしたり。「Add Action」から好きなアクションを選択して、設定していきましょう。設定したアクションは、この「Actions After Submit」の下に表示されるので、クリックして開いて細かい設定をしていきます。

Email/Email2

「Email」と「Email2」はほとんど同じで、フォームに登録してくれた人やWordPressの管理者に送信するメールの設定ができます。

Redirect

サンキューページやワンタイムアップセルページ、スクイーズページなどにリダイレクトすることができます。

Webhook

「Webhook」は、Zapierと連携することができます。Zapierは、いろんなサービスを連携することができるサービスなので、自分の目的に応じて連携してみてください。

Slack

登録してもらったデータをSlack(チャットアプリ)に送信できます。

Discord

登録してもらったデータをDiscord(チャットアプリ)に送信できます。

Popup

Elementor Proではポップアップを作成することができるんですけど、作成したポップアップを表示・非表示することができます。

その他にもMailChimpやDrip、Hubspot、ConvertKit、ActiveCampaign、GetResponseなどのサードパーティーのEメールプロバイダーを選択し、連携することができます。もし、用意されていないサービスと連携したい場合は、WebhookでZapierを使用し、連携できるようになります。

コンテンツの追加オプション設定

Elementor ProのFormウィジェットでAdditional Optionsを設定する

「Additional Options」では、フォームのIDやフォームに入力してもらう時、提出してもらった後に表示するメッセージの設定ができます。特に、メッセージはデフォルトで英語になっているので、変更することをお勧めします。

Form ID

フォームのIDを設定できます。

Custom Messages

「はい」にすると、フォームに入力した際のメッセージを入力することができます。デフォルトの文言は英語になっているので、「はい」に切り替えて、次の文言を設定することをお勧めします。

Success Message

これは、フォームが提出された時に表示する文言です。「フォームが無事に提出されました。」とか「ありがとうございます。」みたいな文言に設定しておくと良いと思います。

Error Message

これは、記入している最中にエラーが起きた時に表示するメッセージです。

Required Message

「Form Fields」のフィールドをクリックすると「Required」という項目があります。この項目を「はい」に切り替えるとフィールドに記入するのが必須になります。この設定をした時に、そのフィールドの何も入力せずにフォームを提出しようとした際に、「Required Message」で設定した文言が表示されます。「記入が必須です。」みたいな文言を設定しておきましょう。

Invalid Message

フォームが何かしらの理由で無効になっている場合に表示する文言を設定します。「問題が発生しました。このフォームは無効です。」みたいに設定しておくと良いと思います。

スタイルのフォーム設定

Elementor ProのFormウィジェットでスタイルのFormを設定する

ここでは、フィールドのスペースやラベルの設定を行います。

カラムのすき間

フィールドを1行に2つ以上追加している場合は、それらのスペースが設定できます。

Rows Gap

上下のフィールドのスペースが設定できます。

Label設定

フィールドのラベルに関する設定になります。

スペース

ラベルとフィールドのスペースが設定できます。

文字色

ラベルテキストの色を設定できます。他のところでもそうですが、16進数のカラーコードを入力することができるので、ブランドカラーをお持ちの方はここに入力しても良いかもしれません。

書体

ラベルテキストの文言を設定できます。

スタイルのFieldの使い方

Elementor ProのFormウィジェットでスタイルのFieldを設定する

「Field」では、フィールドのテキストカラーや書体、背景色などを設定していきます。

文字色

フィールド内部のテキストカラーを設定します。

書体

フィールド内のテキストの書体が設定できます。

背景色

フィールド内部の背景色が設定できます。

ボーダー色

フィールドのボーダーカラーが設定できます。

ボーダー幅

ボーダーの太さを調節することができます。もし、4つの辺を別々に調整したい場合は、右の「値をまとめてリンク(チェーンのアイコン)」をクリックします。

ボーダー丸み

ボーダーの角の丸みを調節できます。「ボーダー幅」と同様に、4つの辺を別々に調整したい場合は、右の「値をまとめてリンク(チェーンのアイコン)」をクリックします。

スタイルのボタン設定

Elementor ProのFormウィジェットでスタイルのButtonを設定する

「NOMAL」と「HOVER」がありますが、「NOMAL」は通常時のボタンの状態で、「HOVER」はマウスカーソルが置かれた時のボタンの状態の設定になります。

背景色

ボタン本体の色を設定します。

文字色

ボタンのテキストカラーが設定できます。

書体

テキストの書体を設定できます。

ボーダータイプ

ここではボーダーのタイプを選択できます。「なし」、「直線」、「二本線」、「点線」、「破線」、「溝」の6種類から選択可能です。

ボーダーの幅を設定できます。

ボーダーの色を選択できます。

ボーダー丸み

ボーダーの丸みを設定できます。

テキストパディング

テキストとボーダーのスペースが調節できます。

アニメーション

「Animation」は、「HOVER」のみの設定項目です。マウスカーソルがボタンに置かれた時のアニメーションが設定できます。ドロップダウンから好きなアニメーションを設定してみてください。

  • Grow
  • Shrink
  • Pulse
  • Pulse Grow
  • Pulse Shrink
  • Push
  • Pop
  • Bounce in
  • Bounce out
  • Rotate
  • Grow Rotate
  • Float
  • Sink
  • Bob
  • Hang
  • Skew
  • Skew Forward
  • Skew Backward
  • Wobble Horizontal
  • Wobble To Bottom Right
  • Wobble To Top Right
  • Wobble Top
  • Wobble Bottom
  • Wobble Skew
  • Buzz
  • Buzz Out
  • なし

これらのアニメーションが用意されています。

スタイルのMessages設定

Elementor ProのFormウィジェットでスタイルのMessagesを設定する

「コンテンツ」の「Additional Options」でメッセージの設定をしましたが、そのメッセージテキストの書体や色などを設定していきます。

書体

テキストの書体

Success Message Color

サクセスメッセージの色を設定できます。

Error Message Color

エラーメッセージの色を設定できます。

Inline Message Color

インラインメッセージの色を設定できます。

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

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

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

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

・テンプレートの使い方

 

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

7 コメント

  1. 白井晴貴

    初めまして、記事の方を読ませていただきました。
    Elementor Proの購入を検討しているのですが、疑問点がございます。
    もし可能でありましたら教えていただけないでしょうか?

    〇疑問点
    Elementor ProでWebページを作成後、1年間の契約期間が切れた場合、
    作成したWebページはどうなるのでしょうか?
    1.変わらない(プラグインのインストールが1年)
    2.Proのウィジェットで作成した部分が正しく表示されなくなる
    3.表示は変わらないが、Proのウィジェットで作成した部分を編集できなくなる

    返信する
    • 根本耕輔

      コメントありがとうございます。契約が切れると、3になるみたいです。表示は変わらないのですが、アップデートしないと不具合が生じる可能性がありますのでご注意ください。

      返信する
  2. 四葉のクローバー

    初めまして。ご質問させてください。
    Elementor Proを使用してFormを作成しています。

    一通り作成して稼働させようと思い、試しにメッセージ送信のテストをしたのですが
    どうしても受信できません。メッセージ送信を押したらメールが届くようにしたいのです。

    ElementerのEmailの設定部分、またワードプレス そのものの設定なども
    もし可能でありましたら教えていただけないでしょうか?

    返信する
    • 根本耕輔

      コメントありがとうございます。基本的にはデフォルトのまま記事を公開してしまえば、メールは届くはずです。確認していただくものがあるとすれば、「Email」タブの「To」でメッセージを受け取りたいアドレスを記入されているかどうかということくらいかと思います。この設定をしても届かないのであれば、レンタルサーバー側の問題かもしれません。

      返信する
  3. PARA

    初めまして、ご質問をさせてください。

    現在Elementor Proを使用し、フォームを作成しています。
    その際、郵便番号を入力すると自動で住所を入力されるようにHTMLを使用したのですが、
    メールで送信される際に郵便番号と住所が引き渡し出来ていないようです。

    どちらの設定を弄ればよろしいのでしょうか?

    返信する
    • 根本耕輔

      コメントありがとうございます。EmailタブのMessageで「[all-fields]」と入力されているのであればフォームの内容が全部送信されると思いますが、送信されないのであれば、何かしらのエラーが発生しているかもしれません。お手数ですが、Elementorのサポートにお問い合わせください。

      返信する
      • PARA

        ご返信ありがとうございます。

        そうですよね…色々調べてみたのですが例があまり無いようなのでそうしてみます。
        ありがとうございます。

        返信する

コメントを提出

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

Elementor Proの使い方

無料でElementor Proの使い方を

網羅的に学びませんか?
 

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

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