Template H-E-*Double Hockey Sticks*: E-Mail Form

[DarkxPunk]

Hey everyone, So honestly I can only guess what I am supposed to add here for you all to help so let me first get that out of the way PHP: (Note that commented out code was code provided by the template providers support)

<?php$owner_email = $_POST["owner_email"];$headers = 'From:' . $_POST["email"];$subject = 'A message from your site visitor ' . $_POST["name"];$messageBody = ""; if($_POST['name']!='nope'){  $messageBody .= '<p>Visitor: ' . $_POST["name"] . '</p>' . "\n";  $messageBody .= '<br>' . "\n";}if($_POST['email']!='nope'){  $messageBody .= '<p>Email Address: ' . $_POST['email'] . '</p>' . "\n";  $messageBody .= '<br>' . "\n";}else{  $headers = '';}if($_POST['state']!='nope'){  $messageBody .= '<p>State: ' . $_POST['state'] . '</p>' . "\n";  $messageBody .= '<br>' . "\n";}if($_POST['phone']!='nope'){  $messageBody .= '<p>Phone Number: ' . $_POST['phone'] . '</p>' . "\n";  $messageBody .= '<br>' . "\n";}if($_POST['fax']!='nope'){  $messageBody .= '<p>Fax Number: ' . $_POST['fax'] . '</p>' . "\n";  $messageBody .= '<br>' . "\n";}if($_POST['message']!='nope'){  $messageBody .= '<p>Message: ' . $_POST['message'] . '</p>' . "\n";} if($_POST["stripHTML"] == 'true'){  $messageBody = strip_tags($messageBody);} try{  if(!mail($owner_email, $subject, $messageBody, $headers)){   throw new Exception('mail failed');  }else{   echo 'mail sent';  }}catch(Exception $e){  echo $e->getMessage() ."\n";}?> <!--<?php$field_name = $_POST['name'];$field_email = $_POST['email'];$field_message = $_POST['message'];$mail_to = 'michaelasnape@me.com';$subject = 'Message from a site visitor '.$field_name;$body_message = 'From: '.$field_name."\n";$body_message .= 'E-mail: '.$field_email."\n";$body_message .= 'Message: '.$field_message;$headers = 'From: '.$field_email."\r\n";$headers .= 'Reply-To: '.$field_email."\r\n";$mail_status = mail($mail_to, $subject, $body_message, $headers);if ($mail_status) { ?><script language="javascript" type="text/javascript">  alert('Thank you for the message. We will contact you shortly.');  window.location = 'contact_page.html';</script><?php}else { ?><script language="javascript" type="text/javascript">  alert('Message failed. Please, send an email to gordon@template-help.com');  window.location = 'contact_page.html';</script><?php}?>-->

HTML:

<form action="bin/MailHandler.php" method="post" id="contact-form"><div class="success">Contact form submitted!<br><strong>We will be in touch soon.</strong></div><fieldset><label class="name"><input name="name" type="text" value="Enter Your Name:"><span class="error">*This is not a valid name.</span> <span class="empty">*This field is required.</span></label><label name="email" class="email"><input type="text" value="Enter Your E-mail:"><span class="error">*This is not a valid email address.</span> <span class="empty">*This field is required.</span></label><label name="phone" class="phone"><input type="tel" value="Enter Your Phone:"><span class="error">*This is not a valid phone number.</span> <span class="empty">*This field is required.</span></label><label name="message" class="message"><textarea>Enter Your Message:</textarea><span class="error">*The message is too short.</span> <span class="empty">*This field is required.</span></label><div class="buttons-wrapper"><a class="link" data-type="reset">Reset</a><a class="link" data-type="submit">Submit</a></div></fieldset></form>

Now tell me why this is not working. I have made e-mail forms before but this is a template and its so confusing to me. Any help is appreciated. Note I did contact the template support with no real help. PeaceMichael Snape

Edited July 8, 2012 by DarkxPunk

[dsonesuk]

name attribute goes in the inputs, not the labels, the first one is correct.

<input name="name" type="text" value="Enter Your Name:">

[DarkxPunk]

Made the corrections, still no results. PHP:

<?php$owner_email = $_POST["michaelasnape@me.com"];$headers = 'From:' . $_POST["email"];$subject = 'A message from your site visitor ' . $_POST["name"];$messageBody = "";if($_POST['name']!='nope'){  $messageBody .= '<p>Visitor: ' . $_POST["name"] . '</p>' . "\n";  $messageBody .= '<br>' . "\n";}if($_POST['email']!='nope'){  $messageBody .= '<p>Email Address: ' . $_POST['email'] . '</p>' . "\n";  $messageBody .= '<br>' . "\n";}else{  $headers = '';}if($_POST['state']!='nope'){   $messageBody .= '<p>State: ' . $_POST['state'] . '</p>' . "\n";  $messageBody .= '<br>' . "\n";}if($_POST['phone']!='nope'){   $messageBody .= '<p>Phone Number: ' . $_POST['phone'] . '</p>' . "\n";  $messageBody .= '<br>' . "\n";}if($_POST['fax']!='nope'){   $messageBody .= '<p>Fax Number: ' . $_POST['fax'] . '</p>' . "\n";  $messageBody .= '<br>' . "\n";}if($_POST['message']!='nope'){  $messageBody .= '<p>Message: ' . $_POST['message'] . '</p>' . "\n";}if($_POST["stripHTML"] == 'true'){  $messageBody = strip_tags($messageBody);}try{  if(!mail($owner_email, $subject, $messageBody, $headers)){   throw new Exception('mail failed');  }else{   echo 'mail sent';  }}catch(Exception $e){  echo $e->getMessage() ."\n";}?><!--<?php$field_name = $_POST['name'];$field_email = $_POST['email'];$field_message = $_POST['message'];$mail_to = 'michaelasnape@me.com';$subject = 'Message from a site visitor '.$field_name;$body_message = 'From: '.$field_name."\n";$body_message .= 'E-mail: '.$field_email."\n";$body_message .= 'Message: '.$field_message;$headers = 'From: '.$field_email."\r\n";$headers .= 'Reply-To: '.$field_email."\r\n";$mail_status = mail($mail_to, $subject, $body_message, $headers);if ($mail_status) { ?><script language="javascript" type="text/javascript">  alert('Thank you for the message. We will contact you shortly.');  window.location = 'contact_page.html';</script><?php}else { ?><script language="javascript" type="text/javascript">  alert('Message failed. Please, send an email to gordon@template-help.com');  window.location = 'contact_page.html';</script><?php}?>-->

HTML:

<form action="bin/MailHandler.php" method="post" id="contact-form">	  <div class="success">	   Contact form submitted!<br>	   <strong>We will be in touch soon.</strong>	  </div>	  <fieldset>	   <label>	    <input name="name" type="text" value="Enter Your Name:">	    <span class="error">*This is not a valid name.</span> <span class="empty">*This field is required.</span>	   </label>	   <label class="email">	    <input name="email" type="text" value="Enter Your E-mail:">	    <span class="error">*This is not a valid email address.</span> <span class="empty">*This field is required.</span>	   </label>	   <label class="phone">	    <input name="phone" type="tel" value="Enter Your Phone:">	    <span class="error">*This is not a valid phone number.</span> <span class="empty">*This field is required.</span>	   </label>	   <label class="message">	    <textarea name="message" >Enter Your Message:</textarea>	    <span class="error">*The message is too short.</span> <span class="empty">*This field is required.</span>	   </label>	   <div class="buttons-wrapper">	    <a class="link" data-type="reset">Reset</a>	    <a class="link" data-type="submit">Submit</a>	   </div>	  </fieldset>	 </form>

[dsonesuk]

unless you are using JavaScript to validate form and then submit, and also do resetthese

			<a class="link" data-type="reset">Reset</a>			<a class="link" data-type="submit">Submit</a>

should be similar to

	   	 <input type="reset" class="link" data-type="reset" name="resetBut" value="Reset">			<input type="submit" class="link" data-type="submit" name="submitBut" value="Submit">

Note: the data-type attributes i don't think are supported yet! this

$owner_email = $_POST["michaelasnape@me.com"];

should be

$owner_email = "michaelasnape@me.com";

also if this code does not receive post values for 'fax' and 'state' it may cause it to fail also. AND there must be more to this code as where does it convert values to 'nope' if empty?

Edited July 8, 2012 by dsonesuk

[DarkxPunk]

There are a few files provides (honestly I am completely willing to simply redo the code for this damn form but I need to keep the validation for the fields, which is done in JS) I will compress all the code provided and you can use the form provided here to figure this out.

Contact Form Package.zip

[dsonesuk]

OK! it looks as though this uses jquery ajax to look for the name value set for the labels, to look for the values set within the labels sibling input elements, it also seems it validates against the inputs for 'fax', 'state' etc. so if these are not included, or are included but in hidden labels with hidden inputs other than the defaults values the validation code will cause it to fail validation, OR UNLESS you remove these from the js/jquery form code validation completely. Without this being provided at the beginning, what i suggested was wrong at the time as i had no clue to this js/jquery code existing and what it was does during and after submission.

[DarkxPunk]

Okay but every time I send the data it says it worked. But it does not send the data. Clearly the JS is working fine and collecting the data, but it's not sending it to the php to send it to me.What do I have to change, or more specifically how do I change it to get it to work?

[DarkxPunk]

Any help at all please? I need this done for a job...

[birbal]

It would be better if you post the JS part rather than attatching it.

[justsomeguy]

Okay but every time I send the data it says it worked. But it does not send the data. Clearly the JS is working fine and collecting the data, but it's not sending it to the php to send it to me.

Are you sure about that? Are you using the browser's developer tools to look at the traffic going out to verify that it is not sending a request?

[DarkxPunk]

It would be better if you post the JS part rather than attatching it.

Forms JS:

//forms;(function($){	$.fn.forms=function(o){		return this.each(function(){			var th=$(this)				,_=th.data('forms')||{					errorCl:'error',					emptyCl:'empty',					invalidCl:'invalid',					notRequiredCl:'notRequired',					successCl:'success',					successShow:'4000',					mailHandlerURL:'bin/MailHandler.php',					ownerEmail:'support@guardlex.com',					stripHTML:true,					smtpMailServer:'localhost',					targets:'input,textarea',					controls:'a[data-type=reset],a[data-type=submit]',					validate:true,					rx:{						".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},						".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},						".email":{rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'},						".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},						".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},						".message":{rx:/.{20}/,target:'textarea'}					},					preFu:function(){						_.labels.each(function(){							var label=$(this),								inp=$(_.targets,this),								defVal=inp.val(),								trueVal=(function(){											var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html()											return defVal==''?defVal:tmp										})()							trueVal!=defVal								&&inp.val(defVal=trueVal||defVal)							label.data({defVal:defVal})															inp								.bind('focus',function(){									inp.val()==defVal										&&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl))								})								.bind('blur',function(){									_.validateFu(label)									if(_.isEmpty(label))										inp.val(defVal)										,_.hideErrorFu(label.removeClass(_.invalidCl))																			})								.bind('keyup',function(){									label.hasClass(_.invalidCl)										&&_.validateFu(label)								})							label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide()						})						_.success=$('.'+_.successCl,_.form).hide()					},					isRequired:function(el){													return !el.hasClass(_.notRequiredCl)					},					isValid:function(el){													var ret=true						$.each(_.rx,function(k,d){							if(el.is(k))								ret=d.rx.test(el.find(d.target).val())																})						return ret												},					isEmpty:function(el){						var tmp						return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')					},					validateFu:function(el){													el.each(function(){							var th=$(this)								,req=_.isRequired(th)								,empty=_.isEmpty(th)								,valid=_.isValid(th)																						if(empty&&req)								_.showEmptyFu(th.addClass(_.invalidCl))							else								_.hideEmptyFu(th.removeClass(_.invalidCl))														if(!empty)								if(valid)									_.hideErrorFu(th.removeClass(_.invalidCl))								else									_.showErrorFu(th.addClass(_.invalidCl))														})					},					getValFromLabel:function(label){						var val=$('input,textarea',label).val()							,defVal=label.data('defVal')														return label.length?val==defVal?'nope':val:'nope'					}					,submitFu:function(){						_.validateFu(_.labels)													if(!_.form.has('.'+_.invalidCl).length)							$.ajax({								type: "POST",								url:_.mailHandlerURL,								data:{									name:_.getValFromLabel($('.name',_.form)),									email:_.getValFromLabel($('.email',_.form)),									phone:_.getValFromLabel($('.phone',_.form)),									fax:_.getValFromLabel($('.fax',_.form)),									state:_.getValFromLabel($('.state',_.form)),									message:_.getValFromLabel($('.message',_.form)),									owner_email:_.ownerEmail,									stripHTML:_.stripHTML								},								success: function(){									_.showFu()								}							})								},					showFu:function(){						_.success.slideDown(function(){							setTimeout(function(){								_.success.slideUp()								_.form.trigger('reset')							},_.successShow)						})					},					controlsFu:function(){						$(_.controls,_.form).each(function(){							var th=$(this)							th								.bind('click',function(){									_.form.trigger(th.data('type'))									return false								})						})					},					showErrorFu:function(label){						label.find('.'+_.errorCl).slideDown()					},					hideErrorFu:function(label){						label.find('.'+_.errorCl).slideUp()					},					showEmptyFu:function(label){						label.find('.'+_.emptyCl).slideDown()						_.hideErrorFu(label)					},					hideEmptyFu:function(label){						label.find('.'+_.emptyCl).slideUp()					},					init:function(){						_.form=_.me												_.labels=$('label',_.form)						_.preFu()												_.controlsFu()																				_.form							.bind('submit',function(){								if(_.validate)									_.submitFu()								else									_.form[0].submit()								return false							})							.bind('reset',function(){								_.labels.removeClass(_.invalidCl)																	_.labels.each(function(){									var th=$(this)									_.hideErrorFu(th)									_.hideEmptyFu(th)								})							})						_.form.trigger('reset')					}				}			_.me||_.init(_.me=th.data({forms:_}))			typeof o=='object'				&&$.extend(_,o)		})	}})(jQuery)$(window).load(function(){	$('#contact-form').forms({		ownerEmail:'#'	})})

[DarkxPunk]

The problem was the php on the server. It's all solved now.