Contact Form Code

HTML & CSS
1

Hi, I have recently learnt how to use Dreamweaver and built my first website in it, however my ‘Contact Us’ form is not working, It’s overall image is fine and text fields work etc, but when I put in the info and click ‘send message’ nothing happens. UPDATE I have just been told that I need to include <Form> codes into my it. Is there anyone who would mind helping me put them in? I would appreciate it greatly. Thanks

<div id=“contact” class=“section-content”>
<div class=“row”>
<div class=“col-md-12”>
<div class=“section-title”>
<h2>Contact Us</h2>
</div> <!-- /.section-title –>
</div> <!-- /.col-md-12 –>
</div> <!-- /.row –>
<div class=“row”><!-- /.col-md-12 –>
</div> <!-- /.row –>
<div class=“row contact-form”>
<div class=“col-md-4”>
<label for=“name-id” class=“required”>Name:</label>
<input name=“name-id” type=“text” id=“name-id” maxlength=“40”>
</div> <!-- /.col-md-4 –>
<div class=“col-md-4”>
<label for=“email-id” class=“required”>Email:</label>
<input name=“email-id” type=“text” id=“email-id” maxlength=“40”>
</div> <!-- /.col-md-4 –>
<div class=“col-md-4”>
<label for=“subject-id”>Phone:</label>
<input name=“subject-id” type=“text” id=“subject-id” maxlength=“60”>
</div>
<div class=“col-md-4”>
<label for=“subject-id2”>Subject:</label>
<input name=“subject-id2” type=“text” id=“subject-id2” maxlength=“60”>
</div>
<!-- /.col-md-4 –>
<div class=“col-md-12”>
<label for=“message-id” class=“required”>Message:</label>
<textarea name=“message-id” id=“message-id” rows=“6”></textarea>
</div> <!-- /.col-md-12 –>
<div class=“col-md-12”>
<div class=“submit-btn”>
<a href=“mailto:******@hotmail.co.uk” class=“largeButton contactBgColor”>Send Message</a>
</div> <!-- /.submit-btn –>
</div> <!-- /.col-md-12 –>
</div>
</div> <!-- /#contact –>
</div> <!-- /.container-fluid –>

2

Hi Colesy.

Were are the “action” and the “method” to process the form? A form is useless without them.

Please refer to this section: http://reference.sitepoint.com/html/form, and read out its contents and subsections, with a special attention to these two:

http://reference.sitepoint.com/html/form/action
[URL=“http://reference.sitepoint.com/html/form/method”]http://reference.sitepoint.com/html/form/method

Best regards.

3

The code above isn’t actually a full contact form. The ‘submit button’ is just a mailto: link, so all it will do is to launch the user’s default e-mail client. In case the user doesn’t have any, it will do nothing.

You need two things to build a contact form:

[list][]A full HTML form
[]Server-side code to handle the information sent through the form[/list]

You have the first part half-way done, but it is very cluttered. Dreamweaver is a very poor tool for making websites, as it will fill the code with all sorts of junk. Compare the code you have above with this code:

<h2>Contact Us</h2>
<form action="/receive-message.php" method="post">
 <fieldset>
  <label for="contact-name" class="required-field">
   Name <span>(required)</span>
   <input type="text" name="contact-name" id="contact-name">
  </label>

  <label for="contact-email" class="required-field">
   E-mail address <span>(required)</span>
   <input type="text" name="contact-email" id="contact-email">
  </label>

  <label for="contact-phone">
   Phone number
   <input type="text" name="contact-phone" id="contact-phone">
  </label>

  <label for="contact-message" class="required-field">
   Message <span>(required)</span>
   <textarea name="contact-message" id="contact-message" cols="30" rows="6"></textarea>
  </label>

  <input type="submit" value="Submit">
 </fieldset>
</form>

The second requires that you set up some kind of script on your website, using a scripting language like PHP. There are plenty of tutorials out there for the scripting language that works on your web server (you can’t execute PHP locally without setting up a web server on your computer). There are two things to be aware of when it comes to contact forms, however:

[list][]Unless you make some kind of security measurement, you will receive lots of spam messages
[]Unless you are careful in how you handle the information sent through the form, you site may be used by spammers to send the submitted message to other people as BCC.[/list]

Also, why set up such a small limit (40 characters) to the length of the name and e-mail address? If you submit the information to a database, the maximum technical length of VARCHAR is 255 characters. There is no reason why the field size should be limited, unless you are expect to receive litterally trillions of messages. Furthermore, it might make the form useless. My e-mail address is 35 characters, which is a problem for some forms, and there are no doubt people with longer e-mail addresses, not to mention names. Whenever I come across a store that needlessly limit their field size in a way that discriminate against my e-mail address, I will never use that business again. Is a few cents worth of harddrive spare really worth loosing a customer over?