DEV Community

Lana Miro
Lana Miro

Posted on • Originally published at lanamiro.Medium on

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

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.

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, and upload it to your WordPress dashboard:

JetFormBuilder free WordPress form plugin

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

jetformbuilder plugin

  1. Directly from jetformbuilder.com website:

jetformbuilder official website

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

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

jetformbuilder section

WordPress Subscription Form Guide

#1 Create New WordPress Form

Create wordpress form

#2 Choose subscription form pattern (template)

choose subscription wordpress form template

#3 Edit fields (if needed)

I’ve deleted the image, edited the text:

edit wordpress subscription form fields

#4 Style your form

With the free JetStyleManager plugin (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

#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

In the Edit tab, I’ve passed my API key from MailChimp and chose the audience list:

mailchimp api key

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

map wordpress form fields

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

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

add wordpress subscribe form via jetform block

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

choose the wordpress form

And we are done, my subscription form is ready:

add subscribe wordpress form to the page

Where Do My Form Subscribers Lay?

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

subscribe wp form test

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

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:

Top comments (0)