Home  >  Article  >  CMS Tutorial  >  Create stunning WordPress forms with the FormCraft plugin

Create stunning WordPress forms with the FormCraft plugin

WBOY
WBOYOriginal
2023-08-31 22:49:011037browse

In this article, we will review the FormCraft WordPress plugin that allows you to create stunning forms with drag and drop. It is one of the most popular and useful form builders on the market today.

Forms are one of the most important parts of your website, they allow you to collect various types of information from your visitors. Whether it’s a simple contact, feedback or a full questionnaire, it’s always handy to have a plugin that allows you to build it easily. As a WordPress website builder, you want a plugin that allows you to dynamically create professional forms and collect form submissions on different endpoints.

A number of extensions and form builder scripts are available for creating forms on your WordPress site. In addition to free plugins, you can also find commercial options that offer ready-to-use advanced features and extended support. With the commercial option, you can also expect high-quality code, bug fixes, and regular feature enhancements.

In this article, we will discuss the FormCraft WordPress plugin, which you can buy at CodeCanyon at a very reasonable price considering the number of features it offers. It is one of the most powerful drag-and-drop form builders and comes with dozens of features and several built-in templates. This or a similar tool is a must-have for website builders looking for a professional form builder script.

Let’s take a look at the features this plugin brings:

  • Drag and Drop Form Builder
  • Support multiple templates

  • Responsive and scalable
  • Conditional logic for showing/hiding fields
  • Form Views and Submission Analysis
  • Built-in GDPR support
  • Multi-site support via additional plugins
  • there are more

FormCraft WordPress plugin offers tons of useful features that come in handy and make it easy to create rich-looking forms on your WordPress website.

What we will build: Questionnaire

In this article, we will build a survey form that allows you to collect different types of information from users. We mainly ask users some questions about their online shopping choices and habits, as well as their basic personal information.

To achieve this, we will create a form that asks some basic questions about their personal information, and we will also ask specific questions about the survey.

The overall form is as follows:

使用 FormCraft 插件创建令人惊叹的 WordPress 表单

That’s the agenda for this tutorial. In the next section we will learn how to download and install this plugin.

Install and purchase code registration

In this section, we will learn how to install and configure the FormCraft WordPress plugin after purchasing and downloading it from CodeCanyon. For this post, I’m using WordPress 5.2.3, FormCraft WordPress plugin version 3. If you want to continue reading this article, I recommend you install it.

After purchasing this plugin, you can download the zip file. This is the WordPress plugin file itself, which you can use to install this plugin from the WordPress admin. Continue following the standard WordPress plugin installation process and you’re almost done.

Next, we need to register the purchase code of the plug-in. First, you need to retrieve your purchase code from the CodeCanyon download section. Click the Download > License Certificate link and you will get a text file containing the product purchase code.

Once you have the purchase code, click FormCraft in the left sidebar of the admin side, this will display the plugin dashboard page. On this page, click the Click here to register your copy of FormCraft link and enter and register your code. In this way, you have unlocked the full power of FormCraft.

We are now ready to explore the plugin in depth. In the next section we will cover the different configuration sections provided by the plugin.

Quick Browse FormCraft Configuration Section

In this section, we will briefly discuss the backend configuration part provided by the plugin. Once you install the FormCraft plugin, it will add a link in the left sidebar. Let's take a brief look at each section.

sheet

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

In addition to this, you can also see the Form Analysis section, which displays statistics about different aspects of the form.

entry

This is an entry list page that lists all form submission entries in all forms. You can use the search interface to filter specific records, and there's an Export button that lets you export entries.

There is also Entry View, which shows you a detailed view of the form submission entries.

opinion

Form Insights is a new feature added in FormCraft 3.3 that makes FormCraft a powerful survey and polling tool. FormCraft can analyze certain fields to generate insights, such as dropdowns, ratings, checkboxes, dates, sliders, and more.

Upload

This page lists all files uploaded through different forms.

license

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

The above is a brief introduction to the functions provided by this plug-in. In the next section, we will build a survey form following the previous discussion.

How to build a survey form

In this section, we will build a survey form that will allow us to collect user feedback about their online shopping experience.

Go to the admin and access the FormCraft > Forms section. Click the New Form button to create a new form. This should give you a few options, as shown in the screenshot below.

使用 FormCraft 插件创建令人惊叹的 WordPress 表单

As you can see, when building a new form, you can choose from existing templates or even copy an existing form. However, in our example we will use the Blank option since we are building the form from scratch. Click on the Blank option, this will give you a nice form building user interface as shown in the screenshot below.

使用 FormCraft 插件创建令人惊叹的 WordPress 表单

There are two main navigation sections; one allows you to configure the global settings of the form, and the other allows you to add fields to the form. We'll explore the different parts as we set up the form.

First, let's add a title to the form. Click Add Field>Title. This should add a Title field to the form which will allow you to configure it when you click on the field box as shown in the following screenshot. Enter Ecommerce Survey in the title field label. Additionally, you can adjust other field-specific settings as needed!

使用 FormCraft 插件创建令人惊叹的 WordPress 表单

Next, we will add a text field to the form. Click Add Field>Single Line Input and it will add a text field as shown in the screenshot below.

使用 FormCraft 插件创建令人惊叹的 WordPress 表单

I have made this a required field because we need the user to provide it. In the same manner, continue adding the Email and Mobile Number text fields. Next, we will add a drop-down field for the Industry selection by clicking the Add Field>Dropdown link. You can configure it as shown below.

使用 FormCraft 插件创建令人惊叹的 WordPress 表单

In the same way, I added another dropdown menu asking the user how often they shop online. I added very often, often, occasionally and rarely as options.

Next, I added the checkbox field by clicking the Add Field > Checkbox link. In my case, I asked the user what category they mainly purchased, and the options included clothes, electronics, shoes,>Books and furniture.

Taking it a step further, I added a few radio-select fields by clicking the Add Field > Dropdown link. It’s worth noting that we also selected the Dropdown option to add radio buttons. When you want to render radio buttons instead of checkboxes, just uncheck the Allow multiple selection option in the field configuration.

使用 FormCraft 插件创建令人惊叹的 WordPress 表单

Finally, we ask for their device preferences via a drop-down box. We also provide a text area field in case they want to describe their overall experience. Putting all the bits and pieces together, it should look like the image below if you click the Preview button.

使用 FormCraft 插件创建令人惊叹的 WordPress 表单

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

Now we have the form built and ready to publish and collect user input from the front end. While we can see user submissions from the backend, it would be nice to receive an email when there is a new user submission. You can configure the email address to which you want to receive emails in the Settings > Email > Email Notifications section.

使用 FormCraft 插件创建令人惊叹的 WordPress 表单

Now everything is ready, we can publish the form. As usual, you just need to get the shortcode for your form, which you can then place where you want your form to appear. You can get the embed code for your form from the Settings > Embed section.

使用 FormCraft 插件创建令人惊叹的 WordPress 表单

Copy it and place it on a page or post to display your form. You can view form submission status in FormCraft > Entry.

使用 FormCraft 插件创建令人惊叹的 WordPress 表单

Other possible use cases

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

  • SMS Form
  • feedback form
  • Reservation form
  • Complaint form
  • Quotation

So it allows you to create various types of forms!

in conclusion

Today we review the FormCraft WordPress plugin available on CodeCanyon. It is a form builder plugin that allows you to create different types of forms using a drag-and-drop interface. Although it is a commercial plugin, I believe its price is reasonable considering the numerous features it offers.

If you have any suggestions or comments, feel free to use the feed below and I'd love to have a conversation!

The above is the detailed content of Create stunning WordPress forms with the FormCraft plugin. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn