http://wordpress.org/extend/plugins/coffee-admin-theme/

• Fast and easy. Businessmen do not have time to fill out long complex forms.
• Live validation. Let people know they’ve made a mistake as soon as possible. Saves time correcting user mistakes.
• Helpful. Provide features that make it quicker and easier for the user to fill in the form.

I wanted our quote form to be the fastest, quickest, easiest quote request form in the industry. The first way of doing this was simple – put the form on every page possible.

Why?

HTML5 is structure and at times function. It’s not styling, your styling is your CSS3. HTML5 is brilliant because it’s more semantic, and deals with a lot of functionality that was only previously achievable with Javascript or Flash. Whilst that matters to us, the reality is to the end user there’s no discernible difference. The end user does not care if you’ve coded your site semantically using tags such as “<nav”. It makes no difference to them.

Because CSS is how you’re styling the look of your site, it has a much more dramatic effect on the end user. Some would argue that CSS3 does a similar job to HTML5, by achieving effects we already could with Photoshop. However I’d argue that to the extent it achieves this is more likely to be noticeable by the end user.

An important feature of CSS3 for me is transitions. They lack IE support, but for everybody else transitions allow us to turn a clunky click-clack interface into something far more refined and smooth.

This wouldn’t really matter on a smaller theme but for the theme I’ve been building whereby a snippet of form code was repeated across 20 pages, it soon did become an issue as updating the code was incredibly tedious.

So, along to the rescue comes the PHP include function. This allows you to include the code of any PHP file you specify within another using a simple tag. So, I place all my form code in one file, and named it “quoteform.php”. I then placed this tag in the forms place in the template files where I wanted it to appear:

<?php include("quoteform.php"); ?>

So, instead of having to maintain the code across 20 different files, I only have to update one file. This is a very basic thing for a developer to do, but if you’re from a design background like me, rather than development, learning these useful snippets can prove massively helpful in making you more efficient with your code.

So how do you do this? The answer is more complicated than you might think, but in principle is simple. Your first step is you need to fetch the current pages URL – whatever it is.

<?php
function curPageURL() {
$pageURL = 'http';
if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
$pageURL .= "://";
if ($_SERVER["SERVER_PORT"] != "80") {
$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
} else {
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}
return $pageURL;
}
?>

You can then echo the current pages URL using:

<?php
  echo curPageURL();
?>

Then, tie this in with your re-direct script where you take the current pages URL, replace the .com with .co.uk and redirect. All put together, you should end up with something a bit like this:

<?php
function curPageURL() {
 $pageURL = 'http';
 if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
 $pageURL .= "://";
 if ($_SERVER["SERVER_PORT"] != "80") {
  $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
 } else {
  $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
 }
 return $pageURL;
}

$old_url = curPageURL();
$new_url = str_replace('.com', '.co.uk', $old_url);
header("Location: ".$new_url);
exit();
?>

You then paste that code at the very top of your header.php file in your theme folder. Don’t worry, you won’t lose access to your Dashboard for Site A because the script is only being used on the actual site. So you can remove it just as quickly as you added it.

There are drawbacks. Firstly, I’d strongly advise you only use this on a short term basis. It’s not instant, there’s a slight pause when re-directing. Secondly, I’m not right now absolutely sure of the implications on SEO – another reason why I’d only use it short term. If you need permanent redirects, always use a 301 redirect – not a script like this.

However, as a method of quickly and easily trialling a new copy of your site on an alternate domain this is very useful. I will only have this active for 24-48 hours, by which time I should hopefully have enough information on whether the new site is performing as expected and if there are any problems. If all goes well, I will point the .com domain to the .co.uk hosting (rather than a redirect), remove the current .com hosting, setup the new .com hosting and when the new .com site is ready, point the .com to it. Phew!

Here are some buttons I’ve made that utilize CSS3 to make them stunning. Browser compatibility is good – in IE8 the buttons do not look quite as good but are more than passable enough and still usable. In all modern browsers the buttons look is consistent, however remember that IE does not support transitions.

Please note that the orange button is used on a commercial website – so I kindly ask you don’t use it in a commercial project, especially anything to do with aviation/travel. Having said that, I can’t copyright code – so take from that what you will…

Whilst copyright applies to the look of these buttons within a context – I cannot copyright the code itself. Take from that what you will – just be careful!

http://jsfiddle.net/brightonmike/qpwzn/5/

• Fast and easy. Businessmen do not have time to fill out long complex forms.
• Live validation. Let people know they’ve made a mistake as soon as possible. Saves time correcting user mistakes.
• Helpful. Provide features that make it quicker and easier for the user to fill in the form.

I wanted our quote form to be the fastest, quickest, easiest quote request form in the industry. The first way of doing this was simple – put the form on every page possible.

This saves the user ever having to actually find your form. Instead, no matter what page they are on, a form will be available for them to use. Obviously, we don’t want the actual pages content to be sacrificed – so this is where the idea for the “mid-section” came about.

The mid section is a bar underneath the main navigation that on almost all pages contains the quote form. The quote form is hidden but clicking the “Request Quote” form triggers a jquery action that slides the form out in the middle of the page.

This elegant solution means the form is present on almost all pages of the new website, and it ensures the user always has quick access. By hiding the form by default we avoid having a messy form obstructing the page content, showing the form with a simple click on the button is an elegant and practical workaround.

Having a div hidden, and exposing on click, is very simple.

   $(document).ready(function(){

                $("#quoteLink").click(function(){

                        $("#homequoteFormcontainer").slideDown("slow");

                });

                $("#quoteLinkClose").click(function(){
                    $("#homequoteFormcontainer").slideUp("slow");
                });

            });

            function closeForm(){
                $("#messageSent").show("slow");
                setTimeout('$("#messageSent").hide();$("#homequoteFormcontainer").slideUp("slow")', 2000);
           }

With my design, I wanted the close button to be separate. However you could quite easily change the state of the open button to have it close the div too.