電子メールのインタラクティブフォームの究極のガイド

メールでインタラクティブフォームを作成する方法

しかし、HTMLメールキャンペーンにフォームをどの程度正確に実装しますか？ マークの方法を段階的に分解してみましょう。

1.基本を設定します

本当にシンプルなフレームワークから始めましょう。

最も基本的なレベルでは、フォームを機能させる2つの属性があります。

• アクション
  これは、フォームデータの送信先のランディングページまたは宛先を定義します。
• 方法
  データをその宛先に送信するには、GETリクエストまたはPOSTリクエストの2つの方法があります。 GETはメールでのサポートが優れていますが、覚えておくべきことが1つあります。GETメソッドを介してデータを送信する場合、基本的にそのデータをURLに添付するため、送信されたフォームデータはページアドレスフィールドに表示されます。 。

たとえば、フォームから名を送信すると、次のようなURLが作成されます。

 http://example.com?Fname=Mark

2.フォームフィールドを設定します

次に、サブスクライバーから収集する情報と、それを個々のフォームフィールドに変換する方法について検討する必要があります。

各フォームフィールドにはラベルが必要です。ラベルは、このフォームフィールドの目的をメールリーダーに伝える情報です。 読者に次のような名を尋ねるフォームフィールドの場合：

id =” fname”の要素のテキスト入力を収集しようとしています—そしてラベルfor =” fname”はこれら2つを接続しています。 ただし、一部のWebメールクライアントはコードを変更し、for＆idアプローチをサポートしていません。 彼らはクラスとID名にプレフィックスを追加するのが好きなので、IDが変更される可能性があり、for属性は変更されません。 結果：ラベルがIDと一致しなくなり、フォームが壊れます。 これを防ぐための簡単な解決策は次のとおりです。次のように、入力の周りにラベルをラップします。

次のような、いくつかの異なるタイプのテキスト入力から選択できます。

 <input type = "text">
<input type = "email">
<input type = "tel">
<input type = "number">
<input type = "url">
<textarea> </ textarea>

各フォームフィールドに適切なタイプの入力を選択すると、2つのことができます。モバイルで表示すると、必要な入力に一致するようにキーボードレイアウトを変更できます。 さらに、サポートされている場合は、いくつかの基本的な検証があります。

フォームを介して送信するすべての情報について、名前と値の2つを送信する必要があります。

• 名前：
  これは開発者が定義したフォームフィールドの名前であり、URL文字列を介して渡されます。
• 価値：
  フォームフィールドの名前に関連付けられた開発者またはユーザー定義の値。

上記の名の例を覚えていますか？ http://example.com?Fname=Markは、フォームフィールドの名（= name）の名「Mark」（= value）を送信するURLです。

フォームにコメント領域（name =” comment”）を追加しましょう。

form-submitの結果のURLは次のようになります。

 http://example.com?Fname=Mark&comment=hello

チェックボックスとラジオボタン

テキスト入力の設定方法はわかっていますが、フォームにチェックボックスまたはラジオボタンを追加したい場合はどうでしょうか。

チェックボックスの値はオプションです。 チェックボックスの値を定義しない場合、「オン」または「オフ」として送信されます。 これは機能しますが、受信側でデータを処理する方法に応じて、値を別の表現に更新することをお勧めします。

たとえば、サブスクライバーが利用規約に同意するためにチェックボックスをオンにした場合に、値「同意する」を送信するチェックボックスは次のとおりです。

 http://example.com?tc=agree

ただし、ラジオボタンの場合は値が必要であり、名前要素はラジオボタンをグループ化するものです。 この例では、ラジオボタンの2つのグループ（1つはラジオ用、もう1つはテレビ用）があり、各グループで1つのステーションを選択できます。

その最初のラジオボタンでチェックされているのを見つけましたか？ これが、事前に選択されたオプションとして表示するラジオボタンをマークする方法です。

オプションをグループ化する

ラジオボタンやチェックボックスをグループ化する場合は、フィールドセットと凡例が表示されます。

• フィールドセットは、関連するアイテムをグループ化します
• 凡例は基本的にそれらのアイテムのラベルです

この例では、お気に入りの色を選択するための一連のラジオボタンで赤と青のオプションから選択できます。

フィールドセットは、住所（番地、郵便番号、州、国）などのさまざまな情報をグループ化する場合に便利です。

ラジオボタンとチェックボックスのデフォルトのスタイルは良くありません。 どちらもかなり小さく表示されているため、多くの読者がアクセスできません。 そのため、上記では、デフォルトのラジオボタンのスタイルを選択したスタイルに置き換えることができるdivクラスを追加しています。

デフォルトのラジオボタンのスタイルを上書きする

ラジオボタンのデフォルトのスタイルを上書きするには、いくつかの手順が必要です。 それらを1つずつ分解してみましょう。

まず、次のスタイルを使用してデフォルトのラジオボタンを非表示にします。

デフォルトの入力を非表示にしたので、フォーカス入力状態を独自のスタイルに置き換えて、読者が注目している要素にハイライトまたはアウトラインを追加する必要があります。

そして最後に、通常のスタイルと同じようにボタンのスタイルを設定します。 ホバー効果を使用してボタンのスタイルを設定し、クリックを促す場合は、ここでもそれを行うことができます。 さらに、ラジオボタンの「チェック済み」状態にスタイルを追加して、チェック済みのラジオボタンとチェックされていないラジオボタンを簡単に区別できるようにする必要があります。

3.隠された情報を渡す

ユーザーが手動でフォームに入力しなくても、フォームを通過させたい情報がある可能性があります。 これには、名前、ユーザーID、電子メールアドレスなどの項目があります。 入力タイプ「hidden」を使用して、バックグラウンドで非表示の情報を渡すことができます—このアクションは、ユーザーが表示または変更することはできません。

たとえば、このコードビットは次のようなユーザーIDを渡します。

 http://example.com?user-id=U12345

4.フォームの送信

了解しました。フォームが作成されました。 今、私たちは読者がそれを提出する方法を必要としています。 これを行うには、入力タイプ「送信」とボタンタイプ「送信」の2つの方法があります。

どちらも非常によく似た機能を果たしますが、違いはテキストを配置する場所です。 入力タイプのルートを使用する場合は、テキストを値として設定する必要があります。 ボタンを使用している場合、送信コピーはボタン終了タグの直前に配置されます。

電子メールのインタラクティブフォームのフォールバック戦略

すべてのインタラクティブな電子メールについて、フォールバックを実施することが重要です。 フォールバックにより、フォームが完全に機能しないすべての電子メールクライアントで、フォームが非表示になり、代わりにフォールバックが表示されます。 フォームのモバイルサポートはまだ不十分であるため、すべてのLitmusメールのフォームをモバイルで非表示にし、インタラクティブフォーム機能をサポートする最も人気のあるメールクライアントで完全なインタラクティブエクスペリエンスをターゲットにすることを選択します。 言い換えれば、私たちは次のようなコードを実装しました…

• でインタラクティブフォームを表示します
  • アップルメール
  • Gmail（デスクトップWeb）
  • Yahoo（デスクトップWeb）
• フォールバックを示します：
  • すべてのOutlookとWindowsメール
  • すべてのモバイルデバイス

コードでは次のようになります。

CSS

HTML

例：実際のメールでインタラクティブフォームを見る

すべてが実際に動作しているのを知りたいですか？

このメールでは、読者がLitmusの専門家の1人と簡単に連絡できるようにするためのフォームを追加しました。

インディアナペイサーズはファンにフィードバックを求めています—メール内で：

しかし、コーディングできない場合はどうなりますか？

インタラクティブ機能、およびインタラクティブフォームなどの特に高度な要素には、かなりのコーディングスキルが必要です。 すでにメールコードに慣れているメール開発者の方は、このステップバイステップガイドが次のキャンペーンでフォームを実装するのに役立つことを願っています。

しかし、キャリアの初期段階にある多くのマーケターや電子メール開発者にとって、フォームなどのインタラクティブな要素を実装することは不可能な作業のように感じることがあります。 ただし、少なくともSalesforce Marketing Cloudでメールを作成している場合は、いくつかの良いニュースがあります。 マークとSalesforceの彼のチームは最近、Salesforceのコンテンツビルダーにフォームブロックを追加しました。これにより、マーケターはフォームをメールに追加し、ニーズに合わせてカスタマイズできます。コーディングスキルは必要ありません。 Salesforceをご利用の場合は、ぜひチェックしてみてください。

より多くの電子メールサービスプロバイダーは、マーケターがキャンペーンにインタラクティブな要素を簡単に実装できるようにしますか？ Salesforceの動的フォームブロックの立ち上げは、その方向への第一歩かもしれません。