How to Customize Contact Form 7 for WordPress: Enhanced Email Template

Final product imageFinal product imageFinal product image
What You’ll Be Creating

In this short tutorial, I’ll show you a straightforward approach for customizing the email template sent from WordPress Contact Form 7 (CF7) plugin, making the emails it sends more readable.

As with my other Contact Form 7 tutorials, this one also expects that you are somewhat familiar with WordPress and this form plugin.

The Form Structure

Let’s assume that we have a form that consists of three input elements, a textarea element, and a submit button.

Here’s a possible implementation:

A Basic Email Template

Through the Mail tab, we set the email template that the recipient will receive upon successful form submission:

The mail tab of Contact Form 7The mail tab of Contact Form 7The mail tab of Contact Form 7

For our form, let’s say that we have the following basic template which includes only plain text and CF7’s shortcodes:

A simple message body for Contact Form 7A simple message body for Contact Form 7A simple message body for Contact Form 7

This means that the recipient will receive in their inbox emails that look like this:

The message that the recipient will receive in their inboxThe message that the recipient will receive in their inboxThe message that the recipient will receive in their inbox

This is totally fine and will work for most cases as the information is what matters and not the email design.

An Enhanced Email Template

Wouldn’t it be even nicer if the information received by the recipient was more readable and organized? Well, we can achieve this by replacing the previous message body with another one that uses a few structured HTML elements like table. As a necessary condition, we have to select the Use HTML content type checkbox as shown below:

An enhanced message body for Contact Form 7An enhanced message body for Contact Form 7An enhanced message body for Contact Form 7

Here’s the updated message body:

As you can see from the code above, for generating the email template we used inline styles and not some of the common table attributes that are now considered deprecated. Still, with these attributes in place, our layout will look the same according to my tests in two major email clients (see screenshots below). This makes sense given the fact that email development is still based on old-school HTML and doesn’t provide stable support for new CSS features.

With this modification, the recipient will receive the previous message in a tabular format. It’s worth noting that its appearance will slightly differ depending on the target email platform.

So, for instance, Outlook will show it like this: 

The enhanced message that the recipient will receive in their OutlookThe enhanced message that the recipient will receive in their OutlookThe enhanced message that the recipient will receive in their Outlook

Whereas Gmail will give it the following appearance:

The enhanced message that the recipient will receive in their GmailThe enhanced message that the recipient will receive in their GmailThe enhanced message that the recipient will receive in their Gmail

Obviously. more changes might be needed depending on the email layout you want to build. As a rule of thumb, remember to test the final email yourself across different email clients or at least the recipient’s (client’s) email client to ensure that they won’t have any problems accessing the collected data. As you probably know, implementing HTML email templates is a tricky and touchy process.

Conclusion

In this quick tip, we went through a simple technique for creating more structured and attractive email templates for Contact Form 7. I hope you found this approach interesting enough, and you will try it on WordPress sites that take advantage of this form plugin.

Lastly, don’t forget to look at other Contact Form 7 customizations here at Tuts+. As always, thanks a lot for reading!


This content originally appeared on Envato Tuts+ Tutorials and was authored by George Martsoukos

Final product imageFinal product imageFinal product image
What You'll Be Creating

In this short tutorial, I’ll show you a straightforward approach for customizing the email template sent from WordPress Contact Form 7 (CF7) plugin, making the emails it sends more readable.

As with my other Contact Form 7 tutorials, this one also expects that you are somewhat familiar with WordPress and this form plugin.

The Form Structure

Let’s assume that we have a form that consists of three input elements, a textarea element, and a submit button.

Here’s a possible implementation:

A Basic Email Template

Through the Mail tab, we set the email template that the recipient will receive upon successful form submission:

The mail tab of Contact Form 7The mail tab of Contact Form 7The mail tab of Contact Form 7

For our form, let’s say that we have the following basic template which includes only plain text and CF7’s shortcodes:

A simple message body for Contact Form 7A simple message body for Contact Form 7A simple message body for Contact Form 7

This means that the recipient will receive in their inbox emails that look like this:

The message that the recipient will receive in their inboxThe message that the recipient will receive in their inboxThe message that the recipient will receive in their inbox

This is totally fine and will work for most cases as the information is what matters and not the email design.

An Enhanced Email Template

Wouldn’t it be even nicer if the information received by the recipient was more readable and organized? Well, we can achieve this by replacing the previous message body with another one that uses a few structured HTML elements like table. As a necessary condition, we have to select the Use HTML content type checkbox as shown below:

An enhanced message body for Contact Form 7An enhanced message body for Contact Form 7An enhanced message body for Contact Form 7

Here’s the updated message body:

As you can see from the code above, for generating the email template we used inline styles and not some of the common table attributes that are now considered deprecated. Still, with these attributes in place, our layout will look the same according to my tests in two major email clients (see screenshots below). This makes sense given the fact that email development is still based on old-school HTML and doesn’t provide stable support for new CSS features.

With this modification, the recipient will receive the previous message in a tabular format. It’s worth noting that its appearance will slightly differ depending on the target email platform.

So, for instance, Outlook will show it like this: 

The enhanced message that the recipient will receive in their OutlookThe enhanced message that the recipient will receive in their OutlookThe enhanced message that the recipient will receive in their Outlook

Whereas Gmail will give it the following appearance:

The enhanced message that the recipient will receive in their GmailThe enhanced message that the recipient will receive in their GmailThe enhanced message that the recipient will receive in their Gmail

Obviously. more changes might be needed depending on the email layout you want to build. As a rule of thumb, remember to test the final email yourself across different email clients or at least the recipient’s (client’s) email client to ensure that they won’t have any problems accessing the collected data. As you probably know, implementing HTML email templates is a tricky and touchy process.

Conclusion

In this quick tip, we went through a simple technique for creating more structured and attractive email templates for Contact Form 7. I hope you found this approach interesting enough, and you will try it on WordPress sites that take advantage of this form plugin.

Lastly, don’t forget to look at other Contact Form 7 customizations here at Tuts+. As always, thanks a lot for reading!


This content originally appeared on Envato Tuts+ Tutorials and was authored by George Martsoukos


Print Share Comment Cite Upload Translate Updates
APA

George Martsoukos | Sciencx (2022-03-27T11:29:11+00:00) How to Customize Contact Form 7 for WordPress: Enhanced Email Template. Retrieved from https://www.scien.cx/2022/03/27/how-to-customize-contact-form-7-for-wordpress-enhanced-email-template/

MLA
" » How to Customize Contact Form 7 for WordPress: Enhanced Email Template." George Martsoukos | Sciencx - Sunday March 27, 2022, https://www.scien.cx/2022/03/27/how-to-customize-contact-form-7-for-wordpress-enhanced-email-template/
HARVARD
George Martsoukos | Sciencx Sunday March 27, 2022 » How to Customize Contact Form 7 for WordPress: Enhanced Email Template., viewed ,<https://www.scien.cx/2022/03/27/how-to-customize-contact-form-7-for-wordpress-enhanced-email-template/>
VANCOUVER
George Martsoukos | Sciencx - » How to Customize Contact Form 7 for WordPress: Enhanced Email Template. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/03/27/how-to-customize-contact-form-7-for-wordpress-enhanced-email-template/
CHICAGO
" » How to Customize Contact Form 7 for WordPress: Enhanced Email Template." George Martsoukos | Sciencx - Accessed . https://www.scien.cx/2022/03/27/how-to-customize-contact-form-7-for-wordpress-enhanced-email-template/
IEEE
" » How to Customize Contact Form 7 for WordPress: Enhanced Email Template." George Martsoukos | Sciencx [Online]. Available: https://www.scien.cx/2022/03/27/how-to-customize-contact-form-7-for-wordpress-enhanced-email-template/. [Accessed: ]
rf:citation
» How to Customize Contact Form 7 for WordPress: Enhanced Email Template | George Martsoukos | Sciencx | https://www.scien.cx/2022/03/27/how-to-customize-contact-form-7-for-wordpress-enhanced-email-template/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.