css/ Javascript: Form in a Lightbox

Form in a Lightbox

Showing a form in the lightbox, with fading effect in option, should encourage visitors to fill it…

We have seen how to create a lightbox with fade in effect, we use the same JavaScript code but we also simplify the CSS code because a form has a submit button and a cancel button, so the close button may be removed.

The form is placed directly in the box on the page and does not need to be loaded dynamically, although that option remains possible, and it is also possible to create several boxes and leave a choice to the user. We can adapt the code to do so.

Demonstration

Our example uses a form composed of objects of different types:
– A text field.
– Two alternative radio buttons.
– A selection list.

In our example, data entered and choices made by users are sent to another web page. These data are collected by a JavaScript code placed in this other page:

function retrieve()
{

	var parameters = location.search.substring(1).split("&");
	var temp = parameters[0].split("=");
	mail = unescape(temp[1]);

	temp = parameters[1].split("=");
	sex = unescape(temp[1]);

	temp = parameters[2].split("=");
	city = unescape(temp[1]);

	var data =  document.getElementById("data");

	data.innerHTML = "Email: " + mail + "<brr";
	data.innerHTML += "Genre: " + sex + "<br>";
	data.innerHTML += "City: " + city + "<br>";

}

retrieve();

About the code in the page of the form, it is the same as the code previously used, except that the dynamic filling part is removed. This gives a simplified openbox function.

function openbox(formtitle, fadin)
{
  var box = document.getElementById('box'); 
  document.getElementById('filter').style.display='block';

  var btitle = document.getElementById('boxtitle');
  btitle.innerHTML = formtitle;

  if(fadin)
  {
	 gradient("box", 0);
	 fadein("box");
  }
  else
  { 	
    box.style.display='block';
  }  	
}

We can see that the function as a parameter for the title of the form, and the fadin option, its value is 1 if you ask a fade, and 0 if the display must be immediate.

The function closebox is now associated to the “cancel” button:

<input type="button" name="cancel" value="Cancel" onclick="closebox()">

The CSS is the same with the deletion of some descriptors. Indeed, the code to insert a box in a page is simpler:

<div id="filter"></div>
<div id="box"></box>
    <span id="boxtitle"></span>
    <form method="GET" action="lightbox-form-test.html" >
        ... objects of the form...
    </form>
</div>
</div>

source: xul.fr

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s