Floating contact form, help needed
Hi Ladies and Gents
I looking to implement the follow contact form for our website
Full detail can be found here http://www.building58.com/examples/tabSlideOut.html
this has the contact form working, I we would like to use it so our customers dont have to leave the page they are on.
has anyone tried this before out there? Is there any coding changes needed for actinic?
I have copied and pasted the code from the site below.
See that little tab over there that says 'Contact'? If you click that it will slide out. This plugin allows you to easily add one of those to your page.
The most important part of getting this plugin to work is to have your image path and image dimensions set correctly in the options. In this version, using the code below, I am linking directly to google code for the jquery library as well as the plugin which I am hosting at code.google.com.
Getting started
In your <head> tag you need the javascript (with the options customized for your image):
<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>
<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: '200px', //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
});
});
</script>
Below that add your css:
<style type="text/css">
.slide-out-div {
padding: 20px;
width: 250px;
background: #ccc;
border: 1px solid #29216d;
}
</style>
Anywhere in your page, (I put mine right above my </body>) put in the html for your hidden content.
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html">Content</a>
<h3>Contact me</h3>
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.
</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>
yours
Neil
Just doing a test run on our site www.gparts.co.uk
mmm seem to be missing something out somewhere!??
I looking to implement the follow contact form for our website
Full detail can be found here http://www.building58.com/examples/tabSlideOut.html
this has the contact form working, I we would like to use it so our customers dont have to leave the page they are on.
has anyone tried this before out there? Is there any coding changes needed for actinic?
I have copied and pasted the code from the site below.
See that little tab over there that says 'Contact'? If you click that it will slide out. This plugin allows you to easily add one of those to your page.
The most important part of getting this plugin to work is to have your image path and image dimensions set correctly in the options. In this version, using the code below, I am linking directly to google code for the jquery library as well as the plugin which I am hosting at code.google.com.
Getting started
In your <head> tag you need the javascript (with the options customized for your image):
<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>
<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: '200px', //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
});
});
</script>
Below that add your css:
<style type="text/css">
.slide-out-div {
padding: 20px;
width: 250px;
background: #ccc;
border: 1px solid #29216d;
}
</style>
Anywhere in your page, (I put mine right above my </body>) put in the html for your hidden content.
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html">Content</a>
<h3>Contact me</h3>
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.
</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>
yours
Neil
Just doing a test run on our site www.gparts.co.uk
mmm seem to be missing something out somewhere!??
Comment