Creating Survey Form with free JetFormBuilder Plugin (Step-by-step)
Tags: createsurveyform, wordpressplugins, surveyform, wordpress
Published: 2022-01-21 14:28:45

---
title: Creating Survey Form with free JetFormBuilder Plugin (Step-by-step)
published: true
date: 2022-01-21 10:57:46 UTC
tags: createsurveyform,wordpressplugins,surveyform,wordpress
canonical_url: https://lanamiro.medium.com/creating-survey-form-with-free-jetformbuilder-plugin-step-by-step-bc0d51e18f6e
---

In this tutorial, I would like to make a simple WordPress survey form using the [free JetFormBuilder plugin](https://jetformbuilder.com/). 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.👇

- [Creating Subscription WordPress Form with free JetFormBuilder (Step-by-step)](https://lanamiro.medium.com/creating-subscription-wordpress-form-with-free-jetformbuilder-step-by-step-307428134807)
- [How to Build Free WordPress Contact Us Form with JetFormBuilder? (Step-by-step)](https://lanamiro.medium.com/how-to-build-free-wordpress-contact-us-form-with-jetformbuilder-step-by-step-bf72ab6f07e2)

You’ll need:

- WordPress
- Custom post plugin (I’ll use [JetEngine](https://crocoblock.com/plugins/jetengine/custom-post-type/), feel free to check out [other CPT plugins](https://hackernoon.com/top-custom-post-types-plugins-for-wordpress))
- [free JetFormBuilder plugin](https://jetformbuilder.com/)
- [free JetStyleManager](https://wordpress.org/plugins/jet-style-manager/) (if you want to style form in Gutenberg)

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

[Step 1. Download and Activate WordPress Plugins](#78%D1%819)

[Step 2. Create Custom Post Type for Storing Survey Form Replies](#bd60)

[Step 3. Create New WordPress Form](#b8b0)

[Step 4. Set up Post Submit Actions](#e2a4)

[Step 5. Add the WordPress form to the page](#6478)

[Step 6. Check Survey Form Results](#9f33)

#### 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](https://wordpress.org/plugins/jetformbuilder/), WordPress plugins tab in the dashboard, via the official [jetformbuilder.com](https://jetformbuilder.com/) website.

![jetformbuilder official website](https://cdn-images-1.medium.com/max/1024/1*02qpBTr6RZBzkMWuO6iAEg.png)

We also need a **custom post type plugin** , so feel free to install your favored tool. I have the [JetEngine WordPress plugin](https://crocoblock.com/plugins/jetengine/) 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](https://cdn-images-1.medium.com/max/1024/1*Mii-e_MXk7wFxzYZr1aOMQ.png)

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?](https://lanamiro.medium.com/how-to-display-wordpress-form-submission-with-jetformbuilder-ce7ec1fe1e7d)

#### 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](https://cdn-images-1.medium.com/max/490/1*fFHGF3dMz7P7HN9ZhpBOsg.png)

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

![name CPT](https://cdn-images-1.medium.com/max/1024/1*CpYL4CPZB-tOPaI3RnsaDg.png)

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](https://cdn-images-1.medium.com/max/1024/1*4dhuRbx0vfGBLMWv8KhUMg.png)

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](https://cdn-images-1.medium.com/max/844/1*MJC9PJhhWubKkZIOZUM7gQ.png)

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](https://cdn-images-1.medium.com/max/1024/1*Mi955uYnH3XSUWLt58W2EA.png)

- 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](https://cdn-images-1.medium.com/max/1024/1*D1q-WiQZEAiyR5qaKfEDfA.png)

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

![field options](https://cdn-images-1.medium.com/max/1024/1*alRoSNTsUKekv8KTEzewTg.png)

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

![radio field](https://cdn-images-1.medium.com/max/1024/1*dEP1cA3KXU7wtchUGJSbPg.png)

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

![text field in meta field](https://cdn-images-1.medium.com/max/1024/1*WSTd5HYXNT8fzlTa6PfUaw.png)

- 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](https://cdn-images-1.medium.com/max/1024/1*n01lYAY1ixpzZ5LDgQ-YGw.png)

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

![toggle save as array](https://cdn-images-1.medium.com/max/1024/1*nkUxoJvavO50hQEJQuUEOg.png)

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

![text field](https://cdn-images-1.medium.com/max/1024/1*yqwJgo3WfrNW9RVJcIsiOQ.png)

- 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](https://cdn-images-1.medium.com/max/1024/1*5d-yhFqz_qhfKdwAWveDfA.png)

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

![text field in meta field](https://cdn-images-1.medium.com/max/1024/1*IFDcZ0xQLiIVZW_PK0qvJA.png)

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](https://cdn-images-1.medium.com/max/1024/1*Q1I33EZtGsYhjNWd_IkV6g.png)

#### 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](https://cdn-images-1.medium.com/max/946/1*YHsFv45fCgy4YkUkrfGSrQ.png)

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

![name your wordpress form](https://cdn-images-1.medium.com/max/1024/1*1ZoycX5JWXv2VmLYds3Gsw.png)

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](https://cdn-images-1.medium.com/max/1024/1*1SKX01DmVYU_uY3T4TdurQ.png)

_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_](https://jetformbuilder.com/features/wordpress-blocks-transformation/)_. Press the text icon, and transform to the field you need to:_

![wordpress block transformation](https://cdn-images-1.medium.com/max/836/1*LzYiZeaNuYCOivQEPKAgZA.png)

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](https://cdn-images-1.medium.com/max/752/1*c-OY9-8U1sEx5JiiZjBesg.png)

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](https://cdn-images-1.medium.com/max/1024/1*m_ts16WjR0lD5CY9ymDuWA.png)

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

![wordpress radio field](https://cdn-images-1.medium.com/max/744/1*1RW2n0ZIBnI5Zez_qIRrnw.png)

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](https://cdn-images-1.medium.com/max/1024/1*tn22VMin8wy6v29hgCJo-Q.png)

#### 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](https://cdn-images-1.medium.com/max/318/1*Ukz5YpybDocaE9jDjWwjCA.png)

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](https://cdn-images-1.medium.com/max/1024/1*4gt-eXKCRHy7NQQcBeaJHg.png)

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](https://cdn-images-1.medium.com/max/1024/1*fb2dS53iV8rCcQzPdXs3oQ.png)

Then choose the form you want to add:

![Choose Jetform block](https://cdn-images-1.medium.com/max/1024/1*67VdNKkJfbQQRwjLE4Q-Ew.png)

- **Via shortcode**

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

![add wordpress form with shortcode](https://cdn-images-1.medium.com/max/1024/1*0-rNYsgHsAqIMOcVrUCOvw.png)

And pass the shortcode to your Gutenberg page:

![add the form via shortcode](https://cdn-images-1.medium.com/max/955/1*wRlHEveI5Y_My0X1aJaBfg.png)

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

![free wordpress survey form](https://cdn-images-1.medium.com/max/1024/1*Rvo_Pquu-yKdztqqDszhhQ.png)

#### **Step 6. Check Survey Form Results**

Now, let’s test how it works. 😊

I’ve submitted the form with these data:

![check survey results](https://cdn-images-1.medium.com/max/1024/1*5653PtFIjuMtKWmzX8_tHQ.png)

And Survey reply immediately appears in my CPT:

![check custom post types form replies](https://cdn-images-1.medium.com/max/748/1*5zwNrmqs_N8M7WYeDQYLOQ.png)

And data from the survey reply looks like this:

![display wordpress form results in custom post type](https://cdn-images-1.medium.com/max/1024/1*WWp-277ebNvy6PdQWjdKYA.png)

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.