Sliding Contact Form

Works with:
WebPlus X5
WebPlus X2 & X4
Other HTML Editors

View Example Here

The form has four main components, the Styling (CSS), the javascript code libraries (jquery.js and rstools.js), the body HTML and some script.

The two libraries are installed in the <head> of the page between the <head> and </head> tags, as such:

The two libraries in the example above are installed in a folder called ‘scripts’ beneath the page’s folder.

The Styling (Place the following between the <head> and </head> tags of your page)

<style>
#wizard { background:#fff url(images/long.png) repeat scroll 0 0; border:5px solid #789; font-family:Tahoma,Arial; font-size:12px; height:450px; margin:20px auto; width:570px; overflow:hidden; position:relative; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px;
-moz-box-shadow: 0 1px 10px #333; -webkit-box-shadow: 0 1px 10px #333; box-shadow: 0 1px 10px #333; -ms-box-shadow: 0 1px 10px #333; -o-box-shadow: 0 1px 10px #333;}
#wizard .items { width:20000em; clear:both; position:absolute; }
#wizard .page { padding:20px 30px; width:500px; float:left;}
#wizard h2 { border-bottom:1px dotted #ccc; font-size:18px; font-weight:normal; margin:10px 0 0 0; padding-bottom:15px; }
#wizard h2 em { display:block; font-size:14px; color:#666; font-style:normal; margin-top:5px;}
#wizard ul { padding:0px !important; margin:0px !important;}
#wizard li { list-style-type:none; list-style-image:none; margin-bottom:25px; }
#wizard label { font-size:16px; display:block;}
#wizard label strong { color:#789; position:relative; top:-1px;}
#wizard label em { font-size:11px; color:#666; font-style:normal;}
#wizard .text { width:100%; padding:5px; border:1px solid #ccc; color:#456; letter-spacing:1px;}
#wizard select { border:1px solid #ccc; width:94%; padding:4px;}
#wizard label span { color:#b8128f; font-weight:bold; position:relative; top:4px; font-size:20px;}
#wizard .double label { width:50%; float:left;}
#wizard .double .text { width:93%; }
#wizard .clearfix { clear:left; padding-top:10px; }
#wizard .right { float:right; }
#drawer { background:#fff url(images/medium.png) repeat-x scroll 0 0; _background-color:#fff; overflow:visible;position:fixed; left:0; top:0; text-align:center; padding:15px; font-family:Tahoma,Arial; font-size:18px; border-bottom:2px solid #789; width:100%; display:none; z-index:2;}
#drawer samp {font-family:Tahoma,Arial;}
#wizard .error { border:1px solid red; }
#wizard #status { margin:0px !important; height:35px; background:#123 url(images/short.png) repeat-x; padding-left:25px !important; _background:#123;}
#status li { list-style-type:none; list-style-image:none; float:left; color:#fff; padding:8px 30px;}
#status li.active { background-color:#3b2bb3; font-weight:normal; }
</style>

The HTML (Place the following between the <body> and </body> tags of your page)

<<div id="drawer">Please fill in the empty fields marked with a <samp style="color:red;">red</samp> border.</div>
<form id="form_1" name="ContactForm" action="PLACE YOUR OWN FORM PROCESSING ACTION HERE" accept-charset="UTF-8" method="post" target="_self" enctype="multipart/form-data" style="margin:0px;" >
<div id="wizard">
<ul id="status">
  <li class="active"><strong>1.</strong> Contact Info</li>
  <li><strong>2.</strong> Message/Comments</li>
  <li><strong>3.</strong> Prove you're human</li>
</ul>
<div class="items">
  <div class="page">
   <h2>
    <strong>Step 1: </strong> Your contact information
    <em>So that we know who and where to reply to.</em><img src="images/rslogos.png" width="150px" style="position:absolute; left:400px; top:20px;">
   </h2>
   <ul>
    
    <li class="required">
     <label>
      <strong>1.</strong> Enter Your Email Address <span>*</span><br />
      <input type="text" class="text" name="email" onBlur="if ((this.value != this.defaultValue) && ((this.value.indexOf('@') == -1) || (this.value.lastIndexOf('.') < this.value.indexOf('@')))) alert('You must enter a valid email address.'); return false"/>
      <em>The address that you would like us to send our reply to.</em>
     </label>
    </li>
    <li class="required">
     <label>
      <strong>2.</strong> Your first name <br />
      <input type="text" class="text" name="firstname" />
      <em>What you would like us to call you.</em>
     </label>
    </li>
    <li class="required">
     <label>
      <strong>3.</strong> Your last name <span>*</span><br />
      <input type="text" class="text" name="lastname" />
      <em>Your family name.</em>
     </label>
    </li>
    <li class="clearfix">
     <button type="button" class="next right">Continue »</button>
    </li>
   </ul>
  </div>
  <div class="page">
   <h2>
    <strong>Step 2: </strong> Message/Comments <b></b>
    <em>Please tell us what you want to say:</em><img src="images/rslogos.png" width="150px" style="position:absolute; left:950px; top:20px;">
   </h2>
   <ul>
    <li class="required">
     <label>
      <strong>1.</strong> Message/Comments <span>*</span><br />
      <textarea class="text" cols="30" rows="8" name="comments"></textarea>
      <em> Please be as concise as possible but give as much information as possible </em>
     </label>
    </li>
    <li class="clearfix">
     <button type="button" class="prev" style="float:left">« Back</button>
     <button type="button" class="next right">Continue »</button>
    </li>
    <br clear="all" />
   </ul>
  </div>
  <div class="page">
   <h2> 
    <strong>Step 3: </strong> Prove you are human <b></b>
    <em>Fill in the word in the box to show you are not a robot</em><img src="images/rslogos.png" width="150px" style="position:absolute; left:1520px; top:20px;">
   </h2>
   <ul>
    <li class="required">
     <p style="margin-top:30px; text-align:center;">
     <img src="http://www.serifwebresources.com/util/img_verify.php?gen_word=1"><br>
     <input type="text" name="edit_1" size="20">
     <a title="Listen to audio CAPTCHA" href="http://www.serifwebresources.com/util/audio/audio.php?lang="><img alt="Listen to audio CAPTCHA" style="vertical-align: middle" src="http://www.serifwebresources.com/media/icons/audio-desc.png" border="0"></a></p>
    </li>
   </ul>
   <p style="margin-top:30px; text-align:right;">
    <button type="button" class="prev">« Back</button>
    <button type="submit" class="submit">Submit »</button>
   </p>
  </div>
</div>
</div>
</form>

Finally some Script (Place the following just before the </body> tag of your page so that all the page code has loaded before the script runs)

<script>
$(function() {
var root = $("#wizard").scrollable();
var api = root.scrollable(), drawer = $("#drawer");
api.onBeforeSeek(function(event, i) {
if (api.getIndex() < i) {
var page = root.find(".page").eq(api.getIndex()),
   inputs = page.find(".required :input").removeClass("error"),
   empty = inputs.filter(function() {
   return $(this).val().replace(/\s*/g, '') == '';
   });
if (empty.length) {
  drawer.slideDown(function() {
   drawer.css("backgroundColor", "#229");
   setTimeout(function() { drawer.css("backgroundColor", "#fff"); }, 1000);
  });
  empty.addClass("error");
  return false;
} else {
  drawer.slideUp();
}
}
$("#status li").removeClass("active").eq(i).addClass("active");
});
root.find("button.next").keydown(function(e) {
if (e.keyCode == 9) {
api.next();
e.preventDefault();
}
});
});
</script>

The Thanks page is simply css and some HTML to draw a response page with the same look and feel for you to return the user to after the form has been processed.

Code is provided as-is, play with it, do what you like with it, no guarantees, have fun.

If you would like a .wpp file for Serif WebPlus X2, X4 or X5, please let me know via the Sliding Contact Form demo above and I will email a copy to you.

You can get the .js files and the image files here

It should be quite obvious what to modify to customise it to your own requirements, but if you need any help please let me know and I will do my best to help you.

The sliding contact form is built with the libraries jQuery.js and rstools.js (a slightly modified version of jquery.tools) and is based on a concept by flowplayer.org.