April 17, 2024

Customize Elementor Form Submissions with HTML

Play Video

Customize Elementor form submissions with HTML, ensuring that the emails you receive are not only informative but also pleasing to the eye and better aligned with your brand or personal preferences. When utilizing Elementor to craft forms on your WordPress site, you might find the default email notification format lacking in customization and style. Particularly, if your forms collect paragraphs or specific formatting, the default email can fall short. Fear not, as this tutorial will walk you through the process of creating some customized form outputs.


Please make sure you have the following installed and activated:

Why Customize Form Submissions?

Customizing HTML for form submissions can vastly improve both the functionality and aesthetic of your email notifications. Here are a few practical use cases to consider:

  • Personalized Email Layouts
    By customizing the HTML, you can create a unique layout that matches your brand identity or personal aesthetic. This can include adding your logo, using custom fonts, or even arranging the form submission data in a more visually appealing way than the standard list format.
  • Improved Readability with Custom Styling
    Custom HTML allows you to style different parts of the email differently. For instance, you could highlight important information, such as the respondent’s name or specific answers, in bold or a different color, making them stand out for quicker scanning.
  • Incorporating Rich Content
    Beyond simple text formatting, custom HTML enables the inclusion of rich content in your emails. This could range from embedding images (like a product the customer is inquiring about) to including clickable buttons (such as a call-to-action to view the submission in a dashboard or initiate a follow-up).
  • Conditional Formatting
    For more advanced users, custom HTML coupled with scripting or templating languages can allow for conditional formatting in emails. This means certain parts of the email can be shown or hidden based on the submission’s content. For example, if a customer indicates they’re interested in a particular service, you can include additional details or offers related to that service.
  • Accessibility Enhancements
    Custom HTML can also be used to make your email notifications more accessible. By using semantic HTML tags and proper structure, you can ensure that recipients who use screen readers or other assistive technologies can easily navigate and understand the email content.

Instructions to Customize Elementor Form Submissions with HTML

  1. Open the page with the Elementor form you wish to customize.
  2. Navigate to the ‘Form Fields’ and give your fields an ID (Field > Advanced > ID), (e.g., nameX, contactX, detailsX).
    Navigate to the 'Form Fields' and give your fields an ID

    Tip: Ensure that “Email” is selected as one of the ‘Actions After Submit’ actions.

  3. Go to the Email > Message to add your custom HTML (it includes all form fields by default using the shortcode [all-fields]).
    Go to the Email Message to add your custom HTML
  4. Replace the [all-fields] shortcode with your custom HTML structure. Here’s an example you can start with:
        <p><strong>Name:</strong> [field id="Namex"]<br></p>
        <p><strong>Contact:</strong> <a href="mailto:[field id="Contactx"]">[field id="Contactx"]</a><br></p>
        <p><strong>Message:</strong><br><pre>[field id="Detailsx"]</pre></p>

    Source: Code Snippets Cloud

    Tip: Customize the HTML template to fit your needs. You can add inline CSS for styling, use different HTML tags, or adjust the structure as necessary.

  5. Update or Publish your page and test the form to ensure the email output matches your customization.
    Update or Publish your page and test the form to ensure the email output matches your customization

Official Documentation

Customize Elementor Form Submissions – Conclusion

With these steps, you’ve successfully customized your Elementor form email submissions to better fit your or your client’s needs. Not only does this make the emails more readable and professional, but it also allows for a level of personalization that can reflect your brand’s identity. Dive into further customization with HTML and CSS to make your emails stand out even more.

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Customize Elementor Form Submissions with HTML
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.