Helpful resources
            
           
              Need more help?
             
             
              Check out the Webflow community.
             
            
              Free Webflow templates
             
             
              The best free Webflow templates.
             
            
              Hire a Webflow expert
             
             
              Partner with a certified expert.
             
            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:
- 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>
           - 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
             
divcontainer sets the width, max-width, margin, padding, font-family, and background-color of the email template. - 
             The
             
h2andptags define the styles for the heading and paragraph text. - 
             The
             
tableandtdtags create a table structure to display the form data. - 
             The inline styles within the
             
tdtags 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:
- How do I customize the styling of a form template in Webflow's Email Template area?
 - Can I use custom fonts in the Email Template area in Webflow?
 - Is it possible to add images to the form submission email template in Webflow?