SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question PHP to send HTML contact form from site to Email

    I've been combing forums for 2 weeks now trying to find a way to have a working contact form on my portfolio site. I couldn't have fathomed how difficult this task is turning out to be. I'm a competent HTML and CSS developer. PHP, however, is new to me. I've been studying up on it at treehouse and understand the basic $_POST, *echo, and !isset commands.

    I am currently trying to use the PHP from Chris Coyer’s contact form http://css-tricks.com/examples/NiceSimpleContactForm2/ in my portfolio site live @ http://kovcreation.com/

    I’m so frustrated after trying many different solutions I just want it to work!!!

    I'm fairly certain my HTML is solid but I'll post that anyways. I'm pretty sure the problem is in the PHP that I have. I'm not married to this solution so if you know of a simpler way to send 3 bits of info (name, email, and message) from a contact form on site to my email inbox I'd love to hear it.


    Any help is greatly appreciated

    Form HTML
    HTML Code:
                                   <div class="contact_form">
                       
                               <div class="touch">&nbsp;</div>   
                                           
                               <form id="contact_me_form" method="post" action="email.php">
                               
                                  <div class="error_contact" id="name_error">Name is Required</div>
                                  <input type="text" placeholder="Your Name (required)" id="name" class="textbox" />
                                                   
                                  <input type="text" name="email" id="email" placeholder="Your Email (required)" class="textbox email">
                                  
                                  <div class="error_contact" id="comment_error">Message is Required</div>                         
                                  <textarea cols="25" rows="5" name="message" id="comment" class="textbox message" placeholder="Your Message ( Inquiry? , Freelance Work? , or Just to Say Hi...)"></textarea>
                                 
                                  <input type="image" src="img/send.png" alt="Send Message" name="submit" class="button submit_btn">
                                   </div>
    Form PHP
    PHP Code:
    <?php

    $EmailFrom 
    "me@example.org";
    $EmailTo "me@example.org";
    $Subject "Nice & Simple Contact Form by CSS-Tricks";
    $Name Trim(stripslashes($_POST['Name'])); 
    $Email Trim(stripslashes($_POST['Email'])); 
    $Message Trim(stripslashes($_POST['Message'])); 

    // validation
    $validationOK=true;
    if (!
    $validationOK) {
      print 
    "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
      exit;
    }

    // prepare email body text
    $Body "";
    $Body .= "Name: ";
    $Body .= $Name;
    $Body .= "\n";
    $Body .= "Email: ";
    $Body .= $Email;
    $Body .= "\n";
    $Body .= "Message: ";
    $Body .= $Message;
    $Body .= "\n";

    // send email 
    $success mail($EmailTo$Subject$Body"From: <$EmailFrom>");

    // redirect to success page 
    if ($success){
      print 
    "<meta http-equiv=\"refresh\" content=\"0;URL=contactthanks.php\">";
    }
    else{
      print 
    "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
    }
    ?>
    Thanks for reading.
    Last edited by Force Flow; Oct 21, 2013 at 17:57. Reason: removed real email address

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You have a couple of issues in your code, the first of which is your missing the name attribute on your name input.
    Code:
    <input type="text" placeholder="Your Name (required)" id="name" class="textbox" name="name" />
    The second of which is your $_POST key names don't match your form names, they are case sensitive so they need to match.
    Code:
    $Name = Trim(stripslashes($_POST['name'])); 
    $Email = Trim(stripslashes($_POST['email'])); 
    $Message = Trim(stripslashes($_POST['message']));
    Also it's extremely bad practice to name your form inputs with a value of name, the value should be meaningful. For instance name could instead be fullname.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi kalmykov. Welcome to the forums.

    Yes, those errors Chris pointed out are important. It's also a shame the form has no labels, which is good for accessibility, even if you hide them. The form also includes little or security, which is worth including too. I have a form on my site that people have found handy, so feel free to check that out (link in my signature). It includes security and a honeypot to ward off spam bots.

  4. #4
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both for the warm welcome and tips. As i said PHP is very new to me, so adding security to it is WAY over my head.
    My biggest concern is getting it to actually send the data inputed to my email. I fixed the capitalization issue and added the name attribute on my name input but unfortunately it's still not sending. However, that was somehow interfering w/ my java script which is now working so now at least SOMETHING happens when you click submit I didn't think the two (PHP and Javascript) would get in eachothers way but apparently they do so I'm posting the relevant Java script as well.


    Code:
    $(function() {
      $('.error_contact').hide();
      $('.contact_input').css({backgroundColor:"#FFFFFF"});
      $('.contact_input').focus(function(){
        $(this).css({backgroundColor:"#F4F4F4"});
      });
      $('.contact_input').blur(function(){
        $(this).css({backgroundColor:"#FFFFFF"});
      });
    
      $(".submit_btn").click(function() {
    		// validate and process form
    		// first hide any error messages
        $('.error_contact').hide();
    		
    	  var name = $("input#name").val();
    		if (name == "") {
          $("#name_error").show();
    	  $("input#name").css({border:"1px solid #B9B925"});      
          return false;
        }
    		
    		var hasError = false;
            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
     
            var email = $("input#email").val();
            if(email == '') {
                $("input#email").css({border:"1px solid #B9B925"}).before('<div class="error_contact" id="email_error">Please enter your email address</div>');
                hasError = true;
            }
     
            else if(!emailReg.test(email)) {
                $("input#email").css({border:"1px solid #B9B925"}).before('<div class="error_contact" id="email_error">Enter a valid email address</div>');
                hasError = true;
            }
     
            if(hasError == true) { return false; }
    		
    		var comment = $("textarea#comment").val();
    		if (comment == "") {
          $("#comment_error").show();
    	  $("textarea#comment").css({border:"1px solid #B9B925"});      
          return false;
        }		
    		var dataString = '&name=' + name + '&email=' + email + '&comment=' + comment;
    		//alert (dataString);return false;
    		
    		$.ajax({
          type: "POST",
          url: "bin/process.php",
          data: dataString,
          success: function() {
            var m = $("#message");		
    		$("input#name").css({border:"1px solid #B5B5B5"});
    		 $("input#email").css({border:"1px solid #B5B5B5"});
    		$("textarea#comment").css({border:"1px solid #B5B5B5"});
    		m.animate({			
    			"top": "-73px",
    			"opacity": "1"				
    		},"fast");
    		setTimeout(function () {
               m.animate({			   			
    			"top": "-105px",
    			"opacity": "0"
    		},"slow");
            }, 8000);	
            
          }
         });
        return false;
    	});
    });
    Ralph I checked out the Form on your site as well as the _setup.html and a great deal of it confuses me. I'm afraid that if I dropped this PHP for yours that I would screw things up even more then they already are. I understand (or at least think I understand ) every line in the PHP I'm currently using. Perhaps there is something in my Javascript keeping email.php from running.

  5. #5
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I created a gist for this

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I took a quick look and you have a double equals on your input attribute.

    Code:
    <input type="text" placeholder="Your Name (required)" id="name" name=="name" class="textbox" />
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  7. #7
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thnx I fixed it on my site but still no dice

  8. #8
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You have renamed your input field to user but your JavaScript still references name
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle


Tags for this Thread

Bookmarks

Posting Permissions

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