こんにちは根本です。今回はElementor Proの
フォームウィジェットの基本的な使い方を
ご紹介していきたいと思います
このフォームウィジェットはいろんな使い方ができるんですけど
今回基本的な操作だったりとかよく使う設定について
ご紹介していきますのでElementor Proを使って
お問い合わせフォーム等を作成しようと思っている方
ぜひ参考にしてみてください

フォームウィジェットパターン紹介

フォームウィジェットは大きく分けると2つあります
シンプルなこんな感じのお問い合わせフォームを作成するパターン
それからマルチステップと言って複数のステップに分けて
お問い合わせをしてもらったりとか
あとはお問い合わせをもらうだけではなくて
メルマガリストを獲得するための
オプトインフォームっていうのも作成することができます

Form Fields設定

じゃあそのデザインの仕方をご紹介していきます
じゃまずはフォームウィジェットをドラッグ&ドロップで追加します
まずForm Nameってとこなんですけど
これはそのままでOKです
もし必要があれば管理しやすい名前つけておいてください
でデフォルトで名前とメールとメッセージって3つ追加されています
新しく項目追加したい場合はこっちからボタンをクリックして
タイプのドロップダウンから好きなものを持ってきてみてください
例えばRadioボタンを持ってきたりですね
Radioボタン追加する場合はまずLabelっていうところで
まあ選択してくださいっていうのはそういう文言を追加して
オプションのところでその選択肢を複数用意します
はい。で複数用意する場合は改行することで
自動的にこんな感じで複数の設定できます
でその上にRequiredっていうのがあるんですけど
これは必須にするかどうかですね
提出した時にここがはいになっていて何も選択されていないと
フォームが提出できない。そういう機能になります
でRadioボタンの場合はInline Listっていうことで
これをはいにすると横一列で並べることができます
で名前とかメールの設定はというとまずLabelで
Fieldの上に表示するタイトル
でPlaceholderで中身ですねが設定できます
メールも同じです。メールは英語になっているので
Emailアドレスとか
もしくはinfo@example.com
みたいな感じで例を載せておくのもいいかもしれません
でこの名前とメールアドレス結構短いと思うんですね
なので半々で1列に載せたいっていう場合あると思います
それどうすればいいかっていうとカラム幅を調節します
例えば50%にして名前を50%にすると
こんな感じでインライン化することができます
じゃあその次移動してInput Sizeですね
これ入力する際の文字の大きさになります
そのしたLabelはこのタイトルの部分ですね
それを表示するのか非表示するのかっていう設定で
Requiredにチェック入れた場合はアスタリスクを
つけるかどうかがその下でできます
Labelの表示非表示なんですけどこれ直接このLabelを
消すことでも対応できます
好きなようにやってみてください
これがForm Fieldsの設定ですね

Buttons設定

次Buttonsではまずサイズ。大きさ。それからカラム幅ですね
そして配置で左に寄せたり中央に寄せたり右に寄せたりいうのを
やってみてください。まあ多いものとしてはこの右と一番右のやつですね
のどちらかを使うことが多いんじゃないかなと思います
で次Stepオーダーってとこなんですけど
これはあのちょうどやっていきます
このマルチステップっていう複数のステップに分けて
フォームを提出してもらうっていう時に使うんですけども
のちほどやっていきます
まずSubmitですねsendになっているので
送信とかあとは提出とかそういう文言にしておきます
あとButtonsにアイコンが追加できてその場合はアイコンの
アイコンライブラリーですね
例えばarrowっていうふうに入力して矢印を追っていきます
であとはそのアイコンの位置を後ろに持ってきてこんな感じで
設定してみたりですね。っていうのをやってみてください
あとアイコンとテキストのスペースが調節できます

Actions After Submit設定

で次のActions After Submitに
ついてなんですけどここではお客さんがそのフォームを
提出した後にどういうアクションを取るのかっていう設定ができます
デフォルトでメールになってるんですけど
これはサイトの運営者にメールを送信するっていう
そういうアクションです
提出してもらった情報を自分のところサイトのオーナーに送る
そういう設定ですね

Redirect設定

他にもたくさんあって例えば僕がよく使うのは
このRedirectですね
例えばお問い合わせフォームで資料請求をしてもらって
その後に何かプレゼントを渡したいっていう場合ありましたら
Redirectを選択してそうするとRedirectのタブが
表示されますのでこちらでそのプレゼントを受け取る先の
URLを入力します
例えばGoogleドライブにPDFファイルをアップロードしておいて
そのファイルのURLをこちらに入力したりですね
っていうのができたりします

Email設定

でメールを自分のところに送信したいっていう場合は
メールのところで設定をしてみてください
まあ変更するところというとこのSubjectくらいですね
このダブルクォーテーションマークのとこのサイト名が入ります
なのでサイト名からのお問い合わせみたいな感じですね
このメッセージは特に変更する必要はないです
でもしお客さん宛てにも提出してもらった情報を確認メールとして
送りたいっていうのであればToのところで1回カンマ打ちます
そしてForm Fields開いてメールですねを開いてください
そして詳細に移動してこちらにショートコートがありますので
コピーしてきます。でもう一度Emailタブを開いて
カンマの後ろに入力します
そうすると自分宛てあとはお客さん宛てにもメールが届く
そういう仕組みになります

追加オプション設定

で一番最後追加オプションでは
Custom Messagesっていうのが設定できます
これ何かっていうとError Messageとか
Success Messageの設定ですね
デフォルトで英語になっているのでこれはいに切り替えて
設定しておくことをおすすめします
Success Messageはお問い合わせありがとうございました
みたいな感じですね
でError Messageはエラーが起こりました
Required Messageは記入が必須です
Invalid Messageは何かエラーが起きました
フォームは無効ですっていうそういう意味合いになっています
それぞれ日本語に変更しておいてください

マルチステップ設定

じゃあ次まあスタイルは後でご紹介していきます
マルチステップの方をお伝えしていきますね
マルチステップはどのように設定するかっていうと
まずForm Fieldsで+項目を追加
このボタンをクリックしてタイプで下の方に
Stepっていうのがありますのでこれを選択します
でまずは一番上にStepの1が表示されますので
LabelでそのStepのタイトルを入力します
そうするとこちらに表示されます
であとはそのStep1に表示したいフィールドを
こちらに残しておくんですけどStep2以降に持って行きたい場合は
ドラッグしてこんな感じで移動させてみてください
はいそしたらStep2の方も設定します
そうすると最初は名前とメールアドレスを登録してもらって
nextというボタンをクリックしてその後にメッセージの内容と
後はRadioボタンですねが表示されてリストから1つを選択してもらう
そういう形式になります
でその設定が終わったらSteps Settings
っていうところでタイプですね。ここのアイコンのタイプになります
Text形式にしたりとかIcon形式にしたりっていうのができます
まあデフォルトのナンバーとTextにしておきます
あとは形状の設定ですね
でこれが終わったらスタイルに移動します
スタイルでフォームの隙間こんな感じで
インライン化している場合ですね
Rows Gapは複数ある場合なんですけど
複数ある場合は縦のフォームの隙間の調節ができて
あとはLabelですねLabelとフォームの距離
あとは文字の色。Mark Color
Mark Colorって何かっていうとこのアスタリスクですねの色が
設定できて書体。でその下にあるHTML Field
これ何かっていうと今回設定していないんですけど
項目追加からタイプをHTMLにして何か表示したいものがあれば
ここにそのテキスト入力してみてください
僕はあんまり使わないのでどういう用途に使うのか
ちょっとわからないんですけどこんな感じで
HTML選んで表示しておきます
まあ使うとしたらもしかしたら何か注意書きをしておくのかなと
思います。こんな感じで設定しておいてスタイルに移動します
でHTML Fieldこちらでこんな感じで
Buttonとのスペースあとは色ですね
をこんな感じで設定してみてください
じゃあ次Fieldです。Fieldも同じように文字の色と書体
でその次の背景色はこのFieldの中身の色ですね
あとボーダー追加したい場合はこちらで設定をしてみてください
で次Buttonsの設定ですね
Buttonsの設定はNextとSubmit Buttonが
同じになっているんですけどマルチステップ
使っている方はPrevious Buttonの設定
その左の方ですねの設定もやっておいてください
で次のMessagesについてです
このMessagesは先ほど内容の追加オプションで
Message設定したと思うんですけど
そのMessageの色がこちらで設定できるようになっています
最後はStepsですね。Stepsはここの部分になります
ここのテキストを表示している場合はそのテキストの書体とスペース
Fieldとの距離ですね。あとはパディングなんですけど
これはアイコンを表示している場合ですね
でその下INACTIVEのところなんですけど
これは開いていない部分ですね
開いていないStepのメインカラーとサブカラー
でACTIVEのところでは開いている部分ですね
今Step1が開かれているんですけどそこのメインの色
とサブカラー。アイコンだったらこの隙間ですねの設定をします
でCOMPLETED一番最後のCOMPLETEDの部分は
終わった部分ですね。Step1だとこんな感じで表示されるんですけど
Step1の記入が終わった後ですね。終わったら
COMPLETEDで設定した色が表示されます
その次Divider Widthですね
Dividerの幅これ太ささあですね。それとGap
これは横幅の設定になります。ということで
これが基本的なフォームウィジェットの使い方になります
で冒頭の方でオプトインフォームメルマガリストを獲得するための
フォームを作成できるっていうことをお伝えしたと思うんですけど
それは次回やっていきたいと思います
ちょっと設定項目が多かったりとかEメール配信サービス側で
設定が必要だったりしますのでそれを次回のレクチャーで
ご紹介していきたいと思います