Problem with Contact Page

Get Started
1

Hi,
I am very new to this and have been working through the Build Your Own Website Book but adapting it for my own website.

I went to the Freedback Site and used their HTML as directed in the book, but two things have happened.

  1. A text box has gone missing, and another label and text box have moved around
  2. The form does not work. Does it need to be “live” before it works?

Hope someone has a few minutes to help me with this (I’ve wasted hours!).

Here is my HTML - do you need the CSS as well?

<!DOCTYPE html><html lang="en">
<head>
<title>Battle Tax - Professional, Personal, Tax Advice</title>
<meta charset="utf-8"/>
<link href="style1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
<div id="sitebranding">


</div> <!-- end of sitebranding div -->
<div id="logo">
<h1> <img src="charles/BattleTaxLogo1.jpg" width="400" height="83"/> </h1>
</div>
<div id="tagline">
<p> </p>
</div> <!-- end of tagline div -->
<div id="email">
<p><a href="mailto:">Email</a></p>
</div>
<div id="telephone"> 
<p>Telephone/P>
</div> <!--end of telephone div-->
</div> <!-- end of header div --> 
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="selfassessment.html">Self Assessment Tax Returns</a></li>
<li><a href="soletraders.html">Sole Traders and Self Employed</a></li>
<li><a href="capitalgains.html">Capital Gains Tax</a></li>
<li><a href="incometax.html">Income Tax</a></li>
<li><a href="inheritancetax.html">Inheritance Tax</a></li>
<li><a href="about.html">About Battle Tax</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul> 
</div> <!-- end of navigation div -->
<div id="bodycontent"> 
<h2>Contact Us</h2>
<p>To arrange an informal consulation or to find out more about our services, please use the form below.</p>
<form action="" method="post" class="contact">
<form enctype="multipart/form-data" class="contact" method="post" action="http://www.freedback.com/mail.php" 


accept-charset="UTF-8">
<div>
<input type="hidden" name="acctid" id="acctid" value="icjucwejbpk84rrh" />
<input type="hidden" name="formid" id="formid" value="1049912" />
<input type="hidden" name="required_vars" id="required_vars" value="name,email" />
</div>
<fieldset>
<legend>Contact Us With an Enquiry</legend>
<div>
<label for="name" class="fixedwidth">Contact Name</label>
<input type="text" name="name" id="name" size="40" value="" />
</div>
<div>
<label for="email" class="fixedwidth">Email Address</label>
<input type="text" name="email" id="email" size="40" value="" />
</div> 
<div>
<label for="telephone" class="fixedwidth">Telephone Number</label>
<input type="text" name="field-1b523f116fe375b" id="field-1b523f116fe375b" size="40" value="" />
</div>
<div>
<label for="Mobile" class="fixedwidth">Mobile Telephone Number</label>
<input type="text" name="field-623713f0bdf034a" id="field-623713f0bdf034a" size="40" value="" />
</div>
<div>
<p>Please provide details of your enquiry in the text area below, and we will endevour to respond to 


your enquiry within 24hours.</p>
<label for="field-59ac8195ad7d068" class="fixedwidth">Enquiry Details</label>
<textarea name="field-59ac8195ad7d068" id="field-59ac8195ad7d068" rows="6" cols="40"></textarea>
</div>
<div class="buttonarea">
<input type="submit" value="Submit Enquiry"/>
</div>
</fieldset>
</form> 
</form> 
<p>Alternativly, contact Charles Dunn (CTA) on 
or <a href="mailto:">email</a>.</p>
</div> <!-- end of bodycontent div -->
</body>
</html>
2

The duplicate ID values for ‘email’ on that DIV won’t help you any regarding focusing on the form or it processing and you don’t seem to have an ID for ‘Mobile’ and ‘telephone’ looks wrong… Plus for some bizarre reason you have a nested FORM, somewhere you have gone seriously wrong with the copy-and-paste. Plus made bad choices with the DIV and their ID values (duplication of ID is illegal).

The FIELDSET and LEGEND is usually supposed to come directly after the start FORM tag and not after an erroneous DIV all your form is muddled up. Also double check your other Freedback variable values are correct first so shove it through the W3C Validator and try again…

3

It kills me that you specify the code as HTML4 Strict and then your next piece of text is an HTML5 DTD…

~TehYoyo

4

Ah, but if you select the HTML option from the Syntax dropdown menu, it doesn’t warn you that it’s going to mark it up as HTML4 Strict. Very confusing for a newbie - and the rest of us. (:

5 
Meh.  Some of us find ways around that. :D

To the OP, be warned that, although Ian Lloyd’s book is fantastic and I love it, it won’t guarantee a beautiful, fantastic website. There is still much more to design and development.

~TehYoyo

6

Mike wrapped the CODE block because it’s the closest to HTML with syntax highlighting available in the SPF vBulletin drop-down options the OP didn’t use any code wrap in the original post. :slight_smile:

7

Go through your form tags again :slight_smile: The best way to learn is to keep at it untill you find the solution! ^^

8

Thank you! I need to spend some time looking at this - it seems I have gone very badly wrong!! I will see if I can make amends - if not it may be worth starting the chapter again.
Thank you for your time

9

If you run your code through the W3C Validator periodically, it will help you pick up on errors as you go. Some of these may be as simple as typing mistakes, which can be really hard to find on your own. If you need help interpreting the Validator results, post back here and we’ll be glad to help.

10

I haven’t got to the validating section bit of the book yet - but I see it is in there and that is a good tip - thank you, I am sure I will need to use it a lot!

I took on board you advice and made some changes, re-read the chapter to ensure I had understood all the rules etc.

I then discovered that my CSS was interfering with the form. I don’t fully understand why. I have an email and tel number of the business on the web site with some CSS about where they should be positioned etc and these instructions were being applied to the email and tel number bits on my form. So I changed the div class names for the business email and telephone so the rules only applied to them and not my form. This worked and my form works. I has taken me ages :rolleyes: but I got there.

PS - It is great there is a forum for us beginners with helpful and understanding advice. I guess some of you experienced programmers must bang your heads against the computer when you see the muddles we get in! So thanks for being so patient!

11

No, I don’t bang my head because we all have to start somewhere and I can vaguely remember in another life how hard it was leaning to create my first web pages, etc.

Though with a lot of practice it can get like riding a bike so I tend to guide more rather than just giving out copy-and-paste solutions so that it becomes a good learning experience and it sticks better in the memory. :slight_smile: