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.
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.
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.
Important
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.
Troubleshooting
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
Disclaimer
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.
