Sign up form - Popup to join mailing list

Highlighted
Senior Member

Sign up form - Popup to join mailing list

Hello Community,

 

Searched around the support topics but couldn't find a solution.

I was wondering if ther is a way to create a mailing list popup form that creates the lightbox effect when customers visit our site.

There is an example here using what I would like to implement. http://pepperlu.com/

 

I would also like that tab on the side that is fixed, so returning customers can click there to sign up for the mailing list as well.

Is there a way to make one of these work with Constant Contact? Is it just a matter of gaining some jquery code?

 

Currently on out site Backdrop Outlet we have a sign up form that is functional, here is the code. 

 

<div align="center"><img src="images/rightnav-email.gif" alt="" width="170" height="60" border="0"><br><img src="images/clear.gif" height="5" width="1" border="0"><br>
<form name="ccoptin" action="http://visitor.constantcontact.com/d.jsp" target="_blank" method="post" style="margin-bottom:3;"><input type="text" name="ea" onclick="value=''"  value="Email Address" style="width: 120px" class="emailinput" size="10" maxlength="30"><!--<br>--><img src="images/clear.gif" height="5" width="3" border="0"><!--<br>--><input type="hidden" name="m" value="1100360207432"><input type="hidden" name="p" value="oi"><input type ="submit" value ="JOIN" class="emailbutton"></form>
</div>

 Thanks for the help :)

5 REPLIES 5
Highlighted
Honored Contributor

Re: Sign up form - Popup to join mailing list

Hello,

 

With the form you are using, it is definitely possible to embed the form into a lightbox type setup. However, doing so would definitely require adding some code to your website to place the lightbox, as well as creating the code to place the form inside of the lightbox. I expect that all of the needed work could be done using jQuery, however, I am not familiar enough with any specific pre-built solutions to be able to suggest them.

 

If you have any additional questions, please let us know!

 

Best Regards,

Elijah G.
API Support Engineer
Highlighted
Senior Member

Re: Sign up form - Popup to join mailing list

Thanks....I searched around for a few days and came up with a sloution. I used Reveal Modal for the popup and this Tutorial to create fixed css tabs that have a rollover effect.

 

In action  --- > Backdrop Outlet

Highlighted
Occasional Visitor

Re: Sign up form - Popup to join mailing list

Could you share your code you used to acheive this? I'm trying to do the same thing on our site now.

 

Thank you!

 

Highlighted
Visitor

Re: Sign up form - Popup to join mailing list

I'm also trying to the same thing, would you mind sharing your code to see how did you achieve this?

 

Thank you!

Highlighted
Visitor

Re: Sign up form - Popup to join mailing list

Sure. When I asked this question we were using a different website. We have since upgraded so I don't have a live version showing this still working...but it should work fine.

 

Here is the code I used and I attached some of the files that are needed. You will have to change out the class id's for the .css in order to match your sites styling. 

 

You have to add this to the head area of your hompage"

 

<link rel="stylesheet" href="css/reveal.css">

<script type="text/javascript" src="jquery.reveal.js"></script>        < -- Download Kit from Here to get this file

 

<script type="text/javascript" src="jquery.cookie.js"></script>     < -- Download from Here to get this file

 

 

 

I also added this in the head to make the cookie work on my site.... may be different for your site

 

<script type="text/javascript">
 $(document).ready(function() {
    if ($.cookie('modal_shown') == null) {
        $.cookie('modal_shown', 'yes', { expires: 1, path: '/' });
 		var delay=2000; //in ms, this would mean 5 seconds
        setTimeout(function(){
            $('#myModal').reveal();
        },delay);
    }
});

 

 

I added this inside the body to display the fixed tabs on the side, you have to make a sprite image and change how it is displayed in the .css file:

 

<ul id="followTab">
<li><a class="Popup" href="#" title="10% discount coupon" data-reveal-id="myModal"><span>10% discount coupon</span></a>
<li><a class="Catalog" href="http://www.backdropoutlet.com/catalog.asp" title="View Catalog"><span>View Catalog</span></a>
</ul>

 

For the popup I added this right before the closing </body> tag....   the <form> area is from the signup tools in CC. You'll have to go get yours and place it there.

 

<div id="myModal" class="reveal-modal" style=" display: block; opacity: 1; top: 150px;">

<div id="bannerall">
	<img src="/image/Popup_2014.png">
	</div><br>
	<div id="banner">

			<a href="http://twitter.com/BackdropOutlet"><img src="images/follow-twitter2.gif" alt="" width="28" height="32" border="0"></a><a href="http://www.facebook.com/BackdropOutlet"><img src="images/follow-facebook.gif" alt="" width="28" height="32" border="0"></a><a href="http://pinterest.com/backdropoutlet/"><img src="images/follow-pinterest.gif" alt="" width="29" height="32" border="0"></a><a href="http://www.youtube.com/user/backdropoutlet"><img src="images/follow-youtube.gif" alt="" width="29" height="32" border="0"></a><a href="http://backdropoutlet.blogspot.com/"><img src="images/follow-blogger.gif" alt="" border="0"></a><a href="http://instagram.com/backdropoutlet"><img src="images/follow-instagram2.gif" alt="" border="0"></a>
			<br><br>
			
		          <form>INSERT YOUR CC FORM EMBED CODE HERE / JUST THE FORM</form>

		<p> Coupon code for 10% off will be sent to you in your welcome email.</p>
		</div>
	
	<a class="close-reveal-modal">×</a>

</div>

 

I beleive that is everything. Hope it helps.

Developer Portal

View API documentation, code samples, get your API key.

Visit Page

Register for our "Making Sense of Online Marketing for Retail" Webinar

Join us on Thursday, August 13th at 2pm ET for a free webinar where we'll discuss how to incorporate online marketing into your retail store.

Read More
Featured