ScreenShot  at

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.

FormCraft on CodeCanyon

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.

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

FormCraft home screen

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.

Creating a form from a 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.

Editing a form field

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.

General tab showing the URL of the form page

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.

Embed tab showing the 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:

WordPress post with an embedded 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.

Email setup screen

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.

Configuring a custom URL

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:

Leave a Comment

Scroll to Top