What code should you copy and paste into the Email Template area in Webflow in order to make your form template visually appealing?

Published on
September 22, 2023

To make your form template visually appealing in the Email Template area in Webflow, you can customize the HTML and CSS code. Here is the code that you can copy and paste:

  1. HTML Code:
<div style="width: 100%; max-width: 500px; margin: 0 auto; padding: 20px; font-family: Arial, sans-serif; background-color: #f7f7f7;">  <h2 style="color: #333;">Contact Form Submission</h2>  <p style="color: #777;">You have received a new contact form submission:</p>    <table style="width: 100%;">    <tr>      <td style="padding: 10px; font-weight: bold;">Name:</td>      <td style="padding: 10px;">{{formData.name}}</td>    </tr>    <tr>      <td style="padding: 10px; font-weight: bold;">Email:</td>      <td style="padding: 10px;">{{formData.email}}</td>    </tr>    <tr>      <td style="padding: 10px; font-weight: bold;">Message:</td>      <td style="padding: 10px;">{{formData.message}}</td>    </tr>  </table></div>
  1. CSS Code:
body {  margin: 0;  padding: 0;}table {  border-collapse: collapse;  width: 100%;}table td {  border: 1px solid #ccc;  padding: 10px;}h2 {  margin-top: 0;}p {  margin: 0;}

This code creates a visually appealing email template for your form submission. Here's a breakdown of what it does:

  • The div container sets the width, max-width, margin, padding, font-family, and background-color of the email template.
  • The h2 and p tags define the styles for the heading and paragraph text.
  • The table and td tags create a table structure to display the form data.
  • The inline styles within the td tags set the padding and font-weight for the table cells.
  • The CSS styles at the bottom set some basic formatting for the email template, including collapsing the borders of the table cells and resetting the margin and padding of the body.

By using this code and adjusting the styles to fit your design preferences, you can make your form template visually appealing in the Email Template area in Webflow.

Additional Questions:

  1. How do I customize the styling of a form template in Webflow's Email Template area?
  2. Can I use custom fonts in the Email Template area in Webflow?
  3. Is it possible to add images to the form submission email template in Webflow?