www.webdeveloper.com
Results 1 to 2 of 2

Thread: Please Help with html form, really stuck!

  1. #1
    Join Date
    Aug 2014
    Posts
    1

    Lightbulb Please Help with html form, really stuck!

    hey guys, new on here and need some help with a website i have taken over work on. The guy who previously worked on the site has done something with the contact part of the page, and now the forms does not send at all, and although i know much html/css im not great with contact forms.

    Any help will be greatly appreciated! below are all html / js files i think may be needed.


    --html form--
    HTML Code:
    <form id="contact-form" class="contact-form">
                    <div class="success">Contact form submitted!<strong> We will be in touch soon.</strong> </div>
                    <fieldset>
                        <label class="name">
                         <input type="text" value="Name:">						
                         <span class="error">*This is not a valid name.</span> <span class="empty">*This field is required.</span>						
                        </label><br>
                        <label class="email">						
                             <input type="email" value="E-mail:">						
                             <span class="error">*This is not a valid email address.</span> <span class="empty">*This field is required.</span>						
                        </label><br>
                        <label class="phone">						
                             <input type="text" value="Phone:">						
                             <span class="error">*This is not a valid phone number.</span> <span class="empty">*This field is required.</span>						
                        </label><br>		
                        <label class="message">						
                             <textarea>Message:</textarea>						
                             <span class="error">*The message is too short.</span> <span class="empty">*This field is required.</span>						
                        </label>
                    </fieldset>
                      <div class="pull-left">
                          <a href="#" class="link-2" data-type="reset">Clear</a>
                          <a href="#" class="link-2" data-type="submit">send</a>
                      </div>
                  </form>
    --forms.js--
    Code:
    //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:'bat/MailHandler.php',
    					ownerEmail:'support@template-help.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-form2').forms({
    	ownerEmail:'leejohnson95@hotmail.co.uk'
       })
       $('#contact-form').forms({
    	ownerEmail:'leejohnson95@hotmail.co.uk'
       })
    })
    --mailhandler.php---
    PHP Code:
    <?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";
        }
    ?>
    Thanks for any help!
    Last edited by jedaisoul; 08-15-2014 at 04:44 PM. Reason: code tags added

  2. #2
    Join Date
    Mar 2012
    Posts
    1,814
    1. Your form has no action or method declared.

    2. I haven't the faintest idea what the JS is doing. I'd suggest that you get rid of it and link the form directly to the PHP. E.g.

    <form action="mailhandler.php" method="POST">

    Get that working first, then worry about whatever the JS adds (if anything)!!!

    Note: You need to add validation to the PHP (irrespective of whether it is being done client-side).
    Last edited by jedaisoul; 09-03-2014 at 04:18 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles