Creating Survey Form with free JetFormBuilder Plugin (Step-by-step)

In this tutorial, I would like to make a simple WordPress survey form using the free JetFormBuilder plugin. JetFormBuilder was released in January 2021, and it has become a handy friend for WordPress developers.

Thus, I’ve decided to continue my how-to WordPress form series; here are the previous ones.👇

📚Create Guest Post Submission Form

Creating Subscription WordPress Form with free JetFormBuilder (Step-by-step)

How to Build Free WordPress Contact Us Form with JetFormBuilder? (Step-by-step)

You’ll need:

• WordPress
• Custom post plugin (I’ll use JetEngine, feel free to check out other CPT plugins)
• free JetFormBuilder plugin
• free JetStyleManager (if you want to style form in Gutenberg)

How to Build WordPress Survey Form Step-by-Step?

Step 1. Download and Activate WordPress Plugins

Step 2. Create Custom Post Type for Storing Survey Form Replies

Step 3. Create New WordPress Form

Step 4. Set up Post Submit Actions

Step 5. Add the WordPress form to the page

Step 6. Check Survey Form Results

Step 1. Download and Activate WordPress Plugins

To start with, follow one of 3 ways to download the JetFormBuilder free WordPress form plugin: WordPress directory, WordPress plugins tab in the dashboard, via the official jetformbuilder.com website.

We also need a custom post type plugin, so feel free to install your favored tool. I have the JetEngine WordPress plugin installed.

The JetStyleManager is needed only for styling WordPress forms in Gutenberg, but I’m okay with my global styling settings so that I won’t be using it.

After installation and activation, you’ll find the plugins section in the left menu (JetFormBuilder and JetEngine) and the Installed Plugins:

We need a custom post type post plugin for showing WordPress form responses (store our responses).

Recently, I’ve come up with 2 CPT creation options (free & paid) in this tutorial.👇

How to Display WordPress Form Submissions with JetFormBuilder?

Step 2. Create Custom Post Type for Storing Survey Form Replies

To create a custom post type (CPT), select JetEngine -> Post Types -> Add New:

Name your post type accordingly, and press Add Post Type:

Thus, you will see the Survey Replies tab on the left of your WordPress dashboard and in the JetEngine custom post types list:

We need to add Meta Fields named just as our future WordPress form fields.

💡Quick tip: before creating my WP survey form, I make a list of questions I want to include. So, it helps me to copy=paste survey questions to my meta fields, form fields, etc. Here is an example of my draft:

Now, I’d like to cover detailed instructions for creating meta fields for each question from my survey form.

• Name is the simple Text field type, so I need to use only Label (my field name), ID, and Field Type — Text.

• What is your professional experience? — is the Radio Field, so I need to set Label, Field Type, and add Field Options:

Field option is just the choices we’ll have in these questions; I have 4:

• How have you found my blog? — is also the Radio form field, so the configuration is the same as above:

• When you’ve started to read my blog? — is the Text field, so nothing special:

• Which type of content do you prefer? — is the Checkbox field. Hence, I should fill out Label & ID fields, choose Field Type as Checkbox

Then, add field options and toggle Save as an array:

• What would you like to see more in my blog? — is text field too:

• What is your favorite blog post from my blog? — this will be the Select field in my form. To let the user choose the favorite published post from the existing ones. So, in my CPT meta field, I need to select Field Type — Posts:

• Any comments? — is also the simple Text field:

Finally, my Survey Replies custom post type will have 8 meta fields which will be correlated with my Survey form fields:

Step 3. Create New WordPress Form

Now, we are ready to create our Survey WordPress form. Press Add New in the JetFormBuilder dashboard:

I’ll name it Survey Form 😅; the goal of my survey form will be to gather feedback about my blog.

Then, I’ll add simple form fields to gather information for my survey.

⚡Quick tip:

I’ve added text area field type:

But then I decided that my question (What is your professional experience?) is better for the radio field, so there is no need to delete and create again; use the block transformation feature. Press the text icon, and transform to the field you need to:

So, I’ve transformed my text field to radio field, and now I need to add a few items (answers):

Also, if you need the field to be required, just use the toggle. I’ve added items to the question so that the user can choose among 4 options:

So, I’ve added Name, Experience, How you found my blog fields:

Let’s add a few more questions/form fields about user experience with my blog. So, I’ve added:

• Text field (to ask when my reader becomes my subscriber)
• Checkbox field (to let the user choose the favored content type)
• Text field (to share suggestions for future content)
• Select field (to choose among my existing articles the best one)

Step 4. Set up Post Submit Actions

Post submit actions are the way to say what your form needs to do with responses after submission.

So, I want my WordPress form to send the survey reply to my Survey Replies CPT.

Choose the Insert/Update post submit action -> Edit action button in the right side:

Then, select the Post Type (in my case, Survey Replies) and Post Status (I won’t publish the Survey reply, so I’ve chosen Pending review). And next step is to map Meta Fields (we’ve created earlier) and Form Fields.

💡Important: the title of Meta should be the same as your Meta Field ID:

After mapping all form fields, press the update button.

Step 5. Add the WordPress form to the page

There are 2 ways to add the created WordPress form, go to your page (where you want to add the form), and:

• Press the “plus” button to search JetForm block:

Then choose the form you want to add:

• Via shortcode

It means, go to JetFormBuilder forms dashboard copy the shortcode:

And pass the shortcode to your Gutenberg page:

We are done, the WordPress form has been successfully added:

Step 6. Check Survey Form Results

Now, let’s test how it works. 😊

I’ve submitted the form with these data:

And Survey reply immediately appears in my CPT:

And data from the survey reply looks like this:

Everything works flawlessly. 👌

Sum Up

The tutorial may seem too long or complicated, but this is only because I’ve tried to be as detailed, as I can to make it helpful.

What WordPress form builder do you use for surveys? Please share your thoughts and questions in the comments below. I’ll be happy to get your feedback about my form creation series.