How to create a newsletter sign up modal with Gravity Forms

September 22, 2020 by JetSloth


How to create a newsletter sign up modal with Gravity Forms

In this tutorial, we’ll show you how to create a newsletter sign up modal with Gravity Forms. We’ve built a unique tool to help make it super easy!

How to create a newsletter sign up modal with Gravity Forms

We’ve designed and built a simple online tool to help with the process! Check-out our free online tool – newsletter sign up modal with Gravity Forms below.

Open modal generator

How to use the online modal designer tool

Open the modal generator at the above link. The tool itself is super simple to use, just select your desired layout option from one for the 4 available layouts. Then choose the desired color theme you’d like. That’s it.

Available layouts

  • Centred
  • Bottom Centered
  • Bottom Left
  • Bottom Right

Available color themes

  • Blue
  • Red
  • Green
  • Orange
  • Purple
  • Navy
  • Black

Next, click the “Get Code” button to grab all the bit’s you’ll need for this tutorial.

Gravity Forms newsletter modal online tool generator

Downloading and importing the supplied form

Once you’re ready to download your form, there are 3 steps you’ll need to do on your site. Let’s cover these off below.

Step 1 – Download and import your form

Click the download form button, you can’t miss it. Once downloaded, unzip the file, and you’ll see the form in JSON format called “Newsletter-Modal.JSON” – we’ll use this to import into Gravity Forms.

Go to Gravity Forms Import/Export -> Import forms -> add the select the Newsletter-Modal.JSON file you just unzipped. Click import and you’re form will be imported.

For more information on importing forms into Gravity forms, check out the the Gravity Forms Doucmentation.


Step 2 – Add the class names

Now that you’ve imported the supplied form. Head over to the form settings screen for the form, and add the class names provided.  These layout and color classes will control both the layout and theme of your form.

For more information on form settings screen, check out the the Gravity Forms Doucmentation.


Paste them into the “CSS Class Name” input as shown below.


Step 3 – Adding the CSS

The last step is to copy the CSS from the online generator. Copy the below CSS and apply it to your theme. There are many ways to add CSS to your website or theme. For more information on adding custom CSS to your website, check out the the Gravity Forms Doucmentation.


Step 4 – Insert your form

Now that your form is setup with the custom styles and class names, you need to add it to your site.

The easiest way to do this is probably the way you’re already doing it, using the Gravity Forms short code. This will work fine but only show the form on that 1 page with the short code added.

Make sure you turn on Ajax when you embed your form (ajax=”true”) – and form title and description to “false”. An example shortcode would be gravityform id=”1″ title=”false” description=”false” ajax=”true” – Just change the form ID to yours.

Adding the form to all pages

To do this, we recommend adding either the form shortcode to a global area of your website, such as the footer or header that get shown on every page. You can do this with short code inside your page builder or straight into your theme.

For more information on adding Gravity Forms forms to your website, check out the the Gravity Forms Doucmentation.

Connecting your form to mail subscription software


The best way to connect your forms to a mail sending software is to use Gravity Forms add-ons for MailChimp or Campaign montir.For more information on this see below Gravity Forms Documentaiton:

Changing the delay in Javascript

We’ve added a way to control how long it takes to show your new newsletter modal. The default is set to 10 seconds. Which means the modal will not appear on your website until 10 seconds have passed.

If you take a look at the imported form fields, you’ll see a HTML field, this is housing all our custom Javascript for the newsletter modal. Within there is a line that controls the delay. Change this default “10” to “5” if you only want it to show after a shorter time of 5 seconds.


My forms look wierd

Yup, this might happened. This is most likely a conflict with your page bulder theme. The theme might be trying to override the custom CSS you added. Using ‘!important” at the end of the CSS from the builder might help this.

My new fields are not styled or break the modal

The CSS supplied in the online tool is only setup to style the first name, last name and consent fields. If you plan on adding more fields or making the form longer, this will probably break some of the CSS styles and you’ll need to add new CSS styles to the new fields you add. Sorry we can’t cater for everyone here!

I’m getting a JS error or it’s not working

Try checking Chrome’s console log to see if there is any Javascript errors being displayed.

Form Confirmation

The current form you imported is set to display inline text after submission. You can change this to redirect to a unique page or just update the default text. We suggest keeping this as the “text” or “page” redirect option.

For more information on updating Gravity Forms confirmations see the documentation.

Summary & notes

Due to the somewhat custom nature of this tutorial, we’re only able to offer very basic support to help you get these examples working. Evey WordPress install is unique for your needs and thus near impossible for us to help implement these examples into everyone’s site. Take these examples as inspiration to try it yourself and see if you learn anything along the way. We’ll help where we can but can’t promise the world. Thanks for understanding.

Now whilst this example might get you 70% of what you’re after, you’ll probably need to further customise the CSS to get it looking how you want it. WordPress themes differ dramatically, so more often than not, you’ll need to tweak the example custom CSS provided further.

These examples are currently not mobile-friendly. Yeh we know we know, we’ll get to it as soon as possible and update the CSS example code above when we do.