Go4Expert - Footer SlideUp For Any Website and Any AutoResponder

After AWeber, GetResponse and Feedburner SlideUp there has been so many requests for Slideup especially for Blogger and other Autoresponders and so here I come up with a general SlideUp HTML code that you can use for any any autoresponder with any CMS of your choice including static pages. As this is a general HTML code this would require some basic knowledge of HTML.

1. Style

Let us begin CSS. You can add the following to your existing CSS file or can to a new CSS file and link it.

Code:

div#footerform{ background:#6699CC; text-align:center; position:fixed; bottom:0; left:0; width:100%; height:46px; border-top:3px solid #AE670A; display:none; z-index: 10; }

div#footerform form { display:inline; }

div#footerform .formInputfooter { width:154px; height:20px; padding:4px 5px 0 25px; margin:1px; border:1px solid #aaa; text-align:left; color:#727272; vertical-align:middle; }

div#footerform .formInputSubmitfooter { height:26px; vertical-align:middle; }

div#footerform .tagline { font-size: 14px; font-weight: bold; font-family: arial; }

div#footerform .close { float:right; margin:4px 8px 0px 0px; }

Apart from the above CSS properties you can add the following. These are optional and if you know more about CSS use the following. It is not a requirement for the SlideUp to work.

Code:

div#footerform .formInputNamefooter { background:url(images/name.png) no-repeat; }

div#footerform .formInputEmailfooter { background:url(images/mail.png) no-repeat; }

If you have added the extra CSS styling you would need the following images which you can save and use them.

http://cache.g4estatic.com/footer-sl...mages/name.png

http://cache.g4estatic.com/footer-sl...mages/mail.png

Make sure you have class="formInputfooter formInputNamefooter" and class="formInputfooter formInputEmailfooter" styles applied to the name and email fields of your HTML code which we will generate in last step.

2. Scripts

We will need 3 JS files.

jquery-1.3.2.min.js - jQuery framework
jquery-cookie.js - jQuery Library for cookies
jquery-libs.js - jQuery libraries for Footer SlideUp created by me

Download them and upload them to your server using FTP.

After you upload the CSS and JS files to your server you will have to have the needed html code to link to the CSS and JS files. You can put the following code anywhere on the page but it should be at least just above the final HTML code that we will put in the next step.

Code:

<link rel="stylesheet" href="http://yourdomain.com/css/folder/path/style.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://yourdomain.com/js/folder/path/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="http://yourdomain/js/folder/path/jquery-cookie.js"></script>

<script type="text/javascript" src="http://yourdomain/js/folder/path/jquery-libs.js"></script>

If you are using existing CSS file to add the above CSS code you can avoid the first line. Remember to replace yourdomain.com with the correct path to the uploaded files.

3. HTML

The last and final thing thing we will do is the HTML. Generate the HTML code for your autoresponder and grab the HTML of it now.

HTML Code:

<div id="footerform">

        <div class="close">

                <div id="closefornow"> <a href="#" onclick="slidedown(); return false;">Close for now.</a></div>

            <div id="dontshowanymore"><a href="#" onclick="slidedown(); return false;">Never show again.</a></div>

        </div>

        <!-- Your Tag Line-->

        <div class="tagline">Subscribe By Email for Updates.</div>

        <!-- HTML Web Form TO be Replace -->

        <form method="post" action="" target="_new">

                <input type="text" name="name" class="formInputfooter formInputNamefooter" value="What is your first name?" size="20" />

                <input type="text" name="from" class="formInputfooter formInputEmailfooter" value="What is your email?" size="20" />

                <input type="submit" name="submit" class="formInputSubmitfooter" value="Subscribe Now !!!">

        </form>

        <!-- /HTML Web Form TO be Replace -->

</div>

Note that it is important that you customize the above html to add your fields from your HTML code that you want your user to subscribe to. You should insert your form html code between  and . If you are using extra CSS styling options do not miss to add class="formInputfooter formInputNamefooter" and class="formInputfooter formInputEmailfooter" to your name and email field.

Download the complete sample or check the Working Sample of the Code

If you have any issues implementing the above just share them in comments below and I will be more than happy to help.