Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    45
    Thanks
    15
    Thanked 0 Times in 0 Posts

    PHP Enquiry form

    Hi

    I need some help, I can battle my way through CSS and HTML, but when it comes to enquiry forms I am out of my depth...

    This is the site I am putting together and the form is in the end column:

    http://vicarscafebistro.co.uk/website/contact.html

    I tried using this form from here: http://css-tricks.com/nice-and-simple-contact-form/

    But it was far too big and when I tried to make it smaller it was all over the place so currently has no CSS applied to it...

    From a layout perspective how can I get the text input fields to stack nicely and all aligned?

    From a PHP perspective what have I done to break it? I am testing it with my home email address but it is not working...

    Here is my HTML for it:

    Code:
    <div id="page-wrap"> 
    
    <div id="contact-area"> 
    
    <form method="post" action="contactengine.php"> 
    
    <p><label for="Name">Name:</label> 
    
    <input type="text" name="Name" id="Name" /> </p>
    
    <p><label for="City">City:</label> 
    
    <input type="text" name="City" id="City" /> </p>
    
    <p><label for="Phone">Email:</label> 
    
    <input type="text" name="Phonr" id="Phone" /> </p>
    
    <p><label for="Email">Phone:</label> 
    
    <input type="text" name="Email" id="Email" /> </p>
    
    <p>&nbsp;</p>
    
    <p><label for="Message">Comments:</label><br /> 
    
    <textarea name="Message" rows="5" cols="33" id="Message"></textarea> </p>
    
    <p><input type="submit" name="submit" value="Submit" class="submit-button" /> 
    
    </form></p> 
    
    <div style="clear: both;"></div> 
    
    </div> 
    </div>
    There is no CSS as I could not work out what to use, but what they suggested was:

    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	font-size: 62.5%;
    	font-family: Helvetica, sans-serif;
    	background: url(images/stripe.png) repeat;
    }
    
    p {
    	font-size: 1.3em;
    	margin-bottom: 15px;
    }
    
    #page-wrap {
    	width: 660px;
    	background: white;
    	padding: 20px 50px 20px 50px;
    	margin: 20px auto;
    	min-height: 500px;
    	height: auto !important;
    	height: 500px;
    }
    
    #contact-area {
    	width: 600px;
    	margin-top: 25px;
    }
    
    #contact-area input, #contact-area textarea {
    	padding: 5px;
    	width: 471px;
    	font-family: Helvetica, sans-serif;
    	font-size: 1.4em;
    	margin: 0px 0px 10px 0px;
    	border: 2px solid #ccc;
    }
    
    #contact-area textarea {
    	height: 90px;
    }
    
    #contact-area textarea:focus, #contact-area input:focus {
    	border: 2px solid #900;
    }
    
    #contact-area input.submit-button {
    	width: 100px;
    	float: right;
    }
    
    label {
    	float: left;
    	text-align: right;
    	margin-right: 15px;
    	width: 100px;
    	padding-top: 5px;
    	font-size: 1.4em;
    }
    The PHP They supply is here:

    Code:
    <?php
    
    $EmailFrom = "chriscoyier@gmail.com";
    $EmailTo = "CHANGE-THIS@YOUR-DOMAIN.com";
    $Subject = "Nice & Simple Contact Form by CSS-Tricks";
    $Name = Trim(stripslashes($_POST['Name'])); 
    $Tel = Trim(stripslashes($_POST['Tel'])); 
    $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 .= "Tel: ";
    $Body .= $Tel;
    $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\">";
    }
    ?>
    Which I changed to this (I was guessing and it doesn't work)

    Code:
    <?php
    
    $EmailFrom = "heypresto@blueyonder.co.uk";
    $EmailTo = "heypresto@blueyonder.co.uk";
    $Subject = "Nice & Simple Contact Form by CSS-Tricks";
    $Name = Trim(stripslashes($_POST['Name'])); 
    $City = Trim(stripslashes($_POST['City'])); 
    $Phone = Trim(stripslashes($_POST['Phone'])); 
    $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 .= "City: ";
    $Body .= $City;
    $Body .= "\n";
    $Body .= "Phone: ";
    $Body .= $Phone;
    $Body .= "\n";
    $Body .= "Email: ";
    $Body .= $Email;
    $Body .= "\n";
    $Body .= "Comments: ";
    $Body .= $Comments;
    $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\">";
    }
    ?>
    Any help would be much appreciated.... Thanks

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Style for the form:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    #page-wrap{
    	width:200px;
    }
    label{
    	float:left;
    	margin-bottom: 5px;
    }
    input{
    	float:right;
    	margin-bottom: 5px;
    }
    </style>
    </head>
    <body>
    <div class="text">
    <p><img src="http://vicarscafebistro.co.uk/website/Enquiry.jpg" width="155" height="37" /></p>
    <div id="page-wrap">
    	<div id="contact-area">
    		<form method="post" action="contactengine.php">
    			<label for="Name">Name:</label>
    			<input type="text" name="Name" id="Name" />
    
    			<label for="City">City:</label>
    			<input type="text" name="City" id="City" />
    
    			<label for="Phone">Email:</label>
    			<input type="text" name="Phone" id="Phone" />
    
    			<label for="Email">Phone:</label>
    			<input type="text" name="Email" id="Email" />
    			<p>&nbsp;</p>
    			<p><label for="Message">Comments:</label><br />
    			<textarea name="Message" rows="5" cols="33" id="Message" ></textarea> </p>
    			<p><input type="submit" name="submit" value="Submit" class="submit-button" style="float:left;" />
    		</form></p>
    		<div style="clear: both;"></div>
    	</div>
    </div>
    <!-- end .text --></div>
    </body>
    </html>
    Notice This line
    Code:
    <input type="text" name="Phonr" id="Phone" />
    Changed to this
    Code:
    <input type="text" name="Phone" id="Phone" />
    The r for e mistype was part of the php failure.
    The second error is here, in the php file:
    Code:
    $Body .= "Comments: ";
    $Body .= $Comments;
    S/B:
    Code:
    $Body .= "Comments: ";
    $Body .= $Message;
    Last edited by sunfighter; 02-03-2013 at 05:44 PM.

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    45
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Hi

    Thanks so much for the quick response, I fixed the errors with the div tag and php and re-uploaded, I get the other script saying message succesful, but the email is not coming through to my inbox I checked the webhost and it does support PHP so I really don't know why it's still not working. I am getting other emails to my inbox so it's not that.

    I also tried the CSS for the layout and it is VERY close, but for some reason it stacks name and city together and I have an extra box for comments and I can't for the life of me figure out why???

    See here:

    http://vicarscafebistro.co.uk/website/contact.html

    PHP now reads as follows:

    Code:
    <?php
    
    $EmailFrom = "heypresto@blueyonder.co.uk";
    $EmailTo = "heypresto@blueyonder.co.uk";
    $Subject = "Nice & Simple Contact Form by CSS-Tricks";
    $Name = Trim(stripslashes($_POST['Name'])); 
    $City = Trim(stripslashes($_POST['City'])); 
    $Phone = Trim(stripslashes($_POST['Phone'])); 
    $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 .= "City: ";
    $Body .= $City;
    $Body .= "\n";
    $Body .= "Phone: ";
    $Body .= $Phone;
    $Body .= "\n";
    $Body .= "Email: ";
    $Body .= $Email;
    $Body .= "\n";
    $Body .= "Comments: ";
    $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\">";
    }
    ?>

    CSS added:

    Code:
    }
    #page-wrap {
    	width:290px;
    }	
    label {
    	float:left;
    	margin-bottom: 5px;
    }
    input {
    	float:right;
    	margin-bottom: 5px;
    }
    and the html...

    Code:
    <div id="page-wrap"> 
     
    	 
    				
    		<div id="contact-area"> 
    			
    			<form method="post" action="contactengine.php"> 
                
    				<label for="Name">Name:</label> 
    				<input type="text" name="Name" id="Name" />
                    
                    <label for="City">City:</label> 
    				<input type="text" name="City" id="City" />
    			
    				<label for="Phone">Phone:</label> 
    				<input type="text" name="Phone" id="Phone" />
                    
    				<label for="Email">Email:</label> 
    				<input type="text" name="Email" id="Email" />
    				
    				<label for="Message">Comments:</label>
    				<textarea name="Message" rows="5" cols="33" id="Message"></textarea>
     
    			<input type="submit" name="submit" value="Submit" class="submit-button" /> 
    			</form> 
    			
    			<div style="clear: both;"></div> 
    			
     
    		
    		</div> 
    	
    	</div>
    Last edited by mzpresto; 02-03-2013 at 06:55 PM. Reason: add php

  • #4
    New Coder
    Join Date
    Sep 2011
    Posts
    35
    Thanks
    18
    Thanked 1 Time in 1 Post
    try that CSS (that 100px width is just a rough guess, you may want to change it slightly if it's too long)
    Code:
    label {
    	text-align:right;
    	width: 100px;
    	margin-bottom: 5px;
    }
    input {
    	margin-bottom: 5px;
    }

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    but for some reason it stacks name and city together
    You never inserted the css styling anywhere:

    Code:
    <style type="text/css">
    #page-wrap{
    	width:200px;
    }
    label{
    	float:left;
    	margin-bottom: 5px;
    }
    input{
    	float:right;
    	margin-bottom: 5px;
    }
    </style>

  • #6
    New Coder
    Join Date
    Aug 2012
    Posts
    45
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Thanks guys! Haha still couldn't work out the layout in CSS with that last form, even with the width thing added and trying diff properties so tried another one in a table with a diff php, still no message so must be something to do with the hosting company?

  • #7
    New Coder
    Join Date
    Aug 2012
    Posts
    45
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Figured it out, it was getting rejected as spam because the email "from" was not the same as the hosting domain, I have not set that part up yet so unable to test, but makes sense, found this:

    Setting the ‘From’ field right

    Have a ‘From’ field in the emails that you sent through the script. The From address should belong to the domain from where you are running the script. If your script is running on your-website.com then the From address should be like someone@your-website.com.


  •  

    Posting Permissions

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