Showing a 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

Email adress:

Male Female

City of current residence

To make the form appearing, click here.

In this example, a fading effect is applied, this may be disabled, to do so, click on:

Form with no fading effect.

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="shadowing"></div>
<div id="box"></box>
    <span id="boxtitle"></span>
    <form method="GET" action="lightbox-form-test.html" >
        ... objects of the form...
    </form>
</div>
</div>
© 2008-2014 Xul.fr