I'm still prototyping this - so LOTS of rough edges, unfinished bits etc.

 

However, I'd still like thoughts.

 

http://www.jetbookingdirect.com/?theme=jetbook2012

 

 

The form is the main bit here that I've been working on. I'm aware of some usability issues, most notably the HTML5 validation which it looks like I will have to ditch.

 

It won't send, it isn't meant to, so don't try!

 

I'm also annoyed that in Chrome, the three boxes wiggle about when you hover. This shouldn't happen, and it doesn't in Firefox/IE.

 

But yeah, like I say, this is prototyping so don't expect a "finished" product. Just want any ideas you guys have really.

 

Therefore, anyone who says "Where's the footer?" will receive a prompt chinese burn.

 

Also, I tend to leave fixing IE issues until the end, so if it's fubar in IE7, whatever

Edited August 19, 201115 yr by brightonmike

Initial popup of the form is almost off the bottom of the screen on my laptop (1366*768).

I can't really fit the whole form above the fold without cramping the top half or overlaying it over the button and the header. I'd do that, but the button is the only way to then close it. I guess I'd like a "close" button inside the form instead. Then the form could be higher, and above the fold. However I'm sure most people will just scroll.

I think the gradients are a bit mental in places

I can't really fit the whole form above the fold without cramping the top half or overlaying it over the button and the header. I'd do that, but the button is the only way to then close it. I guess I'd like a "close" button inside the form instead. Then the form could be higher, and above the fold. However I'm sure most people will just scroll.

 

Moving the form upwards and adding a close button is a much better option in my opinion.

 

Have you tried moving the contact and search button to the right side of the logo? It might work better over there since that's where to the contact/search usually is.

 

The navigation has a nice effect on it, but it looks a bit blocky now. Maybe some border-radius would help.

 

Other than that I think your design looks pretty awesome. I like how you used that shade of gray on the background instead of white.

I think the gradients are a bit mental in places

 

 

I'm guessing you mean the footer? Yeah, not finished yet, I hate the gradient there just haven't had time to adjust

Moving the form upwards and adding a close button is a much better option in my opinion.

 

Have you tried moving the contact and search button to the right side of the logo? It might work better over there since that's where to the contact/search usually is.

 

The navigation has a nice effect on it, but it looks a bit blocky now. Maybe some border-radius would help.

 

Other than that I think your design looks pretty awesome. I like how you used that shade of gray on the background instead of white.

 

 

I'll try the contact button idea, I think I agree with you on that one

 

Also, I agree re the navigation, so I'll take another look.

 

Annoyingly, the grey gradient I've used looks a lot darker on my home PC screen. On my screens at work, it's a very slightly off white gradient. The trouble is if I make it very white (ish) then for those with high contrast screens, it will just look white. As it is now though, for those with lower contrast screens, it's going to look a less-than fresh shade of grey.

 

Very frustrating! I'm actually finding discrepancies between monitors more annoying than browsers.

I'd have the book now button in the yellow as it's normal state

I'd have the book now button in the yellow as it's normal state

 

Think I gotta agree with this, just love having a nice highlight.

Hey guys.

 

I've made most of the changes suggested....the form now covers the whole mid-section with a separate "close" button. The nav items are now rounded, I'm not convinced it looks better like this but let me know your thoughts.

Where's the footer?

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

This is a quick dumb PHP question.

 

How can I do a quick PHP "IF" statement on the "success" page (when the user submits the form).

 

I want different text for if they submitted a return flight request etc. E.g

 

Single

Your flight: single from London Biggin Hill to New York Teterboro departing on 31-08-2011 at 13:00.

 

Return

Your flight: Return from London Biggin Hill to New York Teterboro departing on 31-08-2011 at 13:00, returning on 14-09-2011 at 14.15.

 

Obviously without an IF statement or whatever the "returning" bit is still gonna show...

 

I tried this but it won't work:

 

		
<?php 
$FlightType="";

if(isset($_GET["FlightType"])) $FlightType = $_GET["FlightType"];

if($FlightType=="Single")
{

echo 'Single.';

}
else if($FlightType=="Return")
{

echo 'Return.';

}
else
echo 'Multi-Leg.';
?>

Edited August 22, 201115 yr by brightonmike

This is annoying, jQuery validate breaks my conditional fields script

 

	<script type="text/javascript">
/* <![CDATA[ */
$(function() {
		function checkSingle(select_id){
				if($('option:selected', select_id).val() == "single"){
						$("#Return").hide();
				} else {
						$("#Return").show();
				}
		}

		checkSingle('#FlightType');

		$("#FlightType").change(function(){
				checkSingle(this);
		});
});
/* ]]> */
/* <![CDATA[ */
$(function() {
		function checkMultiLeg(select_id){
				if($('option:selected', select_id).val() == "Multi Leg"){
						$("#Via").show();
				} else {
						$("#Via").hide();
				}
		}

		checkMultiLeg('#FlightType');

		$("#FlightType").change(function(){
				checkMultiLeg(this);
		});
});
/* ]]> */
</script>
<script type="text/javascript"> 
$().ready(function() {
   $("#homequoteform").validate({
       rules: {
           name: {
               required: true,
               minlength: 4
           },
           from: {
               required: true,
               minlength: 3
           },
           to: {
               required: true,
               minlength: 3
           },
           email: {
               required: true,
               email: true
           },
       },
       messages: {
           name: {
               required: "Please enter your full name",
               minlength: "Your name must consist of at least 4 characters"
           },
           from: {
               required: "Please tell us where you're flying from",
               minlength: "Please enter the full name of where you are flying from"
           },
           to: {
               required: "Please tell us where you're flying from",
               minlength: "Please enter the full name of where you are flying to"
           },
           email: "Please enter a valid email address",
       }

   });
});
</script>

Edited August 22, 201115 yr by brightonmike