Need some help with PHP in HTML

PhysX · Oct 28, 2012

I am working on a contact page on my website and for some reason, I don't know what I'm doing wrong... Typical case haha. I'm sure its right under my nose, but for the life of me I can't figure it out.

Anyway here is the snip.

PHP:

<html>
<body>
<!-- Contact Page -->
			<div id="contact">
				<div class="inner-content clearfix">
					<h1>Get in touch!</h1>
<?php
						<form id="contact-form">
						<form action="send_email.php" method="post" id="contactForm">
                	<div>
                        <input type="text" name="name" class="form required" id="name" placeholder="Name or Company" value="" />
                    </div>
                    <div>
                        <input type="text" name="email" class="form required email" id="email" placeholder="E-mail address" value="" />
                    </div>
                    <div>
                		<textarea cols="40" rows="8" name="message" class="form required" id="message" placeholder=Ask a question"></textarea>
                	</div>
					<div class="clear"></div>
                	</div>
                	<div class="oh">
                		<input class="button" type="submit" value="Send" />
                		<div id="loader"></div>
                		<span id="result">
                			<span class="success">Email sent correctly</span>
            				<span class="fail">Some errors occurred, please try again</span> ?>
					</form>
				</div>
			</div>
			<!-- End Contact Page -->
</body>
[/HTML]

send_email.php

PHP:

<?php

//Insert your email address
$mailTo = "[email protected]";
//Insert the subject of the email
$subject = "Message from Website";



	if(isset($_POST['name']) && isset($_POST['email']) && isset($_POST['message']))
	{
		$name = htmlspecialchars(urldecode($_POST['name']));
		$mailFrom = htmlspecialchars(urldecode($_POST['email']));
		$message_text = htmlspecialchars($_POST['message']);
			
		$headers = 'Content-type: text/html; charset=UTF-8' . "\r\n";
		$headers .= 'From: '.$mailFrom;
		
		$message =  "<html>
						<head>
							<title> $subject </title>
						</head>
					<body>
						<b>Name/Company name:</b> $name<br /><br />
	    				<b>E-mail:</b> $mailFrom<br /><br />";
	    				
	    $message .=	   "<b>Message:</b><br />
						<p>$message_text</p>
					</body>
					</html>";
		
		if (mail($mailTo, $subject, $message, $headers))
			echo "email sent";
		else {
			echo "Some errors occurred, try again.";
		}
		
	}
	
?>

and of course I have the appropriate JS files located on the server. So my problem is when its all put together, it doesn't work... Any ideas ? This is what it looks like. I am obviously doing something wrong because its showing "fail / success" at the botton left. before even doing anything. Any help would be great. Thanks.

Also the send button is supposed to be under the message field... What a head ache.

petteyg359 · Oct 28, 2012

Why is your form in PHP tags?

Realee · Oct 28, 2012

The error that is showing is from your first snippet. You need to add the style display: none; to the class "fail".

The "?>" is showing because it's typed into the first snippet as well - it should be removed.

Your <textarea> has an unclosed quotation mark which will mis-align the other elements on the page.

Fix those and re-post and we'll see where we are.

PhysX · Oct 28, 2012

Alright, kind of change it a bit, it works now. however its showing success upon loading the screen, without even using the form haha... sorry I am a noob when it comes to this, but I believe if there is a will there is a way.

HTML

Code:

<!-- Contact Page -->
			<div id="contact">
				<div class="inner-content clearfix">
					<h1>Get in touch!</h1>			
				<form id="contactForm" action="process.php" method="post">
    <h2>Send us an email..</h2>
<div class="block">
<div class="done">
<b>Thank you !</b> We have received your message. 
</div>
	<div class="form">
	<form method="post" action="process.php">
	<div class="element">
		<label>Name</label>
		<input type="text" name="name" class="text" />
	</div>
	<div class="element">
		<label>Email</label>
		<input type="text" name="email" class="text" />
	</div>
	<div class="element">
		<label>Comment</label>
		<textarea name="comment" class="text textarea" /></textarea>
	</div>
	<div class="element">
		
		<input type="submit" id="submit"/>
		<div class="loading"></div>
	</div>
	</form>
	</div>
</div>

<div class="clear"></div>
<!-- End Freedback Form -->

				</div>
			</section>
			<!-- End Contact Page -->

AJAX

Code:

<script type="text/javascript">
$(document).ready(function() {
	
	//if submit button is clicked
	$('#submit').click(function () {		
		
		//Get the data from all the fields
		var name = $('input[name=name]');
		var email = $('input[name=email]');
		var comment = $('textarea[name=comment]');

		//Simple validation to make sure user entered something
		//If error found, add hightlight class to the text field
		if (name.val()=='') {
			name.addClass('hightlight');
			return false;
		} else name.removeClass('hightlight');
		
		if (email.val()=='') {
			email.addClass('hightlight');
			return false;
		} else email.removeClass('hightlight');
		
		if (comment.val()=='') {
			comment.addClass('hightlight');
			return false;
		} else comment.removeClass('hightlight');
		
		//organize the data properly
		var data = 'name=' + name.val() + '&email=' + email.val() + '&comment='  + encodeURIComponent(comment.val());
		
		//disabled all the text fields
		$('.text').attr('disabled','true');
		
		//show the loading sign
		$('.loading').show();
		
		//start the ajax
		$.ajax({
			//this is the php file that processes the data and send mail
			url: "process.php",	
			
			//GET method is used
			type: "GET",

			//pass the data			
			data: data,		
			
			//Do not cache the page
			cache: false,
			
			//success
			success: function (html) {				
				//if process.php returned 1/true (send mail success)
				if (html==1) {					
					//hide the form
					$('.form').fadeOut('slow');					
					
					//show the success message
					$('.done').fadeIn('slow');
					
				//if process.php returned 0/false (send mail failed)
				} else alert('Sorry, unexpected error. Please try again later.');				
			}		
		});
		
		//cancel the submit button default behaviors
		return false;
	});	
});	
</script>

PHP

Code:

<?php

//Retrieve form data. 
//GET - user submitted data using AJAX
//POST - in case user does not support javascript, we'll use POST instead
$name = ($_GET['name']) ? $_GET['name'] : $_POST['name'];
$email = ($_GET['email']) ?$_GET['email'] : $_POST['email'];
$comment = ($_GET['comment']) ?$_GET['comment'] : $_POST['comment'];

//flag to indicate which method it uses. If POST set it to 1
if ($_POST) $post=1;

//Simple server side validation for POST data, of course, you should validate the email
if (!$name) $errors[count($errors)] = 'Please enter your name.';
if (!$email) $errors[count($errors)] = 'Please enter your email.'; 
if (!$comment) $errors[count($errors)] = 'Please enter your comment.'; 

//if the errors array is empty, send the mail
if (!$errors) {

	//recipient
	$to = 'Your Name <[email protected]>';	
	//sender
	$from = $name . ' <' . $email . '>';
	
	//subject and the html message
	$subject = 'Comment from ' . $name;	
	$message = '
	<!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></head>
	<body>
	<table>
		<tr><td>Name</td><td>' . $name . '</td></tr>
		<tr><td>Email</td><td>' . $email . '</td></tr>
		<tr><td>Comment</td><td>' . nl2br($comment) . '</td></tr>
	</table>
	</body>
	</html>';

	//send the mail
	$result = sendmail($to, $subject, $message, $from);
	
	//if POST was used, display the message straight away
	if ($_POST) {
		if ($result) echo 'Thank you! We have received your message.';
		else echo 'Sorry, unexpected error. Please try again later';
		
	//else if GET was used, return the boolean value so that 
	//ajax script can react accordingly
	//1 means success, 0 means failed
	} else {
		echo $result;	
	}

//if the errors array has values
} else {
	//display the errors message
	for ($i=0; $i<count($errors); $i++) echo $errors[$i] . '<br/>';
	echo '<a href="form.php">Back</a>';
	exit;
}


//Simple mail function with HTML header
function sendmail($to, $subject, $message, $from) {
	$headers = "MIME-Version: 1.0" . "\r\n";
	$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
	$headers .= 'From: ' . $from . "\r\n";
	
	$result = mail($to,$subject,$message,$headers);
	
	if ($result) return 1;
	else return 0;
}

?>

Thanks again.

Realee · Oct 29, 2012

Code:

<div class="done">
<b>Thank you !</b> We have received your message. 
</div>

Is this DIV set to display: none initially?

PhysX · Oct 29, 2012

Realee said:
Code:

<div class="done"> <b>Thank you !</b> We have received your message. </div>

Is this DIV set to display: none initially?

actually I had "textarea" /> in there twice. so for some reason it was making the other bit show up. almost done now haha...

in the attached image is what I am left with. One of the clear problems is that --name- is above its field and email address is beside names field, and message is beside email addresses field.

Ideas

Realee · Oct 29, 2012

Can you post your CSS code as well please?

It's almost like you've got inline div's in there or something odd.
Have you got the site live that I could look at?

PhysX · Oct 29, 2012

Realee said:
Can you post your CSS code as well please?

It's almost like you've got inline div's in there or something odd.
Have you got the site live that I could look at?

Actually you were right, the css, the portion there .block and . done
I forget to have it in the css so it didn't even know what to do with them. working flawless now

thanks for the help

Need some help with PHP in HTML

PhysX

Member

Attachments

petteyg359

Likes Popcorn

Realee

loss.jpg

PhysX

Member

Attachments

Realee

loss.jpg

PhysX

Member

Attachments

Realee

loss.jpg

PhysX

Member

Similar threads