Customize Emails in eForm WordPress Form Builder

Starting eForm version 4.14, we have introduced features to completely modify how emails are sent for form submissions, administrator notifications and payments. Previously we have had a few hooks to change them, but now we have made it even easier using templates. So now, you can completely change the HTML and how data is displayed over any of the emails sent by eForm. Let’s get started.

Accessing the template files

With eForm version 4.14, you will find a directory under wp-content/plugins/wp-fsqm-pro called email-templates. This is where all the email templating files reside. The files and their purpose are as follows.

html-body.php HTML shell of the email

It expects the following PHP variables.

$data = [
	'title' => 'Email Title',
	'body' => 'Email Body',
	'style' => [], // style compatible with settings['email_template']
];

user-email.php User Notification

The template used to generate user notification. It is called from IPT_FSQM_Form_Elements_Data class and has access to all of its variables. Check its source to understand more.

user-payment.php Payment Notification

This template generates email for showing payment related notifications. It is also called from IPT_FSQM_Form_Elements_Data class and has access to it.

admin-email.php Admin Notification

The template used for admin notification emails. It is also called from IPT_FSQM_Form_Elements_Data class and has access to it.

Copy over template files

If you want to modify email templates, do not change the files directly. Instead:

  1. Copy all the files inside wp-content/plugins/wp-fsqm-pro/email-templates.
  2. Create a directory wp-content/wpeform-email-templates.
  3. Paste it in wp-content/wpeform-email-templates directory, the one you just created.

Now eForm will automatically use the template files in wp-content/wpeform-email-templates directory. So you can make your modifications there.

Form specific email template overrides

Copying the files to the new directory will override all of the emails. If you want to be specific to a particular form, then note down the form Id and create the following files.

  • wp-content/wpeform-email-templates/<<formID>>-html-body.php – For overall HTML template.
  • wp-content/wpeform-email-templates/<<formID>>-user-email.php – Form User email.
  • wp-content/wpeform-email-templates/<<formID>>-user-payment.php – For Payment email.
  • wp-content/wpeform-email-templates/<<formID>>-admin-email.php – For Admin notification.

So, if the form Id is 33, then the following files need to be present for eFormto use it.

  • wp-content/wpeform-email-templates/33-html-body.php – For overall HTML template.
  • wp-content/wpeform-email-templates/33-user-email.php – Form User email.
  • wp-content/wpeform-email-templates/33-user-payment.php – For Payment email.
  • wp-content/wpeform-email-templates/33-admin-email.php – For Admin notification.

Example

For the completeness of this tutorial, let us try to override the user email to be of the following appearance.

For this we are going to use the email HTML templates from here.

Let us first create the file under wp-content/wpeform-email-templates/html-body.php and put the following code inside.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
  xmlns="http://www.w3.org/1999/xhtml"
  style="
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    font-size: 14px;
    margin: 0;
  "
>
  <head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title><?php echo $data['title']; ?></title>

    <style type="text/css">
      img {
        max-width: 100%;
      }
      body {
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: none;
        width: 100% !important;
        height: 100%;
        line-height: 1.6em;
      }
      body {
        background-color: #f6f6f6;
      }
      @media only screen and (max-width: 640px) {
        body {
          padding: 0 !important;
        }
        h1 {
          font-weight: 800 !important;
          margin: 20px 0 5px !important;
        }
        h2 {
          font-weight: 800 !important;
          margin: 20px 0 5px !important;
        }
        h3 {
          font-weight: 800 !important;
          margin: 20px 0 5px !important;
        }
        h4 {
          font-weight: 800 !important;
          margin: 20px 0 5px !important;
        }
        h1 {
          font-size: 22px !important;
        }
        h2 {
          font-size: 18px !important;
        }
        h3 {
          font-size: 16px !important;
        }
        .container {
          padding: 0 !important;
          width: 100% !important;
        }
        .content {
          padding: 0 !important;
        }
        .content-wrap {
          padding: 10px !important;
        }
        .invoice {
          width: 100% !important;
        }
      }
    </style>
  </head>

  <body
    itemscope
    itemtype="http://schema.org/EmailMessage"
    style="
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      box-sizing: border-box;
      font-size: 14px;
      -webkit-font-smoothing: antialiased;
      -webkit-text-size-adjust: none;
      width: 100% !important;
      height: 100%;
      line-height: 1.6em;
      background-color: #f6f6f6;
      margin: 0;
    "
    bgcolor="#f6f6f6"
  >
    <?php echo $data['body']; ?>
  </body>
</html>

This will style up the overall HTML body of the email. Now to override the user notification email, let’s create the file wp-content/wpeform-email-templates/user-email.php and put the following code.

<table
  class="body-wrap"
  style="
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    font-size: 14px;
    width: 100%;
    background-color: #f6f6f6;
    margin: 0;
  "
  bgcolor="#f6f6f6"
>
  <tr
    style="
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      box-sizing: border-box;
      font-size: 14px;
      margin: 0;
    "
  >
    <td
      style="
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        box-sizing: border-box;
        font-size: 14px;
        vertical-align: top;
        margin: 0;
      "
      valign="top"
    ></td>
    <td
      class="container"
      width="600"
      style="
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        box-sizing: border-box;
        font-size: 14px;
        vertical-align: top;
        display: block !important;
        max-width: 600px !important;
        clear: both !important;
        margin: 0 auto;
      "
      valign="top"
    >
      <div
        class="content"
        style="
          font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
          box-sizing: border-box;
          font-size: 14px;
          max-width: 600px;
          display: block;
          margin: 0 auto;
          padding: 20px;
        "
      >
        <table
          class="main"
          width="100%"
          cellpadding="0"
          cellspacing="0"
          style="
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            box-sizing: border-box;
            font-size: 14px;
            border-radius: 3px;
            background-color: #fff;
            margin: 0;
            border: 1px solid #e9e9e9;
          "
          bgcolor="#fff"
        >
          <tr
            style="
              font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
              box-sizing: border-box;
              font-size: 14px;
              margin: 0;
            "
          >
            <td
              class="content-wrap aligncenter"
              style="
                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                box-sizing: border-box;
                font-size: 14px;
                vertical-align: top;
                text-align: center;
                margin: 0;
                padding: 20px;
              "
              align="center"
              valign="top"
            >
              <table
                width="100%"
                cellpadding="0"
                cellspacing="0"
                style="
                  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                  box-sizing: border-box;
                  font-size: 14px;
                  margin: 0;
                "
              >
                <tr
                  style="
                    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                    box-sizing: border-box;
                    font-size: 14px;
                    margin: 0;
                  "
                >
                  <td
                    class="content-block"
                    style="
                      font-family: 'Helvetica Neue', Helvetica, Arial,
                        sans-serif;
                      box-sizing: border-box;
                      font-size: 14px;
                      vertical-align: top;
                      margin: 0;
                      padding: 0 0 20px;
                    "
                    valign="top"
                  >
                    <h1
                      class="aligncenter"
                      style="
                        font-family: 'Helvetica Neue', Helvetica, Arial,
                          'Lucida Grande', sans-serif;
                        box-sizing: border-box;
                        font-size: 32px;
                        color: #000;
                        line-height: 1.2em;
                        font-weight: 500;
                        text-align: center;
                        margin: 40px 0 0;
                      "
                      align="center"
                    >
                      <?php echo $this->name; ?>
                    </h1>
                  </td>
                </tr>
                <tr
                  style="
                    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                    box-sizing: border-box;
                    font-size: 14px;
                    margin: 0;
                  "
                >
                  <td
                    class="content-block"
                    style="
                      font-family: 'Helvetica Neue', Helvetica, Arial,
                        sans-serif;
                      box-sizing: border-box;
                      font-size: 14px;
                      vertical-align: top;
                      margin: 0;
                      padding: 0 0 20px;
                    "
                    valign="top"
                  >
                    <div
                      class="aligncenter"
                      style="
                        font-family: 'Helvetica Neue', Helvetica, Arial,
                          'Lucida Grande', sans-serif;
                        box-sizing: border-box;
                        font-size: 14px;
                        color: #666;
                        line-height: 1.2em;
                        font-weight: 400;
                        text-align: center;
                        margin: 40px 0 0;
                      "
                      align="center"
                    >
										<?php if ( true == $submission_lock ) : ?>
											<?php echo str_replace( array_keys( $format_string_components ), array_values( $format_string_components ), wpautop( $lock_message ) ); ?>
										<?php else : ?>
											<?php echo str_replace( array_keys( $format_string_components ), array_values( $format_string_components ), wpautop( $notification_message ) ); ?>
										<?php endif; ?>
                    </div>
                  </td>
                </tr>
                <tr
                  style="
                    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                    box-sizing: border-box;
                    font-size: 14px;
                    margin: 0;
                  "
                >
                  <td
                    class="content-block aligncenter"
                    style="
                      font-family: 'Helvetica Neue', Helvetica, Arial,
                        sans-serif;
                      box-sizing: border-box;
                      font-size: 14px;
                      vertical-align: top;
                      text-align: center;
                      margin: 0;
                      padding: 0 0 20px;
                    "
                    align="center"
                    valign="top"
                  >
                    <table
                      class="invoice"
                      style="
                        font-family: 'Helvetica Neue', Helvetica, Arial,
                          sans-serif;
                        box-sizing: border-box;
                        font-size: 14px;
                        text-align: left;
                        width: 80%;
                        margin: 40px auto;
                      "
                    >
                      <tr
                        style="
                          font-family: 'Helvetica Neue', Helvetica, Arial,
                            sans-serif;
                          box-sizing: border-box;
                          font-size: 14px;
                          margin: 0;
                        "
                      >
                        <td
                          style="
                            font-family: 'Helvetica Neue', Helvetica, Arial,
                              sans-serif;
                            box-sizing: border-box;
                            font-size: 14px;
                            vertical-align: top;
                            margin: 0;
                            padding: 5px 0;
                          "
                          valign="top"
                        >
                          <?php echo $this->data->f_name . ' ' . $this->data->l_name; ?><br
                            style="
                              font-family: 'Helvetica Neue', Helvetica, Arial,
                                sans-serif;
                              box-sizing: border-box;
                              font-size: 14px;
                              margin: 0;
                            "
													/>Submission Id
													#<a href="<?php echo $this->get_trackback_url(); ?>">
														<?php echo $this->get_trackback_id(); ?>
													</a><br
                            style="
                              font-family: 'Helvetica Neue', Helvetica, Arial,
                                sans-serif;
                              box-sizing: border-box;
                              font-size: 14px;
                              margin: 0;
                            "
                          /><?php echo date_i18n( get_option( 'date_format' ) . ' ' . get_option( 'time_format' ), strtotime( $this->data->date ) ); ?>
                        </td>
											</tr>
											<?php if ( true == $this->settings['user']['show_submission'] && false == $submission_lock ) : ?>
												<tr
													style="
														font-family: 'Helvetica Neue', Helvetica, Arial,
															sans-serif;
														box-sizing: border-box;
														font-size: 14px;
														margin: 0;
													"
												>
													<td
														style="
															font-family: 'Helvetica Neue', Helvetica, Arial,
																sans-serif;
															box-sizing: border-box;
															font-size: 14px;
															vertical-align: top;
															margin: 0;
															padding: 5px 0;
														"
														valign="top"
													>
														<?php $this->show_quick_preview( true, false, false, false ); ?>
													</td>
												</tr>
											<?php endif; ?>
                    </table>
                  </td>
                </tr>
                <tr
                  style="
                    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                    box-sizing: border-box;
                    font-size: 14px;
                    margin: 0;
                  "
                >
                  <td
                    class="content-block aligncenter"
                    style="
                      font-family: 'Helvetica Neue', Helvetica, Arial,
                        sans-serif;
                      box-sizing: border-box;
                      font-size: 14px;
                      vertical-align: top;
                      text-align: center;
                      margin: 0;
                      padding: 0 0 20px;
                    "
                    align="center"
                    valign="top"
                  >
                    <a
                      href="<?php echo $this->get_email_url(); ?>"
                      style="
                        font-family: 'Helvetica Neue', Helvetica, Arial,
                          sans-serif;
                        box-sizing: border-box;
                        font-size: 14px;
                        color: #348eda;
                        text-decoration: underline;
                        margin: 0;
                      "
                      >View in browser</a
                    >
                  </td>
                </tr>
                <tr
                  style="
                    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                    box-sizing: border-box;
                    font-size: 14px;
                    margin: 0;
                  "
                >
                  <td
                    class="content-block aligncenter"
                    style="
                      font-family: 'Helvetica Neue', Helvetica, Arial,
                        sans-serif;
                      box-sizing: border-box;
                      font-size: 14px;
                      vertical-align: top;
                      text-align: center;
                      margin: 0;
                      padding: 0 0 20px;
                    "
                    align="center"
                    valign="top"
                  >
										<?php echo $this->settings['user']['footer_msg']; ?>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <div
          class="footer"
          style="
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            box-sizing: border-box;
            font-size: 14px;
            width: 100%;
            clear: both;
            color: #999;
            margin: 0;
            padding: 20px;
          "
        >
          <table
            width="100%"
            style="
              font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
              box-sizing: border-box;
              font-size: 14px;
              margin: 0;
            "
          >
            <tr
              style="
                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                box-sizing: border-box;
                font-size: 14px;
                margin: 0;
              "
            >
              <td
                class="aligncenter content-block"
                style="
                  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                  box-sizing: border-box;
                  font-size: 12px;
                  vertical-align: top;
                  color: #999;
                  text-align: center;
                  margin: 0;
                  padding: 0 0 20px;
                "
                align="center"
                valign="top"
              >
                Questions? Email
                <a
                  href="mailto:"
                  style="
                    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                    box-sizing: border-box;
                    font-size: 12px;
                    color: #999;
                    text-decoration: underline;
                    margin: 0;
                  "
                  >support@acme.inc</a
                >
              </td>
            </tr>
          </table>
        </div>
      </div>
    </td>
    <td
      style="
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        box-sizing: border-box;
        font-size: 14px;
        vertical-align: top;
        margin: 0;
      "
      valign="top"
    ></td>
  </tr>
</table>

Now try out submitting a form. You should see the new email template pop up.

Swashata has written 257 articles

Hi there, I am the Lead Developer at WPQuark.com. I love to create something beautiful for WordPress and here I write about how to use them. When I am not working, usually I am doing a number of other creative things ;).