DEV Community

Lana Miro
Lana Miro

Posted on • Originally published at lanamiro.Medium on

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

You’ll need:

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

jetformbuilder official 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 :

install custom post type plugin

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 :

Create Custom Post Type for Storing Survey Form Replies

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

name CPT

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

custom post types list in wordpress

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:

draft of wordpress form fields

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.

create name field

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

create radio form field

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

field options

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

radio field

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

text field in meta field

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

checkbox field in meta field

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

toggle save as array

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

text field

  • 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:

field type posts

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

text field in meta field

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

wordpress meta fields examples

Step 3. Create New WordPress Form

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

create wordpress survey form

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

name your wordpress form

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

⚡Quick tip:

I’ve added text area field type:

form field types

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:

wordpress block transformation

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

transform gutenberg form field block

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:

radio field type

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

wordpress radio field

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)

wordpress form fields

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:

set up wordpress form post submit actions

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: t he title of Meta should be the same as your Meta Field ID:

edit Insert update post submit actions

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:

add wordpress form to the page

Then choose the form you want to add:

Choose Jetform block

  • Via shortcode

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

add wordpress form with shortcode

And pass the shortcode to your Gutenberg page:

add the form via shortcode

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

free wordpress survey form

Step 6. Check Survey Form Results

Now, let’s test how it works. 😊

I’ve submitted the form with these data:

check survey results

And Survey reply immediately appears in my CPT:

check custom post types form replies

And data from the survey reply looks like this:

display wordpress form results in custom post type

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.

Top comments (0)

An Animated Guide to Node.js Event Loop

>> Check out this classic DEV post <<