LeadPages is an amazing tool for growing your email list! They make it super easy to create sign up pages that actually convert because their templates are all created for maximum conversions.
Seriously, LeadPages is awesome!
As much as I love LeadPages though, there are times where I'd like to capture an email address directly from a call-to-action button on my website. That's where LeadBoxes come in. Here's an example of one my LeadBoxes to my Evergreen Social Media Strategy.
So far so awesome right?!
Well... Not exactly. The Leadbox looks great and it converts well, but the issue is the publishing options LeadPages gives us for LeadBoxes. They give us three options:
The Popup & Exit options aren't really what I'm looking for. What I want is for this LeadBox to show up whenever someone clicks on a button.
So that leaves us with the Standard Option, with three sub options of Plain Text Link, Button, or Image.
Great, they have a button option! So we simply copy the HTML code, and drop it a new code block with Weebly or SquareSpace. Let's see how it looks!
YIKES! Doesn't really match the aesthetic of the rest of my website. LeadPages does give us the option to change the color of the button, but it will never match the native buttons that Weebly or SquareSpace gives us.
I want to have a native Weebly or SquareSpace button make the LeadBox appear. So let's make that happen.
So the first thing I do is choose the Standard LeadBox Option and then delete the text from the "Text to display" input field. Should look something like this.
I then copy and paste the url section of the html code (highlighted in yellow)
And use that as the link of the native SquareSpace or Weebly button.
You could finish here, but the button as is will take the user to another page instead of having the LeadBox load as a popup. ( Not that user friendly )
So let's finish up. Make sure the "Text to display" section is empty ( this is important ). Now copy the entire HTML code
and paste that into a new "Embed Code" for Weebly or "Code Block" for SquareSpace right underneath the native button. If you did this right, when the page is published the "Embed Code" or "Code Block" shouldn't show anything at all, it just does the magic of bringing up the Leadbox as a nice popup when the native button is pressed.
And... You're done!
Here's my native button that brings up my LeadBox.
I hope this tutorial helped you keep the beautiful aesthetics of your website while harnessing the power of LeadPages.
Note: Currently LeadBoxes still open up on a separate page on some mobile browsers no matter what.