Floating contact form is ideal solution if you want to let your visitors instantly contact you without having to go to contact page. In this tutorial I’ll be creating a floating contact form using CSS, jQuery and PHP, which will be positioned “fixed” on the right side of the page. The form can be toggle open or closed by clicking on the opener button.
The base code for this tutorial is pretty similar to my previous tutorial Simple Ajax contact form, you may visit and learn how this Ajax contact form really works if you are pretty novice one. Here mostly we are going to focus on CSS and jQuery part to make our existing contact from float and toggle on button click.
Let’s create a typical HTML form with some input fields, I have enclosed form with some DIV elements here and assigned some IDs to the elements, we need these IDs later in jQuery code and CSS. You can place this markup anywhere within <body></body> section of your webpage. Typically on the top of the content, but after <body> tag.
Using CSS position:fixed we can make our contact from stick to a position, and using left or right property it can be positioned on either side of the page. That’s the primary CSS trick here, later using jQuery we can create an effect for page scroll.
To fit the opener button perfectly on the right, I’ve used transform:rotate(-90deg) CSS3 property, it will rotate the button, and will look pretty good. But remember some old browsers do not support this CSS3 feature, if you are concerned about old browsers, you might want to use background image instead.
When the page loads, we want our contact form to be hidden on the right side, it will remain hidden until user clicks on opener button and opens the contact form. For that we will be using jQuery animation() method. Just play with the position value in the code below to get it absolutely right for your page layout.
We also want to give our contact from some effect when user scrolls the page, because a fixed contact from looks rather boring, so we give it some floating feel.
To make this tutorial brief, I haven’t included the jQuery Ajax and PHP part, you can always go back to my previous post : Simple Ajax contact form and examine the code. Or just download example code from download link below, which includes all the pieces you need to create your own floating Ajax contact form, good luck!