eForm version 4.7+ comes with Gutenberg blocks. Just make sure you are on the right version to use eForm with WordPress 5.

To add a popup on your post, simply click on the add block button and search for eForm. Click on the Popup Form – eForm

Setting Popup Button

The essence of popup form is a popup button. With the following options you can set it very easily.

• Button Text: Is what is shown in the button.
• Button Color: The color of the button text.
• Button Background Color: The background color of the button.
• Button Position: Where the button is placed on your screen.
• Button Style: By default buttons are rectangular. If you want to make circular buttons showing just the icon, enable it here.
• Popup header: Text shown in the popup header. Leave empty to disable.
• Popup Subtitle: Small text shown below popup header. Works only if header is not empty.
• Popup Button Icon Class: The class of the icon used in the button. The icons has to be supplied by your theme or some other plugin.

Setting Custom Popup Trigger

It is possible to use any other anchor to trigger the popup form. It becomes handy if you want to use your theme’s button to trigger an eForm.

• Set the Button Position to Hidden / Manual Trigger.
• Now clicking the OK button will show you a message with trigger URL.
• You either note down the trigger URL and insert your theme’s button yourself.
• Or simply click OK on that message and it will insert a plain anchor tag on your content (along with the required shortcode) which you can customize.
• Make sure, the trigger button has the class eform-manual-popup and proper href set #ipt-fsqm-popup-form-{id}. The rest of the data attributes are optional.

The post Add Popup Using Gutenberg Block appeared first on WPQuark Knowledge Base.

Just like Form Statistics, eForm has also introduced statistics shortcodes for showing user performance. You can use them on the user portal page or on sidebars or a dedicated statistics page to give your users charts about how they are performing.

To add a Form Statistics on your post, simply click on the add block button and search for Form Statistics.

Form Submission Breakdown

It shows how many submissions have been made for mentioned forms for past selected days or from the date. The block has following options.

• Form IDs: The numeric IDs of forms. You can have comma separated IDs like 1,12,4,22 etc or a single ID like 24 or all to show for all forms.
• Number of days or date: If you mention an integer, then stat would be generated for past mentioned days since (including) today. If you mention date in YYYY-MM-DD format (like 2016-12-29 for 29th Dec 2016) then stat would be generated since (including) that day. Leave empty to calculate for all time.

Other options are quite self-explanatory. Use them to change graph labels, title and dimension.

Overall Submissions

It shows overall submission comparison through a pie or doughnut chart for selected forms over mentioned number of days.

Score Breakdown

This chart shows score breakdown of mentioned forms. The system generates breakdown in a range of 10, like 0%-9%, 10% – 19% etc, including negatives.

To change the legend, edit the Graph Legend Format option. %1$d%% would be replaced by the lower value of the range, whereas %2$d%% would be replaced by the higher value of the range. Do note that having the percentage sign (%) is also optional. %1$d would simply hold the value, not the percentage sign. Since we want a percentage sign, we add it to the string with an escaped value (%%).

Change other options to modify the charts.

The post Publishing User Statistics for eForm using Gutenberg Block appeared first on WPQuark Knowledge Base.

Publish a Form Leaderboard

A form leaderboard will show submissions sorted in descending order of obtained score percentage. It also beautifies the list by adding user avatar (by email or by logged in user ID) and user submission metadata.

Using the Gutenberg Block

To add a Leaderboard on your post, simply click on the add block button and search for Leaderboard. This will bring up the options for setting up your leaderboard.

Change appearance Options

Most of the options are self explaining.

• If you want to show the form theme’s header image, enable “Show form header image”.
• If you want to hide user avatar, then disable “Show Avatar”. You can modify the size of the avatar too, but we recommend setting it at 64×64.
• Additionally customize the appearance of name, meta, score, max score, percentage, date and administrator comments columns.
• If you enable meta, then it will show total user submission number and average performance score across all of his/her submissions.

Change labels

• Column labels can be changed through relevant options.
• If you want to add some content below the form title (if it is shown), then add any HTML to the Content section.

The post Publishing different Leaderboard Using Gutenberg appeared first on WPQuark Knowledge Base.

eForm has two specific system shortcodes, Trackback page and User Portal. Both of them can be published by the setup wizard. But if you want you can use the shortcode generator to do it manually, or change the content of the page.

Trackback Block

• Create a Page.
• Use eForm Single Submission Trackback – eForm block. Just click on add block button and search for Trackback.

• Enter Form Label and Submit Button Text.
• This will create the shortcode and place it in the content.
• Publish the page.

When viewed from a trackback link, it will be populated with the submission.

Publishing User Portal

• Create a Page.
• Click on add block button and search User Portal.
• Customize the settings.

Changing the Welcome section & theme

• Customize Welcome Title, Welcome message and No submission message.
• Edit the Avatar Size of the user avatar.
• Change Portal Theme from one of the presets.

Customizing Column headings & buttons

• Form Heading label lets you customize the heading of “Form” column.
• Category Label is put in the title of category column.
• Date Heading Label is used to populate date column.
• Similarly you can change Score, Max Score, Percentage and Action column headings.
• In the action column, you can change the button labels by editing Trackback Button Label & Edit Button Label.

Publishing the page

Once done with your editing  and after publishing the page, the system will show you something like this.

The post Publishing System Shortcode using Gutenberg Block appeared first on WPQuark Knowledge Base.

eForm has support for showing a nicely themed login form for your website. This can be inserted to any page, post using Gutenberg block. Just click on add block and search Login.

This will insert the needed login form on your page. Simply publish it to show a login form to non-logged in users.

Login Form Attributes

The login form has following attributes which can be customized through the above settings.

• Login Form Theme (theme): The theme of the form. You can choose any theme supported by eForm.
• Redirect To (redir): Redirect URL where user is taken after login. Keep empty to redirect to the current URL.
• Show Registration (register): If enabled (1) then registration button is shown.
• Registration URL (regurl): URL of the registration form. You can use a page URL with eForm published registration form too. Leave blank to point to default WP registration URL.
• Show Forgot Password (forgot): If enabled (1) then show forgot password button is shown.
• Form Heading (shortcode content): Heading of the login form. Leave empty to disable this.

The post Create Login form using Gutenberg Block appeared first on WPQuark Knowledge Base.

When eForm is updated, it redirects you to a custom “What’s New” page for one time only. But if some caching plugin interferes, it can result in some stuck redirection issue.

In some cases, due to poorly configured cache plugins, you will notice redirection issue after updating eForm.

The fix is very simple, simply clear your browser’s cache. The exact steps can be found for the following browsers

1. Gooogle Chrome – Clear cache & cookies.
2. Firefox – How to clear the Firefox cache.
3. Safari – Clear your history is mac.
4. Edge – View and delete browser history.

In all of the above articles, just clear the Saved content and cache. There is no need to clear cookies as it will also log you out from all sites.

Once it is done, we recommend that you configure your caching plugin to not cache the WordPress admin.

The post Fixing Redirection issue after update appeared first on WPQuark Knowledge Base.

If you are using cloudflare and have setup rocket loader, then you will find that eForm takes forever to load. The reason is, rocket loader not being able to proper delegate JavaScript loading.

Rocket loader works best, when applied properly by a developer who has control on adding script tags. Since, mostly this is not the case for WordPress sites, we do not recommend it all.

Also, eForm always loads all of the scripts at the end of body tag. So there is not performance hit on first paint of your site.

Now to fix the issue, simply disable Rocket loader from cloudflare dashboard and you should be good to go.

1. Go to the Performance tab from your cloudflare dashboard.
2. Disable Rocket Loader (as shown in the image above).

Please follow this article from cloudflare documentation to learn more about disabling rocket loader.

The post Fixing forever loading forms on cloudflare cache appeared first on WPQuark Knowledge Base.

For custom popup trigger, shortcode of the form is required in the post/page to build the required prototype of the popup. If you add trigger using WordPress default editors (Classic/Gutenberg), it’s automatically get added in the page/post and remain hidden.

But for other editors where editors do not have eForm shorcode generator, required shortcode get missing. Hence you need to add following code which is required for triggering the popup properly along with the custom link having class eform-manual-popup and proper href set to #ipt-fsqm-popup-form-{id} .

You would need replace only the form id in the following code and you need to put this code any where in the page/post.

<!-- wp:eformv4/popup-form {"form_id":"{id}","pos":"h"} /-->

The post Custom Popup Trigger for Other Editors appeared first on WPQuark Knowledge Base.

With the release of eForm version 4.11.0, we have implemented SCA for Stripe handled payments. To make sure your app and payments work as intended, please follow through.

Step 1: Update Stripe API version

Go to your Stripe dashboard and navigate to Developers. From there if you see a “Upgrade Available” button, click on it and upgrade Stripe API to the latest version.

More information can be found in this troubleshooting guide.

Step 2: Enjoy

There’s no step 2. eForm will work with stripe.js automatically to determine whether 3D Secure is needed for the card entered by user. If so, then relevant actions will be prompted. To see a demo, head to this form and use a regulatory test card number like 4000 0027 6000 3184.

The post Supporting Strong Customer Authentication (SCA) with eForm and Stripe appeared first on WPQuark Knowledge Base.

One of the hidden feature of eForm Form Builder is to manage elements using keyboard shortcut keys. When you are in the form builder, you have access to the following keyboard shortcuts.

You can use the following keyboard shortcuts within form builder.

• Ctrl/⌘ + s: Save form.
• Ctrl/⌘ + h: Toggle HotKey for the followings.
• Alt/⌥ + p: Add new page.
• Alt/⌥ + c: Add Checkbox element.
• Alt/⌥ + r: Add Radio element.
• Alt/⌥ + d: Add Dropdown element.
• Alt/⌥ + t: Add Textarea element.
• Alt/⌥ + i: Add Input element.
• Alt/⌥ + f: Add First Name element.
• Alt/⌥ + l: Add Last Name element.
• Alt/⌥ + e: Add Email element.
• Alt/⌥ + g: Add Grading(Slider/Range) element.
• Alt/⌥ + s: Add Star Rating element.
• Alt/⌥ + o: Add Sortable element.
• Alt/⌥ + m: Add Matrix element.
• Alt/⌥ + a: Add Repeatable element.

Disabling Keyboard Shortcut

As the list suggests, you can press Ctrl/⌘ + h to toggle keyboard shortcuts. The status of keyboard shortcut is persisted in your browser for all forms. So you don’t have to enable/disable it every time you login to WordPress admin.

The post Adding Elements using Keyboard Shortcut appeared first on WPQuark Knowledge Base.

There are two ways, we can create a password restricted form with the eForm WordPress Builder plugin.

1: Enable Password on Form Page

The simplest is to enable a password on the form page itself. You are probably using Gutenberg block or shortcodes to publish a form on a page or post.

Now on the post itself, go to Document on the Gutenberg editor and set visibility to Password Protected.

2: Using conditional logic on the form

In this method, we will leverage eForm conditional logic to hide all parts of the form except the password field. When user enters a password, if it matches with our condition, then we show up the rest of the form fields.

First insert a password field on the form. Make it required and note down the ID (O0) in the screenshot.

Now depending on your requirement, keep on adding other pages or other containers. The concept is, we will add conditional logic to all other pages and containers that we want to hide, until the password matches. In the following example, we will add one more page and set its conditional logic.

Like the image above, go to the settings of the page and enable conditional logic. Set initial status to hidden and change status to shown. In the conditional fields, add our O0 element and set this value to your desired password.

Finally go to CONFIG > FORM SETTINGS > PROGRESS BUTTONS and have the same conditional logic for the submit button.

Similarly add same conditional logic for other pages or elements of your form and your password protected form will be ready to publish.

The post Creating a password restricted form appeared first on WPQuark Knowledge Base.

In some cases, you might find that sections of your submission PDF is missing. Only the header is there, but nothing else.

The reason why this happens is, invalid HTML code somewhere in your form. While it can be tedious to find where exactly the invalid HTML code lies, we do have some tips for you to quickly find out.

1: Check Question title, subtitle and description

This is most likely where things could go wrong. The PDF doesn’t contain design elements by default, so start looking at your elements. Any element where you’ve put custom HTML in title, subtitle or description is up for review.

Notice in the image above, we forgot to close the HTML tag.

2. Check Question Options

We support custom HTML in MCQ type elements, where you can enter any valid HTML in place of option label.

In the image above, we didn’t give proper closing tag to the opening span and it is enough to break the PDF.

3. Check all design elements

If you have Show Design Elements enabled from CONFIG > Result & Email > Summary Table, then verify that all your design elements have valid HTML, especially rich text elements and heading elements.

You can see, in the image above, we have invalid HTML in the rich text element which would break the PDF.

Final advice

Remember that you should only write custom HTML if you are confident about your code. While writing broken HTML won’t break the form on the browsers, it will most likely break many functionalities from the server. So kindly use this great feature with extreme care.

The post Fixing missing or blank section in PDF exports appeared first on WPQuark Knowledge Base.

eForm has supported checking out one single product for many years. From the version 4.13, eForm now supports adding multiple products to the cart.

Before we proceed, do understand there are a few limitations with this mode.

• You cannot change the price of a product from the one listed in WooCommerce.
• You cannot change quantity.
• You cannot add custom attributes.
• eForm will not track the payment status of the WooCommerce order. So if you want to block submission access, until user actually checks out the order and makes payment, you cannot do that with Multiple Product Checkout mode.

Now that we understand the limitations, let’s proceed. This is the form and functionality we will be making.

1: Create a regular form with options

We will be making a form as shown in the image above.

It has one Checkbox Options where we would map every option to a WooCommerce product.

To show how much it will cost, we also have a Mathematical Evaluator element. Unlike Single Product Checkout mode, this element is completely optional.

You can also download the form directly from the link below.

2: Enable WooCommerce Integration

Go to CONFIG > PAYMENT > WOOCOMMERCE and enable WooCommerce Integration.

Now make sure you select Multiple Product Checkout in Working Mode.

In the demonstration above, we have added two products with Ids 1920,1269 which will always be added when-ever the form submits. If you do not need such behavior, then keep the field WooCommerce Product IDS empty.

Now to map different products to different options of the form element, we have used the conditional logic. Unlike Single Checkout mode, every condition which becomes truthy will add the associated product to the cart.

3: Save and Test out

Now save the form and test it out. It should add your mentioned product Ids to the cart when you submit the form. Remember, if you need any help, you can always find us at our support system.

The post WooCommerce Multiple Product Integration with eForm appeared first on WPQuark Knowledge Base.

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.

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

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'] &amp;&amp; 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.

The post Customize Emails in eForm WordPress Form Builder appeared first on WPQuark Knowledge Base.

Starting with eForm version 4.14, it is now possible to instantly subscribe a user before even the form is submitted. This works by grabbing the First Name, Last Name, Email and Phone Number (if present) from the form as they type and doing an XHR request in the background where eForm will call your third-party integration on the provided data.

The primary benefit is, you don’t have to wait for the form being submitted before adding someone to your newsletter list (say for example MailChimp or MailerLite). As soon as they enter their name and email, you will have them.

Enable Third Party Subscription

To get started with the feature, first enable at-least one third-party subscription like MailerLite, MailChimp, Enormail, CampaignMonitor or any of the supported integration by eForm.

Enable Instant Subscription

Now go to CONFIG > INTEGRATION > INSTANT SUBSCRIPTION and enable it.

It has the following configuration options.

• Active Page to Call: The Page or tab where the user must be before the integration is called. This is useful to take consent from your user before adding them to the list.
• Wait For: Number of milliseconds to wait for before all conditions are met to call instant subscription. If any of the data is changed during the wait for time, then previous call will be cancelled and eForm will take on the new data.

Depending on your user base and your form, you will need to tweak the Wait For time. Let’s say, someone has entered their name and email and is on the correct tab/page. eForm will notice this and will create a queue which will call the integration. In this wait time, the person notices that their name is incorrect and goes on to fix it. eForm will notice this too and will cancel the previous queue and will add a new queue once the user is done editing. We have found, using a 2500 milliseconds wait for time works for various scenario.

Now save the form and see it adding users to your list as they fill in the details.

The post Instant Subscription before submitting the form appeared first on WPQuark Knowledge Base.

Recently an issue came up in our forum regarding compatibility with TheGem theme from CodexTheme. If you are using this themes and have activated PageSpeed optimization in the setting then you will find that eForm takes forever to load in both standalone url and while ebbedding into the page/post. The reason might be broken HTML rendered by the theme for optimization.

Now to fix the issue, simply disable PageSpeed optimization setting available in the General tab for both desktop and mobile.

The post Fixing forever loading forms on TheGem theme appeared first on WPQuark Knowledge Base.

Starting version 4.16, eForm comes with direct elementor integration. Up until now, we’d suggested either shortcodes or Widgets to embed forms and popups in Elementor.

Now you can put eForm forms and popups directly in Elementor builder.

Insert eForm Form in Elementor

Edit your page with elementor and search for “Embed Form”. This should show the “Embed Form – eForm” widget in elementor screen.

Do not select the “WordPress Widget > eForm – Insert Form”. Use the Widget under “EFORM WIDGETS” section from the elementor builder screen.

Now select the form you wish to add with the control. You can also embed using iFrames and optimize for narrow containers.

Simply publish the page and you will see your form.

Insert eForm popup in Elementor

Search for “Embed Popup Form” and select the “Embed Popup Form – eForm”. Just like before, DO NOT select the one from “WordPress Widgets”, rather select the one from “EFORM WIDGETS”.

In the Popup Widget you can customize content and style, like any other widgets.

Using manual Popup in Elementor

First insert an Embed Popup Form and set the button position to Manual.

Note down the href value of the instruction that shows up in the screen. For the above, the href is “#ipt-fsqm-popup-form-2“.

Now insert a Button widget from Elementor. In the link put the same value as the instructed href, “#ipt-fsqm-popup-form-2”.

Publish the page and you will see the popup to show up when you press the button.

The post Elementor integration with eForm appeared first on WPQuark Knowledge Base.

With eForm v4.17, it is now possible to send additional hard-coded strings or evaluate format strings in almost all integration settings. In this documentation article, we will see how to use the new configuration.

Enabling Additional data

If the integration you are working with, supports sending additional data, then enable it first. It is usually under the section Send additional data as custom fields.

Adding Custom Values

Now click on the Add New Parameter button. From the dropdown under (X) select custom value.

Now in the {KEY} field, you can:

• Enter a format string like %OSCORE%.
• Or you can enter a hard-coded string like “This value will sent along the field”.

The system will automatically determine if you’ve entered a format string or a hard-coded value. Do note that concatenating format string isn’t possible at this moment.

Now when your users submit the form, it will send those fields with corresponding values.

The post Using Custom Values and Format Strings in Integrations additional fields appeared first on WPQuark Knowledge Base.

With eForm v4.17, it is now possible to further customize the summary table. We will see how we can add new rows to the summary table and show scores obtained per page, instead of total score.

Enabling Additional Rows

First go to CONFIG > RESULT & EMAIL > SUMMARY TABLE.

Now scroll down to the Show Additional Rows At configuration. Here you will need to select the position on the summary table where you’d like to show the additional rows.

Now click on the ADD NEW ROW button. This will present you with an UI very much like the custom fields settings in integration. You can choose any form field or format string or just a hard-coded value.

Showing Page Specific Scores

For the purpose of this documentation, we will add two rows for showing scores obtained on 1st and 2nd pages.

In the first row, we choose Custom Value for (X) and %SCOREPERCENT_PAGE_1% for {KEY}.

Similarly for the second row we choose %SCOREPERCENT_PAGE_2% for {KEY}.

Now when you see the summary table of a submission, you will notice the rows showing up.

The post Adding additional rows and page based scores to the submission summary table appeared first on WPQuark Knowledge Base.