AI要約
WordPressサイトで、カスタマイズされたメール通知により顧客エンゲージメントを高めたいとお考えですか？わずか数ステップで、視聴者に永続的な印象を残すパーソナライズされたメール通知を作成できます。
このチュートリアルでは、WPFormsの通知メールをカスタマイズする方法を説明します。
この記事の内容
開始する前に、新規フォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスする必要があります。次に、基本的なフォーム通知設定を完了してください。
メールカスタマイズ設定へのアクセス
メール通知をカスタマイズするには、まずWPForms » 設定に移動し、メールタブをクリックします。
メール通知のカスタマイズ
メールタブをクリックすると、WPForms経由で送信されるメール通知をカスタマイズできるすべての設定が表示されます。次のセクションで各カスタマイズオプションについて説明します。
注意: 次のセクションの設定は、個々のフォームだけでなく、サイトのすべてのWPForms通知メールに適用されます。
メールテンプレートの選択
WPFormsは、通知メールの外観をカスタマイズするために使用できる多くのテンプレートを提供しています。
テンプレートセクションでは、WPFormsがサポートするすべての利用可能なテンプレートが表示されます。各メールテンプレートには独自のスタイルと機能があります。以下に、利用可能なテンプレートの概要を示します。
- クラシック
- コンパクト
- モダン
- エレガント
- テック
- プレーンテキスト
注意: モダン、エレガント、テックテンプレートを使用するには、有効なWPFormsライセンスが必要です。
デフォルトでは、すべてのメールはクラシック形式を使用します。ただし、ブランドスタイルに合わせてテンプレートと配色テーマを更新できます。
注意: WPFormsバージョン1.8.5以降にアップグレードする前にHTMLテンプレートを設定していた場合、デフォルトでレガシーテンプレートが選択されていることがわかります。このテンプレートは、配色テーマの設定やフォントファミリーの変更など、一部のモダンなスタイリングオプションをサポートしていません。詳細については、FAQセクションを参照してください。
テンプレートを選択するには、使用したいテンプレートにカーソルを合わせ、選択ボタンをクリックするだけです。この例ではモダンテンプレートを選択しますが、好きなものを選ぶことができます。
いつでもプレビューボタンをクリックして、各テンプレートが受信者の受信トレイでどのように表示されるかを確認できます。
これは、モダンなメールテンプレートの外観の例です。
コンパクト通知に切り替えたい場合は、テンプレートセクションからコンパクトを選択します。次に、プレビューをクリックして、どのように表示されるかを確認します。
これは、コンパクトメールの外観の例です。
プレーンテキストオプションは、通知メールからすべてのスタイルを削除します。テンプレートをプレビューすると、このようになります。
外観設定の調整
WPFormsでは、ブランドのスタイルに合わせて、ライトまたはダークのテーマでメール通知をカスタマイズできます。メールのビジュアルテーマを変更するには、[外観]セクションの[ライト]または[ダーク]オプションを選択するだけです。これにより、メールはユーザーの受信トレイで素晴らしく見え、ブランドとの一貫性を保つことができます。
好みの表示モードを選択したら、そのモードごとに独自のヘッダー画像、ユニークな配色、タイポグラフィを設定して、ライトとダークの両方のテーマでメールの一貫性があり魅力的な外観を確保できます。
注意：メールの外観は、デバイスのダークモード設定によって異なる場合があります。正確なプレビューを確認するには、デバイスの設定が選択した表示オプションと一致していることを確認してください。
メールヘッダー画像の 설정
通知メールにヘッダー画像またはロゴを追加したい場合は、[ヘッダー画像]セクションまでスクロールします。次に、[画像のアップロード]をクリックして、ヘッダー画像のファイルを選択します。
すべての画面サイズで最高の表示体験を得るために、幅300ピクセル、高さ100ピクセルの画像を使用することをお勧めします。
画像をアップロードした後、メール通知に使用する画像のサイズを選択するためのドロップダウンが表示されます。利用可能なサイズには、小、中、大が含まれます。これらのいずれかのサイズを選択すると、画像解像度が選択したサイズに合わせて調整されます。
画像はユーザーの画面にも調整されます。これは、モバイルデバイスから通知メールを表示している場合、画面サイズに合わせて調整されることを意味します。
詳細については、通知メールにヘッダー画像を追加するチュートリアルをご覧ください。
配色テーマの変更
WPFormsには、通知メールの要素の色をカスタマイズできる配色セクションがあります。以下に、利用可能なすべての配色について説明します。
背景
この色は、メールテンプレートの外観を制御します。以下は、明るい青色の背景色の例です。
本文
本文の色は、メールテンプレートコンテナの外観を制御します。これは、実際の通知メールが存在する領域です。以下は、本文コンテナに白の配色を使用した例の画像です。
テキスト
これは、通知メールのすべてのテキストに使用される色です。デフォルトの配色では、下の画像に見られるように、テキストは濃い色になります。
リンク
これは、通知メールのすべてのリンクの配色です。下の画像では、メールアドレスはリンクであり、リンクのデフォルトのオレンジ色を使用しています。
色のいずれかを更新するには、カラーフィールドにHEX値を入力するか、クリックしてカラーピッカーを開きます。
カラーピッカーを使用すると、好みに合わせて色を調整できます。
メールのタイポグラフィの更新
タイポグラフィは、サイトからの通知メールに使用されるフォントファミリーを制御します。WPFormsは現在、ゴシック体とセリフ体の両方のフォントをサポートしています。
メールテンプレートのフォントファミリーを更新するには、[タイポグラフィ]ドロップダウンをクリックし、使用したいフォントを選択します。
メールテンプレートのカスタマイズが完了したら、下にスクロールして設定を保存ボタンをクリックし、変更を保存してください。
メールテンプレートのプレビュー
変更を保存した後、プレビューしてユーザーの受信トレイにどのように表示されるかを確認できます。これを行うには、タイポグラフィのドロップダウンの下にあるメールテンプレートをプレビューリンクをクリックします。
これにより、新しいブラウザタブで通知メールテンプレートのプレビューが開きます。プレビューでは、構成したすべてのカスタマイズが適用されます。
ユーザーのデバイスがダークモードを使用するように構成されている場合、通知メールはユーザーのデバイスの外観に合わせて自動的に調整されます。
個々のフォームの通知のカスタマイズ
必要に応じて、フォームビルダーで特定のフォームのメールテンプレートをカスタマイズできます。これを行うには、目的のフォームを開き、設定 » 通知に移動します。
次に、下にスクロールして詳細設定をクリックし、詳細設定にアクセスします。メールテンプレートのドロップダウンメニューが表示されるはずです。
デフォルトでは、このオプションはサイト上のすべてのフォームでデフォルトテンプレートに設定されています。これは、設定ページから構成したグローバル設定がフォームで使用されることを意味します。
デフォルトテンプレートをオーバーライドするには、メールテンプレートのドロップダウンをクリックし、使用したいテンプレートを選択します。
または、テンプレートを表示リンクをクリックして、利用可能なすべてのテンプレートを表示することもできます。
表示されるオーバーレイで、特定のフォームに使用したいものを選択します。
完了したら、フォームを保存してテンプレートを更新してください。
注意: フォームビルダーからテンプレートを選択すると、テンプレートのデフォルトスタイルが適用されます。フォームビルダーからテンプレートの色やタイポグラフィをカスタマイズすることはできません。
よくある質問
これらは、通知メールテンプレートのカスタマイズに関するよくある質問への回答です。
HTMLテンプレートが表示されません。メールテンプレートライブラリに含めるにはどうすればよいですか？
WPForms バージョン 1.8.5 以降にアップデートする前に HTML テンプレートを使用していた場合、メール設定ページで HTML テンプレートが引き続き利用できる可能性が高いです。このテンプレートは、テンプレートセクションのレガシーという名前です。
レガシーテンプレートが表示されない場合は、テーマの function.php ファイルにカスタムフィルターを追加することで表示できます。以下は、サイトに追加するコードスニペットです。
/** * This code snippet forces using the Legacy email template that was called the "HTML" in v1.8.4 and below. */ $settings = (array) get_option( 'wpforms_settings', [] ); $settings['email-template'] = 'default'; update_option( 'wpforms_settings', $settings );
注意: 追加のガイダンスが必要な場合は、WPForms のカスタム PHP コードの追加に関するガイドを参照してください。
WPCode プラグインを使用している場合は、上記のコードをサイトに簡単にインポートできます。詳細については、コードスニペット統合チュートリアルを参照してください。
HTML テンプレートは WPForms バージョン 1.8.5 以降ではデフォルトでサポートされていないため、一部の新しいスタイリング オプションを適用することはできません。
テンプレートの背景色を更新することはできます。ただし、レガシーテンプレートでは、配色やタイポグラフィの設定はサポートされていません。
これで、フォーム通知メールをカスタマイズする方法がわかりました。
フォーム通知に関するその他のチュートリアルを探索して、それらを最大限に活用する方法を学んでください。