Basic Form Set Up

Just your every day average html form

<? 



	if (isset($_POST['custom_form_submitted'])) { // 333PM
	
    if (!wp_verify_nonce( $_POST['custom_form_nonce'], 'process_custom_form' )) { exit; }
	
	if (!empty( $_POST['hp'])) { exit; }
	
	if (empty( $_POST['set_test']) || $_POST['set_test'] != "submit ready") { exit; }
	
    if (!filter_var($_POST['cf_email'], FILTER_VALIDATE_EMAIL)) { exit; }
    	 
	
	$message .= "Name : ".           $_POST['cf_name'].          "<br />";
	
	$custom_form_submissions = get_option('custom_form_submissions');
	
	$custom_form_submissions[] = $message;
	
	update_option('custom_form_submissions', $custom_form_submissions);	
	

	
	
			   $headers[]              = 'From: domain.com < info@domain.com>';
			
			   $headers[]              = 'content-type: text/html';			
		
			   $title                  = "ATTENTION!!! - SOMETHING";
			   
			   $styled_email_to_mail   = $message ;
			   
			   $email_address          = "sendto@studio2108.com";
			
			   wp_mail( $email_address,$title, $styled_email_to_mail,$headers);

			   wp_redirect( '' );

	} // 333PM


?>


<style>

#custom_form {
	width: 330px;
	padding: 15px;
}

#custom_form label {
	display: block;
}

#custom_form label span{
	color: red;
}

#custom_form input{
	width :300px;
	padding: 5px;
}

#custom_form textarea{
	width :300px;
	height :150px;
	padding: 5px;
}

.input_field_wrap {
	display: inline-block;
	margin-bottom: 15px;
	padding: 5px;
	width: 100%;
}

.error {
	border: 1px solid red;
	color: red;
}

#all_status {
	padding: 5px;
}

.hide {
	display: none; 
}

.show_block {
	display: block; 
}

.show_inline_block {
	display: inline-block; 
}

#custom_form_submit {
	cursor:pointer;
}

#ht_test {
	background-image: url('https://plugin-2108.com/wp-content/uploads/2014/03/ht_test.png'); 
	background-repeat: no-repeat;
	background-position: 0px 4px;
	width: 45px;
	height: 17px;
	display: inline-block;
}

#custom_form #human_test {
	width: 25px;
}


</style>


<form id="custom_form" action="" method="post" enctype="multipart/form-data">

 
<div class="input_field_wrap" id="name_wrap" >
  <label>Name</label>
  <input type="text" name="cf_name" class="required" value="" data-error-message="Check Name <br />" placeholder="name" class="text_input"/><span class="input_status"></span>
</div><!--input_field_wrap-->


<div class="input_field_wrap" id="company_name_wrap">
  <label>Company Name</label>
  <input type="text" name="cf_company_name" class="required" value="" data-error-message="Check Company Name <br />" placeholder="company" class="text_input"/><span class="input_status"></span>
</div><!--input_field_wrap-->


<div class="input_field_wrap" id="email_wrap">
  <label>Email</label>
  <input type="text" name="cf_email" class="required validate_email" value="" data-error-message="Check Email <br />" placeholder="email" class="text_input"/><span class="input_status"></span>
</div><!--input_field_wrap-->


<div class="input_field_wrap" id="comments_wrap">
  <label>Comments</label>
  <textarea name="cf_comments" class="" value="" data-error-message="Check Comments <br />" placeholder="comments" class="text_input"></textarea><span class="input_status"></span>
</div><!--input_field_wrap-->

<div class="input_field_wrap" id="human_test_wrap">
  <label>Human Test</label>
  <span id="ht_test"> </span><input type="text" name="cf_human_test" id="human_test" class="required" value="" data-error-message="Check Human Test <br />" class="text_input"/><span class="input_status"></span>
</div><!--input_field_wrap-->

<? wp_nonce_field( 'process_custom_form', 'custom_form_nonce' ); ?>

<div class="input_field_wrap" id="hp_wrap">
  <label>HP</label>
<input type="text" name="hp" id="hp" class="" value="" class="text_input"/>
</div><!--input_field_wrap-->

<div class="input_field_wrap" id="set_test_wrap">
  <label>Set Test</label>
<input type="text" name="set_test" id="set_test" class="" value="" class="text_input"/>
</div><!--input_field_wrap-->

 
 
<div class="input_field_wrap" id="submit_wrap">
  <span id="custom_form_submit" class="submit_button">Submit > </span>
</div><!--input_field_wrap-->
 

<div id="all_status" class="hide"></div>

 
<input type="hidden" name="custom_form_submitted" value="true" />

 
</form>



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
 
 
<script> 



function IsEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}
			
 
$(document).ready(function() { //12PM DOC READY

  $('#hp_wrap').hide();
  $('#set_test_wrap').hide();
          
  $( "#custom_form_submit" ).click(function() { // 1017PM
  
        var parent         = "";
        var error_message  = "";
        var error_messages = "";
        var field_value    = "";
        var has_errors     = false;
        var cf_human_test  = $(human_test).val();
        $('#set_test').val('submit ready');
        $( '#all_status' ).removeClass( "show_inline_block" ).addClass( "hide" );  

		$(".required").each(function(i, input) {
	          parent         = $(input).parent().attr('id');
		      $( '#'+parent  ).removeClass( 'error' );
		      $( '#'+parent+' .input_status').text('');
	          error_message  = $(input).attr('data-error-message');
	          field_value    = $(input).val();        
        
	        if (field_value == "") { //325PM
	          has_errors = true;
	          $('#'+parent).addClass('error');
	          $('#'+parent+' .input_status').text(' <-');
	          error_messages = error_messages + error_message; 
	        } //325PM        
        
		});		
		
		$(".validate_email").each(function(i, email) {
	          parent         = $(email).parent().attr('id');
	          error_message  = $(email).attr('data-error-message');
	          field_value    = $(email).val();
			  if (!IsEmail(field_value))   { //617PM
			  has_errors = true;
			  error_messages = error_messages + error_message;
	          $('#'+parent).addClass('error');
	          $('#'+parent+' .input_status').text(' <-');	           
			  } //617PM
	                  
		});		
	
        if (has_errors == true) { //326PM
              $('#all_status').addClass('error');
              $( '#all_status' ).removeClass( "hide" ).addClass( "show_inline_block" );
              $('#all_status').html(error_messages);
        } //326PM
        
        
        if ((cf_human_test != 5) && (cf_human_test != "")) { //326PM
              has_errors = true;
              $('#human_test_wrap').addClass('error');
              $('#all_status' ).removeClass( "hide" ).addClass( "show_inline_block" );
              error_message  = $('#human_test').attr('data-error-message');
		      error_messages = error_messages + error_message;
              $('#all_status').html(error_messages);
        } //326PM
                
        
        if (has_errors == false) { //321PM
            $('#custom_form').submit();
        } //321PM
        
	        

  }); // 1017PM
 
}); //12PM DOC READY
 
</script>