Tycoon Talk - View Single Post

**mastercomputers** · 06:17 AM

Because you're using mailto, then it's going to be sent via their email client, in which they'd have the ability to alter the contents anyways.

If you don't want to let them do this, then send the information to a mail processing script to handle sending the information or storing it.

I got bored and played around with your code to make a quite simple form, usually I'd store the javascript in it's own external file, as well as the styling. Though I didn't want to spend too much time with the javascript side of things just simple checks, although the email validation check was something I wrote myself, though only to find out after reading the RFC that IP addresses could be used, as well as some email names that slipped through before they limited the characters, so it's not the best, but it does work for most email addresses and may go into the validity more than other solutions.

Anyways, hope you like, and feel free to use it if you like but it may need alterations to fit into your site without conflicting with other elements.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
    <title>Simple Form</title>
    <style type="text/css">
    <!--
      body {
        font-family: Arial, Helvetica, Verdana, sans-serif;
      }
      p, span {
        font-size: small;
        font-weight: bold;
      }
      label {
        font-size: x-small;
        font-weight: bold;
        text-transform: uppercase;
      }
      span {
        cursor: help;
        color: red;
        background-color: white;
      }
      #submit {
        border: medium outset #aaa;
        background-color: #999;
        color: black;
      }
    -->
    </style>
    <script type="text/javascript">
    //<![CDATA[
    function correctMsg(el) {
      el.removeChild(el.firstChild);
      el.style.cssText = 'color: green';
      el.appendChild(document.createTextNode('* This is correct'));
      return;
    }

    function invalidError(el,type) {
      var error = '';
      el.removeChild(el.firstChild);
      el.style.cssText = 'color: red';

      switch(type) {
        case 'name':
          error = '* Name Required, No Numbers';
          break;
        case 'email':
          error = '* Email Required, Must Be Valid';
          break;
        case 'phone':
          error = '* Phone Required, Numbers Only';
          break;
        case 'address':
          error = '* Address Required';
          break;
        case 'citystate':
          error = '* City/State Required';
          break;
        default:
          error = '*';
          break;
      }

      el.appendChild(document.createTextNode(error));
      return;
    }

    function checkrequired(inputs, spans) {

      if(inputs.item(6).value != "OK, I'm ready!") {
        alert('Error: Must use supplied form.');
        return false;
      }

      var valid = true;
      var numbers_regex = /\d/g
      var email_regex = /^[a-z][a-z0-9_.-]+@[a-z0-9][a-z0-9-]+\.[a-z0-9]+(\.[a-z]+)*$/i
      var contact_name = inputs.item(0).value;
      var contact_span = spans.item(0);
      var email = inputs.item(1).value;
      var email_span = spans.item(1);
      var phone = inputs.item(2).value;
      var phone_span = spans.item(2);
      var company_name = inputs.item(3).value;
      var address = inputs.item(4).value;
      var address_span = spans.item(3);
      var citystate = inputs.item(5).value;
      var citystate_span = spans.item(4);

      if(contact_name == '' || contact_name.match(numbers_regex)) {
        invalidError(contact_span, 'name');
        valid = false;
      }
      else correctMsg(contact_span);

      if(email == '' || !email.match(email_regex)) {
        invalidError(email_span,'email');
        valid = false;
      }
      else correctMsg(email_span);

      if(phone == '' || !phone.match(numbers_regex)) {
        invalidError(phone_span, 'phone')
        valid = false;
      }
      else correctMsg(phone_span);

      if(address == '') {
        invalidError(address_span, 'address');
        valid = false;
      }
      else correctMsg(address_span);

      if(citystate == '') {
        invalidError(citystate_span, 'citystate')
        valid = false;
      }
      else correctMsg(citystate_span);

      var submit = document.getElementById('submit');

      submit.disabled = (valid) ? true : false;


      var body = document.getElementsByTagName('body').item(0);

      if(valid) {
        body.removeChild(body.lastChild);
        body.appendChild(document.createElement('p').appendChild(document.createTextNode('Form sent successfully. Thank you.')));
        submit.style.cssText = 'color: silver';
        submit.value = 'Thank You!';
      }
      else {
       body.removeChild(body.lastChild);
       body.appendChild(document.createElement('p').appendChild(document.createTextNode('Errors in form. Please fix them.')));
      }

      return valid;
    }
    //]]>
    </script>
  </head>
  <body>
    <p>Please fill out the form to find our wholesale pricing.<br />Thank You! We look forward to hearing from you!</p>
    <form  action="mailto:youremail@somewhere.com?subject=Web Form" method="post" enctype="text/plain" onsubmit="javascript:return checkrequired(this.getElementsByTagName('input'),this.getElementsByTagName('span'));">
      <div>
        <label for="contact_name">Contact name:</label><br />
        <input id="contact_name" name="contact_name" type="text" /> <span title="required field">*</span><br />
        <label for="email">Email:</label><br />
        <input id="email" name="email" type="text" /> <span title="required field">*</span><br />
        <label for="phone">Phone:</label><br />
        <input id="phone" name="phone" type="text" /> <span title="required field">*</span><br />
        <label for="company">Company Name:</label><br />
        <input id="company" name="company" type="text" /><br />
        <label for="address">Address:</label><br />
        <input id="address" name="address" type="text" /> <span title="required field">*</span><br />
        <label for="citystate">City and State:</label><br />
        <input id="citystate" name="citystate" type="text" /> <span title="required field">*</span><br />
        <input id="submit" name="submit" type="submit" value="OK, I'm ready!" />
      </div>
    </form>
  </body>
</html>

Cheers,

MC

P.S. By the way I saw no signs of a form on your website, so I can understand a blank textarea that people would have to fill in, where's the form?