Elementor Pro サブスクリプションフォーム完全実践チュートリアル

エレメンタ Visual Form Builder はコーディングなしで完全で美しいオンラインフォームを数分で作成できるパワフルなツールです。

この記事では、以下の3つの機能を持つシンプルな購読フォームを紹介します：

訪問者はメーリングリストに登録するための情報を入力することができます。
ユーザー情報は以下と同期されます。メールチンプおよびその他のサードパーティ製メールシステム
投稿に成功すると、eBook、ワークシート、ホワイトペーパーなどのプレゼント応募ページにジャンプします。

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

まず、「フォーム」を設定する。けいしきWidget "ウィジェットをページにドラッグします。ウィジェットはデフォルトで、名前、Eメール、メッセージ、送信ボタンを含む基本フォームを生成します。

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

フォームフォームパネルでは、フォームフィールドセクションでフォームの名前を設定することができます。

デフォルトでは、フルネーム、Eメール、メッセージの3つのフィールドが生成されます。

このフォームではメッセージフィールドは必要ありません。フィールドの右側にあるXをクリックして削除し、名前とEメールだけを残してください。フィールドを追加する必要がある場合は、「項目を追加」をクリックします。この例では、2つのフィールドだけが残ります。

フィールドの「コンテンツ」タブ

各フィールドは、内容を含めて個別に設定することができる：

タイプ名前フィールドはテキスト型、メールボックスフィールドは電子メール型、メールボックスフィールドは"@"と".と「.
ラベルページに表示されなくても、ラベルを設定することをお勧めします。ラベルは受信する通知メールに表示されます。
プレースホルダーフィールドのプロンプトテキストとして機能し、ユーザーに内容の入力を促します。
必須名前とEメールの両方を "Yes "に設定することをお勧めします。

Form Fields "の下部では、必須項目を示すアスタリスクを表示するかどうか、またラベルを表示するかどうかを設定することができます。ラベルを非表示にすると、アスタリスクも非表示になります。

列の幅: フォームをよりコンパクトにしたい場合は、NameとEmailフィールドを50%に設定することで、並べて表示することができます。

フィールドの詳細タブ

通常、改造は必要ない。しかし、注意が必要である：

フィールドのIDを空白にすることはできません。空欄の場合は手動で入力してください。空欄の場合、エラーが発生することがあります。
ショートコードには ID が含まれており、これをメッセージに挿入することで、対応するフィールドの内容を呼び出すことができる。デフォルトでは [全分野］ すべてのフィールド情報を挿入する。すべてのフィールド内容を挿入したくない場合は、目的のフィールドのショートコードを手動で呼び出すことができます。

通常、このような購読フォームはデフォルト設定のままで十分です。

コンテンツ > ボタン設定

ほとんどの基本的なフォームには、送信ボタンしかありません。複数ステップのフォームの場合は、他のステップボタンがあります。

サイズフォントやボタンの間隔を素早く設定できます。
幅実際の設定はページスタイルによって決まります。
ボタンテキストデフォルトはSendで、Subscribe、Get Started、Sign Upなどに変更できます。
アイコン設定ボタンの左右にアイコンを追加したい場合は、ここでアイコンを選択し、間隔を調整することができます。

ボタンID カスタム・コードの呼び出しに使用できるが、通常は空白にしておく。

コンテンツ > 送信後のアクション

このセクションでは、訪問者がフォームを送信した後に何をするかを定義します。例としては、電子メールの送信、接続メールチンプまたはジャンプページ。

電子メール電子メール通知（デフォルトで追加）

Eメールアクションはデフォルトで追加されています。通常はこのままにしておくことをお勧めします。Emailタブをクリックして設定してください：

受信メールボックス
メールタイトル
含まれるフィールド情報
メール内容のフォーマットなど

メールチンプへのアクセス

Mailchimpというアクションを追加してください。

送信後のアクション」のドロップダウンボックスをクリックし、Mailchimpを選択します。
Mailchimpタブが表示されます。
Mailchimpへのアクセスがまだ設定されていない場合は、以下の入力を求められます。エーピーアイキーを押します。エレメンタ設定ページで、APIキーを入力してください。

設定が完了したら、Mailchimpタブに戻り、オーディエンスリストを選択します。ユーザーがフォームを送信すると、その情報が自動的にリストに追加されます。

リダイレクト・ページ・ジャンプ

別のアクションを追加：リダイレクト。

送信後のアクション」で「リダイレクト」を選択します。
リダイレクトタブを追加したら、ジャンプアドレスを入力します。

このページは一般的に、ユーザーが資料を受け取るための手順やダウンロードリンクを提供するお礼のページです。

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

このフォームはマルチステップではないので、ステップ設定をスキップして直接追加オプションに進むことができます。

フォームIDこのフォームをカスタムコードで識別したい場合は、固有のIDを設定することができます。
カスタムメッセージ有効にすると、個人用のプロンプトテキストを設定できます。例えば、デフォルトのプロンプトを "Sorry, the submission failed, please try again later "に変更します。

これらの警告文は通常、ブラウザが独自のエラーメッセージを表示しない場合に表示されます。

スタイル > フォームスタイル設定

機能設定後、「スタイル」タブでスタイルを調整できます。

以下のセクションはカスタマイズ可能です：

フォームエリア（フォーム）
入力フィールド（フォームフィールド）
送信ボタン
メッセージ
ステップのスタイル（もしあれば）

フォームのテスト

スタイルの調整が完了したら、ページを公開または更新します。フォームが正しく送信されることを確認するため、ご自身で一度フォームに入力することをお勧めします。この購読けいしき情報収集、第三者アクセス、リターゲティング機能を含み、マーケティングシステムの不可欠な部分です。

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