Use a Drag-and-Drop Form Builder for WordPress

Forms have always been an integral part of the Internet. As a WordPress website owner, you have no choice but to use them if you want your users to communicate with you. Creating a modern form that follows best practices and conforms to the look and feel of your site, however, can be a daunting task, especially if you aren’t comfortable writing code.

Fortunately, there are several powerful WordPress form builders—offering intuitive WYSIWYG interfaces with drag-and-drop support—available on CodeCanyon today. FormCraft, developed by CodeCanyon elite author nCrafts, is one such form builder.

FormCraft is a GDPR-ready, premium WordPress plugin you can use to create beautiful forms for your website in a matter of minutes. It has plenty of advanced features built right into it, including support for AJAX requests, triggers, pop up messages, and even conditional logic. Through add-ons, it offers additional functionality such as integration with MailChimp and reCAPTCHA.

In this tutorial, I’ll show you how to install the plugin and use some of its most important features.

1. Installing FormCraft

Log in to your Envato account and head over to CodeCanyon so you can purchase a license to use FormCraft. With over 16,000 sales, it’s one of the most popular items there.

After a successful purchase, you’ll have access to a ZIP file you can use to install the plugin.

Log in to your WordPress instance’s admin panel and navigate to Plugins > Add New. Then press the Upload Plugin button. In the next screen, first press the Browse… button to select the ZIP file and then press the Install Now button to begin the installation.

Note that the size of the plugin is 2.3MB. If your WordPress instance complains that the size of the plugin exceeds the maximum allowed size for uploaded files, you’ll have to increase the value of the upload_max_filesize variable in your php.ini file.

Once the plugin is installed, press the Activate Plugin button to start using it.

2. Creating a Form Using a Template

Your WordPress admin panel should now have a new section named FormCraft. Open it and press the New Form button so you can start creating your first form.

In the dialog that pops up, choose the Template option. Because FormCraft comes with nearly a dozen well-designed templates for common types of forms, using one is the easiest and quickest way to create your form.

For now, let’s create a contact form. So choose any Contact template, give a name to the form, and press the Create Form button. I’ll be using the Contact (2) template.

Once the form is ready, you’ll automatically be redirected to an interface where you can edit it.

Editing a form with FormCraft is extremely simple. Usually, all you have to do is click on the form field you want to change and update its properties. For instance, if you want to change the label of the Name field, click on it and, in the dialog that pops up, update the value of the Label property.

To close the dialog, click anywhere outside it.

Finally, if you are satisfied with all your changes, you can make them permanent by pressing the Save button.

3. Displaying the Form

There are two different approaches you can follow to display a form created with FormCraft. The first approach involves using a dedicated form page, which has its own unique URL and displays nothing but the form. This approach involves minimal effort and also makes it easy for you to share the form.

By default, FormCraft automatically creates a dedicated form page for every form. To determine the URL of the form you created in the previous step, click on the Settings button and switch to the General tab.

The second approach is to embed the form inside a post or a page. This approach is more flexible because it allows you to display additional text or images along with the form.

To embed a FormCraft form, you’ll need its shortcode. To know what it is, go to Settings > Embed > Shortcode.

Each form you create with FormCraft will have its own unique and easy-to-memorize shortcode.

At this point, you can create a new post and type in the shortcode to embed the form. Here’s a sample post containing a FormCraft form:

4. Handling Form Submissions

After a user fills in your form, he or she is, of course, going to submit it. There are two different ways you can receive the filled-in form. The first way is to receive it as an email from your WordPress server. It involves no programming and is ideal for handling a small number of form submissions.

To receive a submitted form as an email, go to Settings > Email > Email Setup.

FormCraft can send mails using your default WordPress mail settings or using a custom SMTP configuration. Usually, the default settings are sufficient. So switch to the WP Mail tab and fill in the Sender Name and Sender Email fields according to your preferences. As you may have guessed, the email address you provide here will be the one you’ll be receiving all the form submissions from.

Next, expand the Email Notifications section. Here, you must provide the email address to which all the filled-in forms must be sent. Feel free to use the same email address you typed in earlier.

Leave the rest of the configuration unchanged and press the Save button.

Your first form submission handler is ready. From now on, any time a user submits your form, you’ll receive it as an email.

If you think you’re going to receive thousands of form submissions, however, following a more programmatic approach is better. FormCraft can send submitted form data to any custom URL you specify. If you want to follow this approach, go to Settings > General and type in your custom URL. Furthermore, if you want to receive the submitted form as a JSON document, turn on the POST (JSON) option.

What logic you use to handle the form submission at the custom URL is up to you. The following sample code shows you how to save each submission as a file with a unique name on your server’s file system:

With the above code, each form submission will be saved in a file whose contents look like this:
{
    "": "1",
    "Describe the Issue": "This is awesome!",
    "Email": "[email protected]",
    "Entry ID": 4,
    "Full Name": "Alice K.",
    "Reason for Contact": "Feedback",
    "Text Field": ""
}

5. Creating a Custom Form
If you think none of the built-in templates match your requirements, you can go ahead and create a new form from scratch. For the sake of a realistic example, let us now create a form that allows users to submit movie reviews.
Start by going to the FormCraft dashboard and pressing the New Form button again.
This time, choose the Blank option, give a name to the form, and press the Create Form button.
You'll now see a blank canvas with no form fields. By default, its width is set to 420 px. You are free to change it to a percentage value if you don't want it to have a fixed width.
Next, press the Add field button to add your first form field.

As you can see, FormCraft offers over 15 different types of form fields for you to choose from.
To add a heading to the form, click on the Heading field. Once the heading is added, click on it to modify its properties.
In the dialog that pops up, you can change the text the field displays, adjust its padding, change its font, and even give it a background color.
Next, to accept the name of the movie, click on the Add field button and select the One line input option.
Click on the newly added field to open its properties dialog. Here, give an appropriate label and sublabel to the field. If you want to, you can click on the Icon property to display an icon alongside the field.
To make sure that your users don't leave the field empty, check the Required Field property. Additionally, because movie names can have spaces, check the Allow Spaces field.
Using the Min Chars and Max Chars properties, you can also control the length of the text the user enters.

Click anywhere outside the properties dialog to close it. Then select Add Field > Survey > Star rating. As its name suggests, this field will allow your users to give the movie a star rating.

Similarly, to allow users to type in their thoughts about the movie, add a Textarea to the form.
Finally, select Add field > Submit to add a submit button to the form. If you want the button to be wide, check the Wide Button option.
At this point, your custom form is ready. Hit the Save button to save it.
To take a look at it, you can directly visit its dedicated form page, whose URL you can determine by going to Settings > General.
Here's what the form looks like:

Conclusion
In this tutorial, you learned how to use the FormCraft WordPress plugin to create both template-based and custom forms for your WordPress site. With a little bit of creativity, you can now quickly create forms to perform essential tasks such as gathering email addresses, conducting surveys or quizzes, and accepting bookings.
FormCraft comes with six months of free support from its author. If you have any issues using it, use its comments page on CodeCanyon to get help.
If you want to learn more about form plugins, check out some of these other posts on WordPress form plugins here on Envato Tuts+.


WordPress
Best WordPress Contact Form Plugins
Nona Blackman


WordPress
Choose a Form Builder: The 7 Best WordPress Form Builders Compared
Nona Blackman


WordPress
Quform vs. FormCraft: Top WordPress Form Builder Plugins Compared
Nona Blackman


WordPress
Get Started With a Free Booking Calendar Plugin in WordPress
Sajal Soni