Email teamplate – WP Formbuilder

You can customize our teamplate email template, for the purpose of sending emails to customers to promote your brand professionally. To make editing easy, you need some basic skills such as: HTML, CSS…

– To create a new email template you need to access: Dashboard -> WP Form Builder -> Email Teamplates -> Add New.
– The structure of the email template includes HTML, CSS and some small code snippets.
– There are 2 simple ways to create email templates and attach forms data when submitting.

Method 1: Directly use the Field ID value in the form to insert the value into the HTML.
– We have a form with the following structure:

Filed Label	First ID	Field Type	Code
Name	name	Text	`{{name}}`
Email	email	Email	`{{email}}`
Phone	phone	Phone	`{{phone}}`

Example 1

Email Template:

<div style="margin:0!important;padding:25px 0;background-color:#f3f6f9">
    <center>
        <div style="border:1px solid #ccc;width:700px; background-color:#fff;border-radius:3px">
            <div style="padding:20px;">
                <h1>Your Submission{{ submit_id ? " #" ~ submit_id : ""}}</h1>
                <table border="1" style="border-collapse: collapse; color: #000;width:100%;">
                    <tbody>
                        <tr>
                            <th style="padding:10px;text-align:-webkit-auto;">Name</th>
                            <td style="padding:10px">
                                {{name}}
                            </td>
                        </tr>
                        <tr>
                            <th style="padding:10px;text-align:-webkit-auto;">Email</th>
                            <td style="padding:10px">
                                {{email}}
                            </td>
                        </tr>
                        <tr>
                            <th style="padding:10px;text-align:-webkit-auto;">Phone</th>
                            <td style="padding:10px">
                                {{phone}}
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div style="text-align:-webkit-auto;margin-top:15px">{{ meta_data|raw }}</div>
            </div>
        </div>
    </center>
</div>

You can remove empty fields by using the conditional statement {% if FIELD_ID is not empty %} and don’t forget to close the conditional statement with {% endif %}. Your email template will then become:

<div style="margin:0!important;padding:25px 0;background-color:#f3f6f9">
   <center>
       <div style="border:1px solid #ccc;width:700px; background-color:#fff;border-radius:3px">
           <div style="padding:20px;">
               <h1>Your Submission{{ submit_id ? " #" ~ submit_id : ""}}</h1>
               <table border="1" style="border-collapse: collapse; color: #000;width:100%;">
                   <tbody>
                       {% if name is not empty %}
                       <tr>
                           <th style="padding:10px;text-align:-webkit-auto;">Name</th>
                           <td style="padding:10px">
                               {{name}}
                           </td>
                       </tr>
                       {% endif %}
                       {% if email is not empty %}
                           <tr>
                               <th style="padding:10px;text-align:-webkit-auto;">Email</th>
                               <td style="padding:10px">
                                   {{email}}
                               </td>
                           </tr>
                       {% endif %}
                        {% if phone is not empty %}
                           <tr>
                               <th style="padding:10px;text-align:-webkit-auto;">Email</th>
                               <td style="padding:10px">
                                   {{phone}}
                               </td>
                           </tr>
                       {% endif %}
                   </tbody>
               </table>
               <div style="text-align:-webkit-auto;margin-top:15px">{{ meta_data|raw }}</div>
           </div>
       </div>
   </center>
</div>

Method 2: Use a loop to write values directly to the email template:
– To use this method, you need to know some skills about array processing and using loops.
– With the form structure as in example 1. We have stored the form information when submitting to the $data variable with the following structure:

[
    'name' => [
        'label' => "Name",
        'value' => 'Jason Robecto',
        'type' => 'text'
    ],
    'email' => [
        'label' => 'Email',
        'value' => 'test@gmail.com',
        'type' => 'email'
    ],
    'phone' => [
        'label' => 'Phone',
        'value' => '0123456789',
        'type' => 'tel'
    ]
]

Email data array structure

After submitting the forms, to create the email template we use a loop to iterate through the form fields:
You can use loop constructs as follows:
Structure 1:

{% for key, item in items %}
    {# code to be executed; #}
{% endfor %}

– Email template:

<div style="margin:0!important;padding:25px 0;background-color:#f3f6f9">
    <center>
        <div style="border:1px solid #ccc;width:700px;background-color:#fff;border-radius:3px">
            <div style="padding:20px">
                <h1>Your Submission{{ submit_id ? " #" ~ submit_id : ""}}</h1>
                <table border="1" style="border-collapse:collapse;color:#000;width:100%">
                    {% for key, item in data %}
                        <tr>
                            <th style="padding:10px;text-align:-webkit-auto">{{ item.label }}</th>
                            <td style="padding:10px">{{ item.value }}</td>
                        </tr>
                    {% endfor %}
                </table>
                <div style="text-align:-webkit-auto;margin-top:15px">{{ meta_data|raw }}</div>
            </div>
        </div>
    </center>
</div>

You can remove empty fields by using the conditional statement {% if item.value is not empty %} and don’t forget to close the conditional statement with {% endif %}. Your email template will then become:

<div style="margin:0!important;padding:25px 0;background-color:#f3f6f9">
   <center>
      <div style="border:1px solid #ccc;width:700px;background-color:#fff;border-radius:3px">
         <div style="padding:20px">
            <h1>Your Submission{{ submit_id ? " #" ~ submit_id : ""}}</h1>
            <table border="1" style="border-collapse:collapse;color:#000;width:100%">
               {% for key, item in data %}
                {% if item.value is not empty %}
                   <tr>
                      <th style="padding:10px;text-align:-webkit-auto">{{ item.label }}</th>
                      <td style="padding:10px">{{ item.value }}</td>
                   </tr>
                {% endif %}
               {% endfor %}
            </table>
            <div style="text-align:-webkit-auto;margin-top:15px">{{ meta_data|raw }}</div>
         </div>
      </div>
   </center>
</div>

Save the template and select it in the email section.