メールテンプレートのスタイルをカスタマイズする方法

メール通知のメールテンプレートのスタイルをカスタマイズしますか？バージョン1.8.5以降、WPFormsにはメール通知用のテンプレートスタイルが多数用意されています。これらのテンプレートの詳細については、この発表投稿をご覧ください。

ただし、これらのテンプレートのスタイリングを拡張したい場合は、このチュートリアルで最適な方法を説明します。

デフォルトでは、WPFormsは各テンプレートの配色を変更したり、ヘッダー画像を追加したりする機能を提供しています。詳細については、このドキュメントをご覧ください。

プレーンテキストを除くすべてのテンプレートで、配色を設定したり、ヘッダーロゴをアップロードしたりするオプションが提供されます。WordPressダッシュボード » WPForms » 設定 » メールに移動して、テンプレートの選択やデザインのカスタマイズに関する設定を行います。

フォームの作成

まず、フォームを作成し、フィールドを追加する必要があります。フォームの作成にヘルプが必要な場合は、このドキュメントをご覧ください。

HTMLを使用したメールメッセージの変更

メール通知にさらにカスタマイズを追加したい場合、例えばメールテキストのラベルを太字にするだけであれば、フォームを編集し、フォームビルダー内の設定 » 通知タブで、メッセージフィールドを変更することで簡単に実現できます。メッセージフィールドの{all_fields}を次のように置き換えることができます。

名前: {field_id="0"}
メール: {field_id="1"}
メッセージ: {field_id="2"}

この応答を作成するために、スマートタグをメッセージフィールドで使用しています。完了したフォームフィールドをスマートタグとして使用する詳細については、このチュートリアルをご覧ください。

メールテンプレートのカスタマイズ

WPFormsのメールテンプレートの外観を変更したいが、コーディングは少し気が進まないという場合でも、心配いりません！技術的な詳細に深く踏み込むことなく、これを実現する簡単な方法があります。

メールテンプレートを、フォームがメッセージを送信する際の「服装」と想像してください。これらの服装は、子テーマのテンプレートファイルを調整することで変更できます。子テーマの作成方法の詳細については、この役立つガイドをご覧ください！

例えば、クラシックテンプレートに異なる背景色を付けたいとします。手順は次のとおりです。

ワードローブにアクセス: wp-content/plugins/wpforms/templates/emails/にあるclassic-style.phpファイルを探します。

コピー＆ペースト：そのファイルを子テーマのwpforms/emails/フォルダに配置します。これは、フォーム用のカスタムクローゼットを作成するようなものです。このフォルダを子テーマ内に作成する必要があります。

スタイルアップ：貼り付けたファイルを開き、好きなスタイルを追加できます。これは、フォームのメールにアクセサリーを選ぶようなものです。

では、なぜこれがクールなのでしょうか？追加したスタイルは、各メール要素のインラインCSSに魔法のように変換されます。これにより、さまざまなメールプラットフォームやデバイスでスタイルがうまく表示されるようになります。

ただし、プロのヒントとして、head要素にstyleタグを使用するのは避けてください。すべての環境でうまく機能しない可能性があります。詳細については、このリソースを確認してください。

もし、他のテンプレートをカスタマイズしたい場合は、各テンプレートはwpforms/emails/ディレクトリに独自のファイルを持っています。コピーして貼り付けて、スタイルを追加するだけです！プロバージョンのテンプレートはwp-content/plugins/wpforms/pro/templates/emails/で見つけて、子テーマのメールフォルダに持ってきましょう。

これで完了です！これで、あなたのフォームはあなたの好みに合ったスタイルで着飾られ、コーディングの知識は不要です。🌟

フッターテキストを変更または完全に削除したいですか？簡単なPHPスニペットで実現できます。メール通知フッターテキストの削除または変更方法のスニペットを確認してください。