E-mail notification templates

Introduction

Notification messages are based on customizable HTML templates.
When a form is submitted, Fox Contact completes your template with the data originating from the enquiry and applies your own css styles to obtain a well formatted notification message.



The bundled layout provides an optimal viewing experience across a wide range of devices, but the HTML + css scheme is so simple that any average experienced web designer should be able to further customize the notification message.




Email templates apply to both notifications: the email to the admin (under "Message delivery" section) and the customer's copy (under "Events" > "Send a copy to the submitter").
The template created for the notifications to the admin, is used in Joomla messenger delivery too.


Using images

When including images in your email template, keep in mind that the most of the email clients tend to block images by default, asking the user to actively turn on image viewing.
Remember to add the alt="" attribute to your images to display an alternative text when the image doesn't load. Having this text beneath your graphics makes possible convey the message contained in the graphic itself, even if the image doesn't show.

When coding HTML email or the related CSS, always use absolute references to http links and image sources:
HTML
<img src="https://www.website.com/images/logo.png">

CSS
background-image: url(https://www.website.com/images/logo.png);


Never use relative source links, since they are not supported in the email context:
HTML
<img src="images/logo.png">

CSS
background-image: url(images/logo.png);



Values based on Form fields and special variables

Special keywords can be placed along the subject and body of the notification email.
These keywords will be replaced by either field values from the submitted form, or other special values.
Here is the complete list of the available keywords.

Style

The stylesheet file administrator/components/com_foxcontact/layouts/fox/user_email_tmpl.css will be applied to all the email notifications.


Layout customization example

The following example shows how to re-create a spartan layout, looking like the plain text notifications used in older versions of Fox Contact.





Edit the file administrator/components/com_foxcontact/layouts/fox/user_email_tmpl.css replacing all its content with the following:



Client information

The default template includes the information about the client, such as Browser and IP Address at the bottom of the message.



To remove them from the message, search for the "Client Information" section at the end of the form fields.



Release notes

E-mail notification templates appeared for the first time on Fox Contact 2.5.23 in the 2.5 series, and 3.4.1 in the 3.x series.