Problem with contact form

Hi,

Please can you try and help me with my contact form?

As you may well see it does not display the text beside the radio buttons and the submit button does not work!

http://bluebelle-beauty.com/contact.html

Ive also got a problem with the index.

I have used image replacement to replace the “welcome to bluebelle”

It shows up when I use the preview site function on dreamweaver but when it is published to the web it doesnt work…

Any Ideas?

The text showes up next to the radio buttons when I saw it! (FF, Opera, Chrome, IE8)

What should the action be in your form?

You should validate your syntax. If you had, you’d have found this, among other errors:

 <input type-"submit" value="Submit Query"/>

Note the hyphen instead of an equal sign.

I, too, see your radio button labels.

cheers,

gary

Could it be a problem with IE then?

The text should be Morning, Afternoon, Evening, No Appointment?

Thanks for finding the error it works perfect now! - I have been going through the Site Point “how to build a website” book and checking the code to no avail :slight_smile: My eyes must be tired!!!

Do you have any ideas regarding the image replacement?

I cant believe it!!! Just checked again in IE and the text is beside the radio buttons…

The image “welcome.gif” is not in the images file on the server.

Keep validating your pages as you go.

Cheers, Im cracking on now! Hope to have the site ready for the new year :-S fingers crossed!!!

Managed to change a few more of the images now.

What is the best way of centering my nav bar?

What do you think of the form I have build?

http://bluebelle-beauty.com/contact.html

There seems to be a delay uploading my images using Filezilla its a right pain!

You still have some syntax errors in there but the labels seem to be working on the form at the moment.

There will be some delay between file upload if it is a slow FTP server or has to queue several files before transmission. You’d have got a smaller file size on the logo if it were PNG-8 and probably saved up to 30% in size.

You could tidy up the layout a bit by changing this


<div>
<label for="name" class="fixedwidth">Contact Name</label>
<input type="text" name="name" id="name" size="40" value="" />

</div>
<div>
<label for="field-e1273e5d7fd47b2" class="fixedwidth">Telephone Number</label>

<input type="text" name="field-e1273e5d7fd47b2" id="field-e1273e5d7fd47b2" size="40" value="" />
</div>
<div>
<label for="email" class="fixedwidth">Email Address</label>
<input type="text" name="email" id="email" size="40" value="" />
</div>

to this


<div class="lefty">
<label for="name" >Contact Name</label>
<label for="field-e1273e5d7fd47b2" >Telephone Number</label>
<label for="email" >Email Address</label>
</div>

<div class="lefty">
<input type="text" name="name" id="name" size="40" value="" />
<input type="text" name="field-e1273e5d7fd47b2" id="field-e1273e5d7fd47b2" size="40" value="" />
<input type="text" name="email" id="email" size="40" value="" />
</div>


then using something like

.lefty {
width:250px;
margin-top:20px;
float:left;
}

Then your input boxes would all line up nicely in a vertical line. You could also do this for your message box.

you’d need a clear:both for the bits that immediately follow the floated bits.

And finally, the css strangely doesn’t seem to include #pageWrapper, which could desperately do with a width and margin:auto;, as the page will end up as wide as the viewport, and become harder and harder to read on wide screens with the browser fullscreen.
#pageWrapper (width:900px; margin:auto;}
The margin bit centers it on screen.

You might consider giving the div that the form is in an id as well, and giving that a smaller width, say 600px, and margin:auto too.

PS Xhtmlcoder - that image is only 9kb, so it’s small enough at present.

Hi Dr John,

Ive tried the above but it seems to but the labels all together.

Im still having problems with the form. Could you have a look at my site and tell me your thoughts:

http://bluebelle-beauty.com/contact.html

my css for the form is below:

form.contact fieldset {
	border: 2px solid navy;
	padding: 10px;
}

form.contact legend {
	font-weight:bold;
	font-size:small;
	colour: navy;
	padding: 5px;
}

form.contact {
	padding: 0;
	margin: 0;
	margin-top: -15px;
	line-height: 150%;
}

form.contact label {
	font-weight:bold;
	font-size:small;
	colour: navy;
}

form.contact label.fixedwidth {
	display: block;
	width: 240px;
	float: left;
}

form.contact .buttonarea {
	text-align:center;
	padding: 4px;
	background-color: #0066ff;
}

Hi,

You are using form.contact but that class (.form) doesn’t seem to be on the form element so the elements don’t get styled.

The form is all over the place and you should try to line it up and not have it centred which makes it almost impossible to fill in.

For a start you could do something like this.


<form [B]class="contact"[/B] ......


form.contact fieldset {
    border: 2px solid navy;
    margin: auto;
    padding: 10px;
    [B]width: 600px;[/B]
}

form.contact label.fixedwidth {
    display: block;
    float: left;
  [B]  text-align: right;
    width: 180px;
    padding:0 20px 0 0;[/B]
}
[B]form.contact input {margin:0 0 5px}[/B]

[B]#content {
    text-align: left;
}[/B]
#content p {
    padding: 0.5em 0;
 [B]   text-align: center;[/B]
}

It would still need more work and for the radio buttons I’d add a class of radio to the surrounding p element and do something like this.


<p class="radio">
 <input type="radio" ............... etc


[B]#content p.radio{
text-align:left;
padding-left:195px
}[/B]

That’s just a rough idea. :slight_smile: