FF1+ IE7+ Opr8+

DD Opt-in box script

Author: Dynamic Drive

Description:

Demo: We originally created this script for a client that wanted a a lean, high converting opt-in box for getting users to subscribe to their mailing list. Capturing a visitor's email is one of the most important ways to turn visitors into buyers, and this CSS3 powered opt-in box should help you towards that cause. Launched via any link or button on the page, the opt-in box animates to span the entire page. A simple form validation routine is built into the script to ensure designated INPUT fields are not empty, and that the email field is valid.

DD Opt-in box  has no jQuery dependency to cut down on file size and potential script conflicts. The script works in IE7+ and all modern browsers.


Directions: Developer's View

Step 1: Add the below code to the <HEAD> section of your page:

Select All

The code above references the following files, which you should download:

Step 2: Insert the below sample opt-in box markup onto your page, preferably at the very end (right above the closing </body> tag), which also contains the initialization code at the very end to jump start the script:

Select All

Step 3: Finally, add the following arbitrary button to your page to open the opt-in box when clicked on:

<button onClick="ddoptinbox.openclose('open')">Subscribe now</button>

The key is to embed the onClick code in red inside a button or link to activate the opt-in box.

And that's it for installation. Lets discuss the finer details of customizing the script now.

Customization

Customizing the form

The first thing  you'll want to customize is the mockup form, by replacing it with your own. The default markup of the form is deliberately kept as minimal as possible:

<form method="post" action="" onSubmit="return ddoptinbox.validateform(this)">
<p>Sign up now for FREE e-book on how to turn visitors to sales</p>

<input type="text" name="yourname" placeholder="Enter Full Name" required data-validate="required" />
<input type="email" name="youremail" pattern="\S+@\S+\.\S+" placeholder="Enter Email Address" required data-validate="email" />

<input type="submit" value="Subscribe Now" />
</form>

The code in red highlight important built-in features of the form you should transfer over to YOUR form when replacing it with your own form markup:

  1. onSubmit="return...": This code should be transferred as is to your own FORM tag if you wish to plug into DD Opt-in Box's simple form validation routine. It checks that specific INPUT fields are not empty and that the email field is properly filled out on form submission.

  2. required attribute: This attribute is a native HTML5 attribute that designates the form field it's added to as a required field that cannot be empty. In HTML5 capable browsers, a tooltip will appear if the field is empty upon form submission advising/ forcing the user to fill out the field first.

  3. type="email" and pattern="\S+@\S+\.\S+":  Set the email field of your form to HTML5's type="email" to make it easier for users to enter their email, especially on mobile devices where such a field will trigger a change in the popup keyboard to include "@" on the screen. Add pattern="\S+@\S+\.\S+" to validate the email address natively in HTML5 capable browsers so it's the basic email form bla@bla.bla

  4. data-validate="required" and data-validate="email": These attributes act as a fallback to the HTML5 form validation methods above for browsers that don't support native HTML5. They work only on INPUT type form elements. Add the first attribute to INPUT fields that should simply not be empty, while the 2nd to the email field to ensure it conforms to the basic syntax bla@bla.bla. When the user attempts to submit the form, the form will be validated, with an alert message popping up in the case of any invalid fields.

Customizing the rest of the opt-in box

The rest of the opt-in box in general can be freely modified. The close button simply consists of any element with the following onClick event inside it:

<div class="ddoptinclose" onClick="ddoptinbox.openclose('close')">x</div>

The opt-in box is responsive in nature, with the form occupying the entire width of the box when the browser/device is 750px or smaller. This is defined via CSS media queries at the very end of ddoptinbox.css:

@media (max-width: 750px){ /* responsive layout break point */

	.ddoptincontent .ddoptinformcontainer{
		float: none;
		width: 100%;
		height: auto;
		max-width: 100%;
		margin: 0;
	}

}

Initializing the script

To initialize DD Opt-in Box, as seen at the end of the code of Step 2, call the below function:

<script>
ddoptinbox.init({
	boxid: 'ddoptinbox' // opt-in box ID
})

</script>
where "boxid" should be the ID of your Opt-in box DIV container. The initialization code should be added at the very end of the page, following the markup for the Opt-in box.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post
x

Sign up now for FREE e-book on how to turn visitors to sales

Get the exclusive, FREE e-book that's not available on the site

Want to learn how to turn your site visitors into actual sales? Simply enter your email below to get the e-book that reveals all the secrets the pros use to convert traffic to sales.

Copyright 2015 Dynamic Drive