Creating Subscription WordPress Form with free JetFormBuilder (Step-by-step)
Tags: wordpress, subscription, form
Published: 2022-01-21 14:31:08

---
title: Creating Subscription WordPress Form with free JetFormBuilder (Step-by-step)
published: true
date: 2022-01-13 13:02:22 UTC
tags: wordpress,subscription,form
canonical_url: https://lanamiro.medium.com/creating-subscription-wordpress-form-with-free-jetformbuilder-step-by-step-307428134807
---

The Subscription WordPress form is aimed to get more subscribers to your newsletter. In this tutorial, I’ll go through the form creation process using the [**free JetFormBuilder plugin**](https://wordpress.org/plugins/jetformbuilder/).

JetFormBuilder plugin is the free WP form plugin for creating forms in Gutenberg editor. So, today I’ve decided to show you how to create a subscription form step-by-step.

In this tutorial, you’ll find lots of screenshots, and less text. 😁

For this tutorial you need:

➡WordPress

➡free JetFormBuilder plugin

➡free MailChimp account

### How to Download the JetFormBuilder Plugin?

There are 3 ways to download this free WordPress form plugin:

1. Go to the WordPress directory, [download the plugin](https://wordpress.org/plugins/jetformbuilder/), and upload it to your WordPress dashboard:

![JetFormBuilder free WordPress form plugin](https://cdn-images-1.medium.com/max/1024/1*3ts2BFykW6IYPLhMMLItuA.png)

2. Open your Plugins dashboard, and search for JetFormBuilder (you can also download JetStyleManager too, as we’ll need it for styling later):

![jetformbuilder plugin](https://cdn-images-1.medium.com/max/1024/1*jVxMSxl6F5B3f078my5Rpg.png)

3. Directly from [jetformbuilder.com](https://jetformbuilder.com/) website:

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

Choose the comfortable way for you, and let’s get started.

### JetFormBuilder Plugin Installation

To get started, I’ve installed JetFormBuilder from my WordPress plugins dashboard (using search), then pressed **Activate** :

![activate jetformbuilder form plugin](https://cdn-images-1.medium.com/max/1024/1*z7T238fNPGgxEm1dqkxplA.png)

After this, you’ll find the plugin section in the left menu, and in the Installed Plugins:

![jetformbuilder section](https://cdn-images-1.medium.com/max/1024/1*zQwrqcscg_GnmJkQoArbqg.png)

### WordPress Subscription Form Guide

#### #1 Create New WordPress Form

![Create wordpress form](https://cdn-images-1.medium.com/max/515/1*eoGJFgDOZ7NIh4ByScYPrQ.png)

#### #2 Choose subscription form pattern (template)

![choose subscription wordpress form template](https://cdn-images-1.medium.com/max/1024/1*5TKzjqOJTsVhIqsZ3gPtKQ.png)

#### #3 Edit fields (if needed)

I’ve deleted the image, edited the text:

![edit wordpress subscription form fields](https://cdn-images-1.medium.com/max/1024/1*2VKK1cgzH3HtwRZr157GWA.png)

#### #4 Style your form

With the free [JetStyleManager plugin](https://wordpress.org/plugins/jet-style-manager/) (I’ve uploaded and activated the plugin earlier), you can edit your form as needed. But I’ll change only the color of the “subscribe to new blog posts” text.

![style wordpress subscription form](https://cdn-images-1.medium.com/max/688/1*X3nnxaBUJhPwJ4qsg23hGA.png)

#### #5 Setup post submit action

I want to receive all subscriptions to my MailChimp dashboard, that’s why I’ll use MailChimp post submit action.

For this, go to post submit actions, add a new one, and choose the **Edit button** :

![set up mailchimp post submit action](https://cdn-images-1.medium.com/max/705/1*3Jw-lc26gDDyOO-Aj1azEg.png)

In the Edit tab, I’ve passed my [API key from MailChimp](https://mailchimp.com/help/about-api-keys/) and chose the audience list:

![mailchimp api key](https://cdn-images-1.medium.com/max/1024/1*t9JMTqsFuGjJ2xizfyR2_w.png)

After choosing the audience list, I need to map my fields (Name with name, email with email):

![map wordpress form fields](https://cdn-images-1.medium.com/max/1024/1*fcmTLyL_3TTFghwzuiLs5w.png)

And press the Update button.

Publish the form to save all settings, and let’s add the form to the page.

#### #6 Add the subscription form to the Gutenberg page

There are 2 ways to add the created WordPress form:

1. Via **Shortcode** : copy the shortcode in the Forms dashboard and pass it to your page.

![add wordpress subscription form via shortcode](https://cdn-images-1.medium.com/max/1024/1*dHfXdsxm46oztacqlEwYvg.png)

2. Go to your page, press Plus icon, and search for JetForm block:

![add wordpress subscribe form via jetform block](https://cdn-images-1.medium.com/max/1024/1*hC8wXdLtluKk0545tkhnJQ.png)

Then choose the needed form (in my case, this is the subscription form):

![choose the wordpress form](https://cdn-images-1.medium.com/max/487/1*ysGftLfWHe4SKe1h4PjG1Q.png)

And we are done, my subscription form is ready:

![add subscribe wordpress form to the page](https://cdn-images-1.medium.com/max/1024/1*hdVwa6m3dMjXGiZcTO9eAA.png)

### Where Do My Form Subscribers Lay?

So, after creating the form, let’s test to see how does it work:

![subscribe wp form test](https://cdn-images-1.medium.com/max/1024/1*ZxsAwYIRPxqWWbIXstERDQ.png)

After pressing Subscribe button, you’ll see the message — Form Successfully submitted (you can edit it also).

And my subscription successfully goes to my free MailChimp account:

![mailchimp audience list](https://cdn-images-1.medium.com/max/1024/1*GWHgsZFrORKmF6WGeJ8lwQ.png)

Voila!😊

### Sum Up

Hope this easy and quick WordPress subscription form tutorial was helpful for you. Don’t hesitate to share what would you like to see next in the comments below.⬇

💪Helpful resources used in this tutorial:

- [JetFormBuilder subscribe form documentation](https://jetformbuilder.com/features/wordpress-subscribe-form/)
- [JetFormBuilder MailChimp post submit action](https://jetformbuilder.com/features/mailchimp/)