Sending E-mail Notifications

You can configure HTML Forms to send out an email notification whenever a form is successfully submitted.

To set this up, edit your form and open up the Actions tab. Near the bottom of the page should be a heading titled Add Form Action with a Send Email button.

Clicking that Send Email button will add a settings block to the page that should look like this:

Settings

Here’s what each setting does.

From

Define the email address you wish the message to come from. This field accepts field value placeholders.

It is advised to pick an address with the same domain name as your website to prevent ending up in someone’s SPAM folder. For example, if your website is flowers.com, then lee@flowers.com is better than leeflowers@gmail.com.

Also note that if you use a third-party email senders on your WordPress site that the address in this field must be validated with that service.

To

The email address that the email should be sent to. This field also accepts field value placeholders.

Subject

The subject of your email message. This field also accepts field value placeholders.

Message

The actual message body of the email. This field also accepts field value placeholders.

Content Type

You can decide if your email is HTML or plain text.

Additional Headers

You can include custom headers with your email. We recommend, if you want to define a Reply-To address, you use this setting with placeholders.

Redirect to URL After Successful Sign-Ups

You can configure HTML Forms to redirect to a certain page on your website after each successful form submission. An example use case would be to send visitors to a “Thank You” page after they submit your form.

To set this up, open up your form, navigate to the Settings tab and locate the setting for a redirect:

Make sure to use complete (absolute) URL’s and to redirect to a page that describes that the form was processed successfully. You don’t want to confuse your visitors with a random redirect.

Template Variables

HTML Forms provides several template variables you can use in your form content. These form variables will be dynamically replaced when the form is shown. Currently, you can use the following variables.

user

Will be replaced with the specified property of the currently logged-in user.

{{ user.user_email }}

url_params

This will be replaced with a parameter from the page URL, or with an empty string if the specified URL parameter does not exist.

{{url_params.utm_source}}

post

This will be substituted with the specified property of the post that is viewed on the page the form is displayed on.

{{post.ID}}

Hide Form After a Successful Sign-Up

Hiding a form after it was successfully submitted is easy with HTML Forms.

Open up your form, navigate to the Settings tab and toggle the setting shown below to Yes.

This will hide your form fields after the form is submitted without errors. The success message you enter will still show, regardless of the setting.

Installing the HTML Forms Premium Add-on

You’ll need to install and activate HTML Forms Premium before you can start using it on your WordPress website. This is a step-by-step guide for anyone who has never installed a premium plugin before. If you still are having issues after reading this guide, please contact us via our support form for more assistance.

Step #1: Download HTML Forms Premium

You should have received an email after completing your HTML Forms Premium purchase. The subject of the email is “HTML Forms Premium – Purchase Receipt.” In that email is a link to download HTML Forms Premium to your computer.

If you didn’t receive that email for some reason, please check your spam box in your email client. Alternatively, you can download the file directly from the Account area of this website using the login information that was created for you after your purchase.

Click on the link to download the file and save it somewhere on your computer you will remember. We suggest saving the file to your desktop for easy access in the next step.

Step #2: Upload & Install HTML Forms Premium

You will need to upload the HTML Forms Premium file, that you just saved to your computer, to your WordPress site manually. This is a very simple process that you can do with just a few clicks.

First, log in to your WordPress admin and find the Plugins menu on the left-hand side. Click on the menu option called Add New. It should look something like this:

The next screen can be overwhelming, but we are only concerned with one part. At the top is a button that says Upload Plugin. Pressing that button will give you the option to upload the HTML Forms Premium file that you saved on your computer to the server.

Press Choose File, find the HTML Forms Premium file (if you followed our advice above, it should be on your desktop), and then press the Install Now button. You will be taken to a new screen with one last button to click. Press the Activate Plugin button.

If everything went smoothly, you should be back on the Installed Plugins screen. We’re one last step away from finishing the process of installing HTML Forms Premium.

Step #3: Activate Your License Key

Your purchase receipt email contained a License Key. You’ll need this to complete the installation process and get HTML Forms Premium working on your site.

Find the HTML Forms choice on the left-hand side menu in WordPress. There you will find an option to open up HTML Forms’ Settings. Next, go to the HTML Forms Premium License section, put your License Key in the field marked License Key and then press the Save License Key button. Finally, press the Activate button to complete the process.

Now that HTML Forms Premium is active, all premium features are instantly unlocked.

---

Let’s walk through how to install the HTML Forms Premium add-on. After registering your account and processing your payment, you immediately have access to the HTML Forms account area.

Download HTML Forms Premium

After logging in to your account, head on over to the plugins page.

Click the Download button to download the latest version of HTML Forms Premium.

Note for Safari for Mac users for which the .zip file automatically extracts after downloading, either go to Preferences > General and uncheck “Open safe files after downloading” or simply re-compress the files to a .zip again.

Installing & Activating HTML Forms Premium

Log in to your WordPress admin panel, go to Plugins > Add New and locate the Upload Plugin link.

Browse to the location where the downloaded plugin package is located on your computer and select it. WordPress will automatically upload the plugin to your server. After that is done, you can safely click the Activate link to activate the plugin.

Now that HTML Forms Premium is active, all premium features are instantly unlocked.

Show Form in Posts or Pages

HTML Forms provides two ways to show your forms on your WordPress posts or pages. You can either use the shortcode or the block found in the WordPress block editor.

Shortcode

After creating your form, the plugin will show you a shortcode with a slug attribute that represents the form’s title.

This shortcode allows you to show the form in your WordPress posts, pages and widget areas.

The slug acts as an identifier, so the plugin knows which of your forms to show. Since the slug is based on your form’s title, it should also help you remember which form is showing where.

Block

The WordPress Block Editor is the new standard for creating most posts and pages. In fact, it’s becoming the standard for many other areas of the WordPress interface as well. You can easily show a form in any post type using the Block Editor. Simply type in one of the HTML Forms plugin’s block keywords (html, form, contact):

Then you simply select the form you want to show:

Creating Your First Form

After installing and activating the HTML Forms plugin, you should have a menu item in your WordPress admin labeled HTML Forms.

To create your first form, go to the HTML Forms menu and click the Add New link. You can also go to the All Forms link and click the Add New Form button at the top of the screen.

Choose a name for your form and hit the Create Form button. You will now be taken to the form editor, where you can actually configure your form.

Defining Form Fields

This part is what makes HTML Forms special.

Your actual form fields can be defined using normal HTML. That means you can use regular <input> elements to define what fields your form should contain.

The only thing of importance here is that each of your input elements should have a unique name attribute if you want HTML Forms to save the value of that field.

Don’t Know HTML?

If you don’t know what HTML is, you can also use our field helper to generate field HTML.

The great thing here is that you don’t have to choose yet another template language. Using our field helper should even help you learn HTML for yourself. Win-win!

Submissions

By default, HTML Forms will save each successful form submission in your database. These submissions can then be viewed by going to the Submissions tab on the page where you edit your form.

Form Actions

You can configure additional actions to run by opening up the Actions tab and choosing one of the available actions at the bottom of that page.