Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WordPress
Code

How to Build Amazing Forms in WordPress With the FormCraft Plugin

by
Difficulty:BeginnerLength:MediumLanguages:

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 a 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 to 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 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 number of features it provides. It’s one of the most powerful drag-and-drop form builders, and it comes with 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 to the table:

  • drag-and-drop form builder
  • support for several templates
  • 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:

The completed survey form

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 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.

We’re now ready to dive into 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've installed 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 shows 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 all the files uploaded via different forms.

License

Finally, this section displays your license information. It also displays the days left to renew the 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 feedback from users 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 give you a couple of choices, as shown in the following screenshot.

Create a new form options

As you can see, while building a new form, you could choose from 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 with a nice form-building UI, as shown in the following screenshot.

Creating a blank form

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

Firstly, let’s add a title to our form. Click on 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. Also, you could adjust the other field-specific settings as you need!

Add a form title

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

Add a text field

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 below.

Add dropdown box

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.

Radio button configuration

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 like the image below.

Preview of the completed form

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 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.

Email notification settings

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.

Short Code

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

Submission Preview

Other Possible Use Cases

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

  • 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 using 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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.