one page website contact form help

**ianhaney** · 08-21-2016, 11:22 AM

Hi

I have built a one page website and got a contact form at the bottom and have added required attribute in the input fields but when I click submit, it submits the form whereas it should not submit the form and say the input fields are required, below is the link to the site

Below is the code for the form part and the php

Code:

<div class="col-lg-6 col-sm-5 wow fadeInUp delay-05s">
            	<div class="form">
    <form method="post" action="index.php#contact">
                	<input class="input-text" type="text" name="name" id="name" value="Your Name *" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" required>
                    
                    <input class="input-text" type="text" name="email" id="email" value="Your E-mail *" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" required>
                	
                    <input class="input-text" type="text" name="phone" id="phone" value="Your Phone Number *" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" required>
                    
                    <textarea class="input-text text-area" cols="0" rows="0" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" name="message" id="message" required>Your Message *</textarea>
                    
                    <p class="robotic" id="pot">
      <label>If you're human leave this blank:</label>
      <br />
      <input name="robotest" type="text" id="robotest" class="robotest" />
    </p>
                    
                    <input class="input-btn" type="submit" value="send message" id="btn">
                    </form>
                </div>	
            </div>
        </div>
        
        <?php
  if($_POST){
    $to = 'myemail';
    $subject = 'New Enquiry From Website';
    $from_name = $_POST['name'];
    $from_email = $_POST['email'];
	$from_phone = $_POST['phone'];
    $message = $_POST['message'];
    $robotest = $_POST['robotest'];
	
    if($robotest)
      $error = "You are a gutless robot.";
    else{
		
      if($from_name && $from_email && $from_phone && $message){
		  
		  $body = "A user  $name submitted the contact form:\n".
		"Name: $from_name\n".
		"Email: $from_email \n".
		"Phone: $from_phone \n".
		"Message: \n ".
		"$message\n".
		  
        $header = "From: $from_name <$from_email>";
		
        if(mail($to, $subject, $body, $header))
          $success = '<div><strong>You are human and your message was sent!</strong></div>';
        else
          $error = '<div><strong>You are human but there was a problem sending the e-mail.</strong></div>';
      }else
        $error = '<div><strong>All fields are required.</strong></div>';
    }
                if($error)
      echo '<div>'.$error.'</div>';
    elseif($success)
      echo '<div>'.$success.'</div>';
	
  }
?>
        
</section>
</div>

Thank you in advance

**Beverleyh** · 08-21-2016, 12:27 PM

What doctype are you using and what browser are you testing in?

Note that the "required" attribute is new to HTML5 (and so requires the HTML5 doctype) but is unsupported in IE9 and under, and Safari)

**ianhaney** · 08-21-2016, 12:42 PM

Originally Posted by Beverleyh

What doctype are you using and what browser are you testing in?

Note that the "required" attribute is new to HTML5 (and so requires the HTML5 doctype) but is unsupported in IE9 and under, and Safari)

Ahh ok, the doctype is <!doctype html> and am testing in firefox

**ianhaney** · 08-21-2016, 02:06 PM

I got the form checking if fields are empty now using javascript but now the form is not sending the email where as it was before

the updated code is below

Code:

<form name="form" method="post" action="index.php#contact" onsubmit="return checkForm(this);">
                	<input class="input-text" type="text" name="name" id="name" value="Your Name *" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" required>
                    
                    <input class="input-text" type="text" name="email" id="email" value="Your E-mail *" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" required>
                	
                    <input class="input-text" type="text" name="phone" id="phone" value="Your Phone Number *" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" required>
                    
                    <textarea class="input-text text-area" cols="0" rows="0" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" name="message" id="message" required>Your Message *</textarea>
                    
                    <p>
                    <img src="captcha.php" width="120" height="30" border="1" alt="CAPTCHA">
                    </p>
<p>
<input type="text" size="6" maxlength="5" name="captcha" value="">
<br>
<small>copy the digits from the image into this box</small>
</p>
                    
                    <input class="input-btn" type="submit" value="send message">
                    </form>
                          
                    <script>
					
					function checkForm(form)
  {

    if(!form.captcha.value.match(/^\d{5}$/)) {
      alert('Please enter the CAPTCHA digits in the box provided');
      form.captcha.focus();
      return false;
    }

    return true;
  }
					
					window.onload = function (event) {
    var form = document.getElementsByName('form')[0];
    form.addEventListener('submit', function (event) {
        var inputs = form.getElementsByTagName('input'), input, i;
        for (i = 0; i < inputs.length; i += 1) {
            input = inputs[i];
            if (input.type === 'text' && input.value.trim() === '') {
                event.preventDefault();
                alert('You have empty fields remaining.');
                return false;
            }
        }
    }, false);
};
</script>