How to make a contact form work with HTML and PHP

I have made a simple contact form with HTML and PHP. I uploaded both files to my server but it still does not send when I try to send a e-mail. How are they supposed to be linked? For example I know how to link a html and css file together but I cannot see anywhere where it shows how the PHP file is linked to the HTML file. I have attached my code below (the PHP code is in the javascript box)

Where am I going wrong?
Thanks in advance

A simple form usually is structured like this:

<form action="process_form.php" method="post">
   // form elements go here
</form>

The file process_form.php is where the data from the form inputs is processed and if required, an email is sent. Then the users is redirected back to the form where there is a ‘success’ message displayed. That is one simple scenario.

Is there a special reason why you want to include JavaScript with your form?

2 Likes

In addition to the form element needing the action attribute to target the processing script, the input elements need the name attribute to populate the $_POST array. The id attribute can be used to link the inputs with labels, but does not name the inputs.

1 Like

Thanks for the reply.
No I dont want to include java script I just didnt know where to put the php file in the codepen and still dont.
Do I attach it to the html doc and if so how.
I know how to attach the css to the html doc for example but I dont know how to attach the php file to the html doc.
How do I attach the two or does it not work that way?
That is my issue.
I attached the code I figured would work which was the html and php code bit I dont know how to link them both.
Thanks on advance

One does not put PHP in a CodePen. CodePens are for client-side code. If the PHP code is supposed to create a JS file or an HTML file, post the HTML or JS in the CodePen, not the PHP. If the PHP is supposed to process a form, post the PHP code in a message in the PHP category and discuss it there with PHP programmers.

Code can be included within a post by preceeding it with three backticks on a line by themselves and ending with three more backticks after the code on a line by themselves like this:
```
your code here
```
OR
by pasting the code within the post, then highlighting it, then clicking the </> button in the editor.

That should keep the formatting and contain it within a box with scrollbars.

1 Like

Ok I see.
I have the php code below.
How do I attach it so it works when someone sends a e-mail?
Thanks

<?php
if( isset($_POST['n']) && isset($_POST['e']) && isset($_POST['m']) ){
	$n = $_POST['n']; // HINT: use preg_replace() to filter the data
	$e = $_POST['e'];
	$m = nl2br($_POST['m']);
	$to = "john@example.com";	
	$from = $e;
	$subject = 'Contact Form Message';
	$message = '<b>Name:</b> '.$n.' <br><b>Email:</b> '.$e.' <p>'.$m.'</p>';
	$headers = "From: $from\n";
	$headers .= "MIME-Version: 1.0\n";
	$headers .= "Content-type: text/html; charset=iso-8859-1\n";
	if( mail($to, $subject, $message, $headers) ){
		echo "success";
	} else {
		echo "The server failed to send the message. Please try again later.";
	}
}
?>

You’re getting there…

You can edit your post above by clicking the pencil icon at the bottom of your post.

Type three backticks on a line by themselves before your code.
```
then paste your code here
finally type three more backticks on a line by themselves to close the code box.
```

OR

you can leave a blank line after the word “Thanks” and before the string <?php,
then highlight all of your code from the php string to the end and click the </> button in the editor to create the code box with the scrollbars and keep the formatting of your code.

Let me see if I understand the workflow that you have in mind.

1) A user lands on your web page.
2) The user fills out a “contact form” in his browser.
3) When the user “submits” the contact form, the data is sent to the server, processed in some way, and a “Thank you” or other message of acknowledgement is e-mailed to the user.

Is that correct so far? If so, is that the full extent of the action that you have in mind? or is there more?

Yes that is correct.
I honesty just want to get the e-mail to be sent to my e-mail when someone sends a e-mail through the contact form. On the 6th line in the php code it has the e-mail “john@example.com”.
I want any e-mails sent from the contact form to go to john@example.com.
I just dont know here to go from here.
Do I need to link the php file with anything or just put it in the public_html in hostgator?
I just dont know what the next step is from here.
Thanks

Did you try what WebMachine suggested in post #2 ?

i.e. put the path - filename of the PHP file that has the email related code as the forms action attribute value.

I honestly didn’t really understand post#.
I have the html form and php form I think are correct. I just dont now where to go from here.
Do I just put both the html and php file in the public_html file in hostgator or do I link it to something else? If so what and how do I link it.
Thanks

Going by the codepen in the OP the form has

<form id="my_form" onsubmit="submitForm(); return false;">

But forms usually have both action and method attributes

The value of the action attribute is usually where the forms data will be sent when it’s submitted.

In other words, have you tried
<form action="the_php_file.php" ...
in your form tag?

It might be that the submitForm function has preventDefault and is failing which could cause the form data to not be submitted, but adding an action is a first step worth trying.

So should the form HTML look like this -

<form id="my_form" onsubmit="submitForm(); return false;">
<form action="the_php_file.php"
  <p><input id="n" placeholder="Name" required></p>
  <p><input id="e" placeholder="Email Address" type="email" required></p>
  <textarea id="m" placeholder="write your message here" rows="10" required></textarea>
  <p><input id="mybtn" type="submit" value="Submit Form"> <span id="status"></span></p>
</form>

I thought you didn’t want to use JavaScript?

No.

onsubmit="submitForm();

That is for javascript.
You have two opening form tags now, that is invalid. The second one has no closing >
None of your inputs have labels or name attributes.
Labels are required for accessibility. Names are required for the data to be gathered processed.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.