help center

On this page

Example of sending custom emails from a form

Last Update: June 5, 2024

When you create a forms in Elementor, one option is to send submissions by email to you and/or your client. For details, see Receive form submissions by email.

The information in these email submissions is generated by shortcodes. By default, these emails are generated by the shortcode [all-fields] which will include all the data captured by the form. This, and the default formatting of the email, can make the contents difficult to read.

In this example, we’ll use individual field shortcodes and a small bit of HTML, to generate a much more human readable form submissions.  

Note
If you own an Elementor hosted website and have a custom domain name, you may want to authenticate you emails.

Create Your Form

For this example, we’ll use the case of a website creator designing a site for a wedding photographer. The site will include a form that will ask potential clients for their:

  • First name
  • Last name
  • Email
  • Event date
  • Phone
  • Location
  • Message

After potential clients submit a form, an email is sent to photographer so they can contact the client.

For details about creating forms, see Form widget.

This is what the form looks like:

1 The form 1 Example of sending custom emails from a form 9

Go to each form field and:

  1. Open the field.
    Clikc the Advanced tab 1 Example of sending custom emails from a form 11
  2. Click the Advanced tab.
  3. In the ID field, give the following names to these fields:
    Add the shortcode 1 Example of sending custom emails from a form 13
    • First name: first_name
    • Last name: last_name
    • Email: email
    • Event date: eventdate
    • Phone: phone
    • Location: location
    • Message: message
      Note
      Field IDs should be either one word or two words connected by an underscore. IDs should not contain any spaces.

      LOcation of shortcode Example of sending custom emails from a form 15
  4. Copy the shortcode for each field in a separate document, the shortcode can also be found in the Advanced tab.

Create An HTML Email Template

Next, we’ll use these shortcodes along with some basic HTML to generate a clear, comprehensible email that will be sent to the website owner when a potential client submits a form.

  1. In the panel, open the Email field.
    Open the email section Example of sending custom emails from a form 17
    This section determines who receives an email when a form is submitted and what the email will look like.
  2. In the To field, add the email of the photographer and change the Subject line to: Potential new customer.

The email

By default, the email will simply contain the information submitted with the form. For this example, will use simple HTML and shortcodes to create a friendlier notification. In the Message box, add the following:
Ad the message Example of sending custom emails from a form 19

<h1>You have a new wedding to plan.</h1>

<p>[field id=”first_name”] would like you to contact them about planning their wedding on [field id=”eventdate”] at [field id=”location”].</p>

<p>The couples vision and plans so far are as follows:<br>

[field id=”message”]</p>

<h2>Contact Information</h2>

<ul>

<li>First Name: [field id=”first_name”]</li>

<li>Last Name: [field id=”last_name”] </li>

<li>Email Address: [field id=”email”] </li>

<li>Phone Number: [field id=”phone”]</li>

</ul>

<p><strong>Good luck at the event!</strong></p>

Note
In the panel, make sure that the Send As field is set to send HTML emails.
Send as html 1 Example of sending custom emails from a form 21

The email sent by the form will look like this:

The email Example of sending custom emails from a form 23

Finishing Up

You may now publish or update your form. Send a test submission to yourself to see how the generated email appears. Use additional HTML and inline CSS to further style the email as needed.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Wait! You get 30-Day Money-back Guarantee

You have nothing to lose – but the discount

days
hours
minutes
seconds