Elementor Proのフォームビルダーを使って購読フォームを追加する方法

Elementorビジュアルフォームビルダーは、コードを一切使わずに完全で美しいオンラインフォームを構築できるパワフルなツールです。

ドラッグ＆ドロップのフォームウィジェット

まずフォームウィジェットこれをページにドラッグすると、フォーム・ウィジェットはすぐに基本フォームを作成します。名前フィールド、メールアドレスフィールド、メッセージテキストエリア歌で応える送信ボタン.

コンテンツ > フォームフィールド

あるフォームオプションパネルでフォームフィールドのようなセクションでフォームの名前を付け始める。お申し込みフォーム".

次に、ウィジェットが挿入されたときに自動的に生成される3つのフィールドを見る：氏名、Eメール歌で応えるメッセージ.

一般的なリード生成フォームでは、メッセージフィールドは必須ではありません。Xで削除され、名前とEメールのフィールドだけが残ります。新しいフィールドを追加したい場合は「プロジェクトの追加ボタンで十分だが、この特別な例では2つのフィールドだけが必要だ。

では、各フィールドで利用可能なオプションを詳しく見てみよう。

フィールドタブの内容

類型論フィールドのエレメントタブの下で、以下のフィールドを選択できます。類型論.例えば、名前フィールドはコピーフィールド・タイプでは、1行のフィールドに標準的なテキストを入力することしかできない。一方、Eメール・フィールドはメールこれは、@やドットを含む、適切な電子メール書式を持つテキストのみを受け付けます。

タブ次のページタブオプション.これは必須ではありませんが、このテキストはフォームを送信したときに受信するEメールに表示されるため、表示するためにラベルを非表示にする場合でも、ラベルを提供することをお勧めします。

プレースホルダ次のページプレースホルダオプション。これは、訪問者がこのフィールドに何を配置するかを理解するためのオプションのテキストです。

必須項目フィールドを必須フィールドにしたい場合は必須項目トグルスイッチはそうだ。そうでなければを「いいえ」に設定してください。ほとんどの購読フォームでは、名前とEメールのフィールドは通常必須です。で御座います.フォーム・フィールド・セクションの一番下にある必須項目.フィールド・ラベルの横に典型的な赤いアスタリスクを表示させたい場合は、次のように設定する。表示する。必須マークの上には、表示または非表示のオプションがあります。タブそのものをオプションとする。もちろん、ラベルが非表示の場合、ラベルに添付されているため、必要なタグも非表示になる。

列幅多くの場合、狭い購読フォームが理想的なので、縦にスペースを取りすぎる代わりに、名前フィールドとEメールフィールドを同じ行に配置します。そのためには、名前フィールド属これでフィールドのオプションが開きます。フィールドの列幅が100%から50%に変更されました。メールフィールドは同じ動作をする。両方のフィールドの列幅を50%に設定した後、2つのフィールドを1行に並べて配置する。

フィールドの詳細タブ

では、フィールドをざっと見てみよう。高いレベルタブほとんどの場合、ここで調整する必要はない。

しかし、1つ注意すべき点がある。身分証明書このフィールドが空であってはならない。何らかの理由で空欄の場合は、ID名を手入力してください。IDがないとフォームは正しく動作しません。ショートコード包含ID名。特定のフィールドデータを送信したい場合は、このショートコードを送信するメールにコピー/ペーストしてください。デフォルトでは、メールは自動的に生成されたショートコードを使用します。[全分野］すべてのフィールドデータを送信する。ただし、電子メールに各フィールドのデータを送信したくない場合もある。この場合は、含めたいフィールドのショートコードを手動で入力することができる。

通常の購読フォームでは、各オプションにIDが割り当てられていることを前提として、これらの高度なオプションを保持することができます。

コンテンツ > ボタン

次にフォームボタンのオプションを設定します。ほとんどのシンプルなフォーム（このフォームのような）にはボタンが1つしかありません。だすボタンです。ただし、マルチステップのフォームを作成したい場合は、各ステップにもボタンを設置する必要があります。 

まずマグニチュード.このオプションは、いくつかの"みぜんにふせぐ"Style "は主にボタンのフォントサイズとパディングを設定します。これらは後でウィジェットの "Styles "タブで調整できますが、素早くセットアップするには、ここで選択します。

次に、ボタンの幅.小さなフォームの場合、通常は20%オプションが良い選択ですが、あなたの特定のスタイルに最適な幅を使用することをお勧めします。

このフォームはマルチステップフォームではないので、マルチステップボタンオプションは省略できます。フォームのだすフィールドにボタンのテキストを入力します。デフォルトはSendですが、他の一般的なオプションはSubscribe、Start、Registerなどです。

次に、必要に応じてアイコンボタンに表示されるだす「をテキストの横に追加する。アイコンの表示を選択すると、2つの新しいオプションが表示されます。アイコンの場所アイコンを "だす「本文の前か後か。アイコンの間隔アイコンと「送信」テキストの間隔を調整できます。

を追加したい場合もあります。ボタンIDは、必要に応じてカスタム・コードで使用します。通常、この項目は空白のままで、このデモのケーススタディでも空白のままです。

コンテンツ > 提出後の運用

このセクションでは訪問者がフォームを送信した後に実行されるアクションを追加することができます。主なデフォルトのアクションは、フォームデータを含むメールを送信することです。その他の典型的なアクションとしては、ユーザーを特定のページにリダイレクトしたり、サードパーティのマーケティングプラットフォーム (Mailchimp など) に接続したりすることがあります。この例では、これらのアクションをそれぞれ実行します。

メールアクション

上述したように、デフォルトは以下のように追加されている。Eメール操作。これは"操作の追加"エリアをクリックしてください。フォーム送信データをEメールで送信したくない場合は、「Eメール」の隣にあるXをクリックして、このアクションを削除してください。もちろん、通常はEメールでデータを送信したいので、このアクションはそのままにしておいてください。ここで、Actions After Submissionタブの下にEmailタブがあることに注目してください。追加された各アクションは、このタブの下に独自のオプションタブを作成します。 

Emailタブにはいくつかのオプションがあります。

MailChimpのアクション

これらの設定が整ったことを確認したら、次は別のアクションを追加しましょう。今度は"提出後のオペレーション"タブをクリックし、Emailの隣のフィールドをクリックしてドロップダウンオプションを開きます。この例では、Mailchimpを選択します。メールチンプをクリックして新しいタブを開きます。タブをクリックして開きます。

このメッセージは、MailChimpとの統合が設定されていない場合に表示されます：

統合設定でMailChimp APIキーを設定します。カスタムを選択することで、別のMailChimp APIキーを設定することもできます。

をクリックするだけです。"統合設定"リンクをクリックすると新しいブラウザのタブが開き、MailChimp APIキーを入力できます。 

キーが設定されると、フォームのMailChimpタブにあるドロップダウンリストから選択できるようになります。聴衆リストに追加します。そうすることで、ユーザーがフォームを送信すると、自動的にユーザーの名前とメールアドレスがMailChimpのリストに追加されます。

リダイレクト操作

最後に、"提出後の業務"オープン「提出後の作業"タブでフィールドをクリックし、ドロップダウンリストから選択します。"リダイレクト"。これで下に新しい "Redirection "タブが追加されます。

クリック"リダイレクト"タブでオプションをオンにし、フォーム送信後にユーザーをリダイレクトさせたいページをURL.これは、この目的のために以前に作成された任意のページである可能性があります。この例では、サインアップしてくれたユーザーへのお礼と、提供されたフリーペーパーやそのダウンロード方法に関する情報をユーザーに提供するページとなります。

コンテンツ > 追加オプション

これは多段階のフォームではないので、直接スキップすることができる。「ステップ設定タブを開き「その他のオプションタブフォームIDは任意ですが、カスタムコードのIDを使ってこのフォームを探す必要がある場合は、ここにユニークなIDを入力できます。

カスタムメッセージをに設定します。で御座いますユーザーに送信される各メッセージに必要な特定の文言を入力できるようにするためです。エラーが発生しました」を「申し訳ありませんが、エラーが発生しました」に変更したい場合。
銘記カスタムメッセージは、ブラウザが独自のエラーを表示しない場合のバックアップメッセージです。多くの場合、ユーザーはこれらの特定のメッセージを見ることはありません。

ヘアスタイル

フォームが正しく動作するようになったので、いくつかのスタイルを追加できます。ウィジェットの"タイプ"タブ

を含め、フォームの各セクションをスタイリングすることができる。けいしきそのものだ、フォームフィールドそしてだす歌で応えるマルチステップボタンそしてメッセージ歌で応える動く(使用する場合）。

フォームをテストする！

好みのフォームスタイルに設定したら完了です。ページを公開または更新してフォームに入力し、期待通りに動作することを確認してください。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み