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

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

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

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

Form Name

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

コンテンツ設定

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

タイプ

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

Label

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

Placeholder

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

Required

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

カラム幅

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

詳細設定

「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（提出ボタン）の使い方

「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の使い方

フォームを提出してもらった後、どんなアクションを取るか設定します。一般的には、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を使用し、連携できるようになります。

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

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

Form ID

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

Custom Messages

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

Success Message

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

Error Message

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

Required Message

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

Invalid Message

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

スタイルのフォーム設定

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

カラムのすき間

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

Rows Gap

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

Label設定

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

スペース

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

文字色

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

書体

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

スタイルのFieldの使い方

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

文字色

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

書体

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

背景色

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

ボーダー色

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

ボーダー幅

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

ボーダー丸み

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

スタイルのボタン設定

「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設定

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

書体

テキストの書体

Success Message Color

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

Error Message Color

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

Inline Message Color

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