Web Development: How to Build Amazing Forms in WordPress With the FormCraft Plugin

How to Build Amazing Forms in WordPress With the FormCraft Plugin

In this post, we’re going to review the FormCraft WordPress plugin which allows you to create amazing forms with drag and drop. It’s one of the most popular and useful form builders available in the market at the moment.

Forms are one of the most important parts of the website—they allow you to collect various types of information from visitors. Whether it’s a simple contact or feedback from or a full-fledged survey form, it’s always handy to have a plugin which allows you build it easily. As a WordPress site builder, you would like to have a plugin which allows you to create professional forms on-the-fly and collect form submissions at different endpoints.

A host of extensions and form-builder scripts are available for creating forms on your WordPress website. Along with the free plugins, you’ll also find commercial options that provide ready-to-use premium features and extended support. In the case of commercial options, you can also expect quality code, bug fixes, and regular feature-wise enhancements.

In this post, we’re going to discuss the FormCraft WordPress plugin, available at CodeCanyon for purchase at a very reasonable price considering the amount of features it provides. It’s one of the most powerful drag-and-drop form builders which comes with a dozens of features and several built-in templates. This, or something like it, is a must-have tool for site builders who are looking for a professional form builder script.

Let’s have a glimpse of features this plugin brings on the table:

drag and drop form builder
several templates support
responsive and scalable
conditional logic to show/hide fields
form views and submission analytics
built-in GDPR support
multi-site support with additional add-on
and more

The FormCraft WordPress Plugin provides a plethora of useful features that are handy and allow you to create rich-looking forms on your WordPress websites effortlessly.

What We'll Be Building: a Survey Form

In this post, we are going to build a survey form which allows you to collect different types of information from users. Mainly, we’ll ask users a couple of questions about their online shopping choices and habits along with their basic personal information.

To achieve this, we are going to create a form which asks a couple of basic questions about their personal information and we’ll ask our survey specific questions as well.

The overall form will look like this:

So that’s the agenda of this tutorial. In the next section, we’ll see how to download and install this plugin.

Installation and Purchase Code Registration

In this section, we’ll see how to install and configure the FormCraft WordPress plugin once you’ve purchased and downloaded it from CodeCanyon. For this post, I’ve used WordPress 5.2.3, and the FormCraft WordPress plugin version is 3. I would recommend that you install it if you want to follow along with this post.

As soon as you purchase this plugin, you’ll be able to download the zip file. It’s the WordPress plugin file itself which you could use to install this plugin from the WordPress admin side. Go ahead and follow the standard WordPress plugin installation process and you’re almost done.

Next, we need to register the plugin’s purchase code. Firstly, you need to retrieve your purchase code from the CodeCanyon downloads section. Click on the Download > License Certificate link and that should get you a text file which should contain the item purchase code.

Once you get the purchase code, click on the FormCraft in the left sidebar on the admin side and that should display the plugin dashboard page. On this page, click on the Click here to register your copy of FormCraft link and enter and register your code. With that, you’ve unlocked the full power of FormCraft.

With that, we’re ready to dive-in the plugin exploration. In the next section, we’ll go through the different configuration sections this plugin provides.

A Quick Walk Through the FormCraft Configuration Sections

In this section, we’ll briefly discuss the back-end configuration sections provided by this plugin. Once you install the FormCraft plugin, it will add a link in the left sidebar. Let’s go through each section briefly.

Forms

This is a form listing page which lists all the forms created so far. You can also create a new form by clicking on the New Form link.

Apart from that, you can see the Form Analytics section which displays statistics about the different aspects of your forms.

Entries

This is an entry listing page which lists all the form submission entries in all the forms. You could use the search interface to filter specific records and there’s also the Export button which allows you to export entries.

There’s also the Entry View which facilitates you the detail view of the form submission entry.

Insights

Form insights is a new feature, added in FormCraft 3.3, which turns FormCraft into a powerful survey and polling tool. FormCraft can analyze certain fields to produce insights like drop-down, rating, checkboxes, date, slider, etc.

Uploads

This page lists out all the files uploaded via different forms.

License

Finally, this section displays your license information. It also displays the days left to renew license.

So that was a brief introduction to the features provided by this plugin. In the next section, we'll build a survey form as we discussed earlier.

How to Build a Survey Form

In this section, we’ll build a survey form which allows us to collect user feedback about their online shopping experiences.

Head over to the admin side and access the FormCraft > Forms section. Click on the New Form button to create a new form. That should ask you a couple of choices as shown in the following screenshot.

As you can see, while building a new form, you could choose from already existing templates or you could even duplicate an existing form. However, in our case, we’ll go with the Blank option as we’re building our form from scratch. Click on the Blank option and that should present you a nice form building UI as shown in the following screenshot.

There are two main navigation sections; one allows you to configure global settings of your form and the other allows you to add fields to your form. We’ll explore different sections as we go through setting up our form.

Firstly, let’s add a title to our form. Click on the Add Field > Heading. That should add a title field to the form and when you click on the field box it allows you to configure it as shown in the following screenshot. Enter E-commerce Survey in the title field label as shown in the following screenshot. Also, you could adjust the other field specific settings as per your need!

Next, we’ll add a text field to our form. Click on the Add Field > One Line Input and it’ll add a text field as shown in the following screenshot.

I have made it a required field as we’ll need it from the user. In the same way, go ahead and add Email and Mobile No text fields. Next, we’ll add a drop-down field for Industry selection by clicking on the Add Field > Dropdown link. You can configure it as shown in the following screenshot.

In the same way, I’ve added another drop-down which asks the user about their online shopping frequency. I’ve added Very frequently, Frequently, Occasionally and Rarely as options.

Next, I’ve added the checkbox field by clicking on the Add Field > Checkbox link. In my case, I’ve asked about the category the user mostly purchases from and the options are: Clothes, Electronics, Footwear, Books and Furniture.

Moving further, I’ve added a couple of radio fields by clicking on the Add Field > Dropdown link. It’s important to note that we’re selecting the Dropdown option to add radio buttons too. When you want to render radio buttons instead of checkboxes, just uncheck the Allow Multiple Selections option in the field configuration as shown in the following screenshot.

Finally, we’ve asked their device preference by using the drop-down box. We’ve also provided the textarea field just in case they want to describe their overall experience. With all the bits and pieces together, if you click on the Preview button, it should look as per the following screenshot.

Make sure to save the form settings by clicking on the Save button in the top navigation.

Now, we’ve built our form and it’s ready to get published and collect the user input from the front-end. Although, we can see user submissions from the back-end, it would be nice to get an email when there’s a new user submission. You can configure the email address where you would like to get the email in the Settings > Email > Email Notification section as shown in the following screenshot.

So everything is in place now and we can publish our form. As usual, you just need to get the shortcode of your form and you can place it where you want to display the form. You can get the embed code of your form from the Settings > Embed section as shown in the following screenshot.

Copy it and place it in a page or post to display your form. You can check the form submissions at FormCraft > Entries as shown in the following screenshot.

Other Possible Use-Cases

Although, we’ve built a simple survey form, the FormCraft plugin is capable of creating advanced complex forms as well with the configuration options it provides. You can create anything from a simple contact form to a complex condition based dynamic forms.

newsletter forms
feedback forms
appointment forms
complaint forms
quote forms

So it allows you to create various types of forms!

Conclusion

Today, we reviewed the FormCraft WordPress plugin available at CodeCanyon. It’s a form builder plugin which allows you to create different types of forms by a drag and drop interface. Although it’s a commercial plugin, I believe it’s reasonably priced considering the plethora of features it provides.

If you have any suggestions or comments, feel free to use the feed below and I’ll be happy to engage in a conversation!

Web Development

Sunday, October 6, 2019