Lorem ipsum dolor sit amet, consectetThis Webinar will show you how to create a lead generating form Popup from scratch that opens when clicking a button, and integrate it with MailChimp to track subscribers. The process is similar if you are using other marketing platforms such as MailerLite for example. ur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Hi All, and welcome to this Special Popup Webinar. I am Ziv, a web designer and Elementor’s Lead Educator. And Today we will build a lead generating form popup from scratch.
A lead generation form is a web form meant for capturing emails and other information of potential customers. The most common types of lead generation forms include contact forms, registration forms, and simple newsletter signup forms. Elementors Visual Form Builder is the perfect tool to get the job done.
Okay so what exactly are we doing during this webinar:
We will:
First create a LP with one of Elementor’s Kit’s
We will see how to set a button to open a popup.. Which we will create together, step by step.
Afterwards we will integrate MailChimp in the form to track subscribers. The process is similar if you are using other marketing platforms such as MailerLite for Example.
Lastly we will set the popup to close automatically after submitting the form and set the button on the LP to open the newly created popup.
I’ll go ahead and share my screen so you can see it in action before we get started.
TRANSITION TO SCREEN SHARE
open popup > fill in form (Tim) > submit > see MailChimp
As you can see, the contact details are saved in Elementor Audience, which I created before. You can Use Audiences and groups to organize your subscribers. You can use them in forms, regular campaigns and automations. Soon I’ll show you exactly how to set it up..
It’s important to know that you can apply these skills to create your own attractive and converting form-popups on your websites and landing pages…. for all types of businesses.. such as the Hospitality industry, restaurants, SaaS companies, Gyms, Ecommerce and much more.
Okay enough babbling..let’s make a start! Feel Free to ask questions in the chat, we will try to answer them and I will be pausing every now and then to answer some questions.
In Dashboard > Add new page > Give Name: Landing Page > Edit with Elementor
Let’s control the page layout > For our example today.. We’ll set it to canvas, without header and footer.. because we need a Landing Page and will focus on creating the form popup and integration
Enter Library > Search for the Digital Agency kit > preview and insert the HP > (connect your site to the template library if you haven’t before..
On the page > Click on the button > the kit already has link set to Dynamic Tags > Actions Popup: you can do it yourself as well.. delete it and setup again slowly
Click on field > action:open popup > search for it.. but we first need to build popup, so we will come back to this later.
Let’s publish this LP and use the finder to create the popup.
Click Command or Control + E to open the finder > type “add new popup” > hold down cmd or ctrl to open in a new tab.
name it and create template
Close the library (we will build from scratch)
SHOW THE POPUP IN DEMO
Go to Popup Settings → in the bottom left corner (slow down)
Layout
Width: 805px
Height: custom: 700px
Entrance animation: zoom in
Exit animation: rotate out down right
Animation duration: 1 second
Style
Popup
Background type: classic > drag opacity slider all the way down so it’s transparent
Remove the box shadow
Now we are left with just the content we add, so the section and heading and form widgets
Overlay
Colour: white > drag opacity down to 90%
Close button
Vertical position: 20%
Horizontal position: 16%
Normal
Colour: grey #A3A3A3
Hover
Colour: Teal blue #2FE2DF
Show the hover effect
Time to add a section and make sure the layout is set up accordingly before add the content and style the popup
Add section with 1 column
Layout
Content width: 800
Min height: 700px – to match the popup height we set before
Column position: stretch
Style
Background
Type: classic > upload image: Bg-popUp.png
Position: center center
No repeat
size: custom > 85%
Mouse Effects
Mouse track: direct 0.5
Advanced
Padding: unlink to set individually > change unit to %: 13 right, 3 left > so the blob sticks out of the column a bit
SHOW THE POPUP IN DEMO
I order to get that blob background effect I’ll Drag in an Inner Section > I’ll add the headings and form widgets in it > first delete the left column, so there’s only 1
Let’s position the inner section in the middle
Go back to main column settings > set Vertical Align: Middle, now all the content in column is in the middle of the popup
Time to add the content! Drag in 1 heading widget and a form widget
Go back to the inner section column
Go to Advanced – let’s first add some padding so the widgets are positioned nicely and create some space on the right side for the second blob image
Unlink padding: set to %: 7,24,7,8
Style
Background
Background type: classic
Colour: white
Background overlay
Type: classic > upload image: bubble_bg_popup.png
Position: center right
No repeat
Size: contain
Border
Box shadow:
Colour: drag opacity down to 15%
Blur: 15
Radius: 20px all around
QUESTIONS
Before we move on to styling the widgets,..Let’s see if there are any specific questions about the popup settings and layout we just went over..
Time to style the widgets
Heading 1
Title: Let’s have a chat
Style
Colour: cyan blue: #00dafc → save in picker to use later
Typography:
Montserrat
18
300
Capitalize
Duplicate heading
Chang text: Learn how we helped 100 top brands gain success.
Style:
Colour: black grey #3d4459 → save in picker
Typography:
Varela Round
35
Line-height: 1.2em
Form widget
Content
Form fields
Name
Placeholder text: Full Name
Message
Change Type to: Tel
Label + Placeholder text: Phone
Drag it under the name field
Hide the labels
Submit button
Size: medium
Align: right
Add icon: arrow right
Position: after
Spacing:10
Soon we will set the actions after Submit and Integrate it with MailChimp > First let’s Style the form
Form
Rows gap: 15
Field
Text colour: black grey we saved before #3D4459
Typography:
Montserrat
15
Background colour: light grey #FAFAFA
Border width: 0
Border radius: 5px all around
Button
Background colour: cyan blue we saved before #00dafc
Text colour: white (is already)
Border radius: 30px all around
Publish > Save and Close !!!!
BTW ..besides for lead generating Popups..you can also use the login widget instead of a form.. and create a login popup as well.. Just an idea.
Or a countdown widget to create a timer for discounts. We have a dedicated playlist on our YouTube channel showing creative ways to build popups for specific use cases. So check it out when you can.
QUESTIONS
After some questions we will continue with the popup and make sure it’s integrated with MailChimp’s marketing platform.
Time to connect up the marketing platform.., so all new subscribers that enter their information in your Elementor forms will be immediately reflected in your Subscribers list on your Marketing Platform…in my case I’m integrating with MailChimp.
So feel free to join along if you are too. The process is similar if you are using other marketing platforms such as MailerLite for Example..
Go back to Form > Content > Actions After Submit
Choose MailChimp
Open the new dropdown
We need to add an API Key and choose an Audience
But first we need to set the API in Elementor Integrations
Click on Integrations settings (don’t worry it will open in a new tab)
Scroll to MailChimp
Get your API key from MailChimp’s dashboard
Go to Account > Extras > Keys
Here you will see your API Key, simply copy it. You can generate one if you haven’t done so already
Let’s click on Audience, as you can see I have created an Audience called Elementor. You can add your own Audiences over here as well.
Go back to Elementor Integrations
Paste the key and validate it
Don’t forget to save changes
Go back to the popup > update and refresh
Go back to Form > Content >Actions After Submit > MailChimp
As you can see the API Key works
Here you Select the Audience: Elementor
Map the email fields according to your needs (sometimes we need to save and refresh if it doesn’t show)
Make sure the email is mapped!
You can also allow Double opt-in
which includes a confirmation step where the contact receives an email and has to confirm their signup.
They’re added to your audience as a subscribed contact, along with important information like their IP address and when they signed up and confirmed their subscription.
An advantage of the double opt-in process is that you’ll know the email address is for a valid, monitored inbox. And is recommended for companies who aren’t focused on audience growth, or who have had low open rates or abuse complaints in the past.
Companies also use it to satisfy regulations that may apply in the particular market or country in which they operate.
Go back to actions after submit → Don’t forget this !!
Choose popup > close popup
Update > save and close
Now all that’s left it to set the button on the LP to open this popup
Action: open popup
Select the popup > update > Preview > fill out the form (Alice) and check in MailChimp – Audience > View Contacts > check the new email in the list.
QUESTIONS
[transition to big front shot]
Okaaaaayyyyy well that’s it! Now you know how to create a lead generating form popup from scratch. And integrate it with MailChimp to track subscribers. I’d like to remind you that the process is similar if you are using other marketing platforms such as MailerLite for Example.
I hope you learned a lot during this Webinar, and we managed to answer all of your questions.
So go ahead and apply these skills to create your own attractive and converting form-popups on your websites and landing pages…. No matter the type of business.
I’d like to invite you to join our Facebook group for loads of helpful tips and tricks, if you haven’t already.
And become part of our huge Elementor community full of like-minded web creators.. all helping each other become better at what they do.
Also, don’t forget to subscribe to our Youtube channel, which is full of interesting tutorials to help you master Elementor, with a dedicated Popups playlist full of cool ideas to try out.
Also, on our website, check out the help center for easy access to the knowledge base, FAQs, Docs, and more
Lastly, we will send you a link to the materials needed to create this popup. So feel free to re-watch this webinar and re-create everything in your own time.
So Good luck!
And most of all ——– enjoy being creative!!
Thanks for tuning in, ciao for now!
