Contact Us - Phone Number

+44(0)77 677 270 61-

WebPlus tutorial: jQuery tab slideout contact form

email

This plugin allows you to easily add a sliding tab to your WebPlus project. The tab can contain anything. In our case we will include an <iframe> pointing to a generic web form.

Requirements for this tutorial:

- An advanced usage of WebPlus with regards to the coding functions accessible when selecting Alt+S.

- I am not using Serif Web Resources for the form submission. Instead I am using a .php file that I have created through a software called FormToGo. If you would like to know more about how to implement a script  for an effective form validation in you WebPlus project you can check this YouTube tutorial.

- Since we are using a php file to parse our information and to submit the form, you will need a local instance of Apache server running on your PC. You can do this by downloading and installing XAMPP from this site.

View demo site  Download WebPlus file

 

The Web Plus project

In order to simplify this tutorial I have created a project with 3 pages only: the main page from which the tab will be displayed, the contact form and a confirmation page.

The contact form page has got a simple validation on the email field. No other validations have been put in place. We set the form to use the php file mentioned from the requirements above.

The third and last page used is a nice confirmation page which has a redirection set after 3 second to go back to the contact page.

I normally rename the images and script folder for each of my project. You can do this in WebPlus by opening Site Manager>File and select to rename the default Wpimages and Wpscripts folders. This is important since the image used for the tab will need to be correctly named indicating the path as you can see below in line of code #5.

Getting started

In your <head> tag you need to add the references to the jQuery plug-ins:

1
2
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>

Followed by the attributes and settings for the position of the image-tab and the sliding effect:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will become your tab
pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
imageHeight: '122px', //height of tab image //Optionally can be set using css
imageWidth: '40px', //width of tab image //Optionally can be set using css
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '100px', //position from the top/ use if tabLocation is left or right
leftPos: '20px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
});

Html fragment 1

What do you need to notice here is that:

- In order to get this slider plug-in to work you have to tell the script the exact path for the tab-image.

- The dimensions of the image will need to be set correctly in the options that will be placed within the <head> section.

- In this version, using the code above, I am linking directly to google code for the jQuery library as well as the plug-in. I am not hosting the code under my script folder.

The CSS (styling of your slider content):

Select Alt+S from your WP project and look for CSS section of the page (or Master page) where to paste the following line of code:

1
2
3
4
5
6
7
8
9
.slide-out-div
{

width: 360px;
height: 330px;
background: #ccc;
border: 1px solid #29216d;

}

Code fragment 2

What do you need to notice here is that:

- Width and Height are the same of the one set for the contact.html page created.

- The background colour will be covered by the one set on the contact.html page. If the page background is set to transparent, then you can control the colour (even setting an image) from here.

- Border can also be tailored as you wish.

 

The web form

This can be attached anywhere in your page. I have put mine right above my </body> tag and I have used an iframe that will look at the contact.html page to populate the slideout tab:

1
2
3
4
<div class="slide-out-div">
<a class="handle" href="contact.html"></a>
<iframe id="ifrm" name="ifrm" src="contact.html" frameborder="0" scrolling="no" style="width:360px;height:330px;"></iframe>
</div>

Html fragment 3

What do you need to notice here:

- The style of the iframe here sets the exact width and height attributes that we have established for the contact.html page.

- The iframe has a source that, as you can see, refers to the contact page we have created by the exact name.

 

What should happen then?

As soon as you click on the contact tab, the slideout web-form will be displayed. Insert your details (remember the validation set for the email field) and click Submit.

The .php code that has been generated using FormToGo will do the rest:

- Delivering the email to the email account set on the code

- Redirecting the section of the slideout frame to the contact-confirm.html page.

- From contact-confirm.html a second redirection will reset the original contact form.

 

I really hope you have found this tutorial useful and that you have anjoyed it.

Please feel free to leave a comment below and don’t forget to subscribe to my RSS feed for further tutorials about WebPlus X5.

 (Reference for the scripts used in this tutorial can be found at the following website: http://www.building58.com/examples/tabSlideOut.html )

 

Print Friendly

One Response to “WebPlus tutorial: jQuery tab slideout contact form”

Leave a Reply

*