I have Apache and mySQL running, there doesn't appear to be any errors as I've checked all the logs; my aim here is to send an email to a specific address whenever there is a new form entry
Im inexperienced with backend and PHP so I'm not too sure where im going wrong, any help would be appreciated
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
$email = $_POST['email'];
$checkbox = implode(', ', $_POST['checkbox']);
$message = $_POST['message'];
// Send email with form data
$to = 'busanta29@gmail.com';
$subject = 'New Contact Form Submission';
$body = "Name: $firstName $lastName\nEmail: $email\nCheckbox: $checkbox\nMessage: $message";
$headers = "From: $email";
if (mail($to, $subject, $body, $headers)) {
echo 'Message sent successfully';
} else {
echo 'Error sending message';
}
}
?>
I saved this file in my htdocs folder of my XAMPP installation folder as suggested
I inputted the php file into my react project as such:
axios.post('http://localhost/mihcontactform.php', formData)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
I am trying to test this (I created a dummy php file with echo Hello World and it showed up so there isnt any config issues) but a white blank page just shows up when I try to access localhost/mihcontactform.php
For reference, this is what im getting the data from, a form I created in javascript:
import { useState } from 'react';
import axios from 'axios';
function ContactForm() {
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
email: '',
checkbox: [],
message: ''
});
const handleFormSubmit = (e) => {
e.preventDefault();
const form = e.target;
const formData = new FormData(form);
axios.post('http://localhost/mihcontactform.php', formData)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
}
const handleInputChange = (e) => {
if (e.target.type === 'checkbox') {
let checkboxValues = formData.checkbox.slice();
if (e.target.checked) {
checkboxValues.push(e.target.value);
} else {
checkboxValues.splice(checkboxValues.indexOf(e.target.value), 1);
}
setFormData({
...formData,
checkbox: checkboxValues,
});
} else {
setFormData({
...formData,
[e.target.name]: e.target.value,
});
}
};
return (
<form onSubmit={handleFormSubmit} method='POST' action='mihcontactform.php'>
<label>
First Name:
<input type='text' name='firstName' value={formData.firstName} onChange={handleInputChange} required/>
</label>
<label>
Last Name:
<input type='text' name='lastName' value={formData.lastName} onChange={handleInputChange} required/>
</label>
<label>
Email:
<input type='email' name='email' value={formData.email} onChange={handleInputChange} required/>
</label>
<label>
What services are you contacting us about?
<input type='checkbox' name='checkbox[]' value='A' onChange={handleInputChange} required/> A
<input type='checkbox' name='checkbox[]' value='B' onChange={handleInputChange} required/> B
<input type='checkbox' name='checkbox[]' value='C' onChange={handleInputChange} required/> C
<input type='checkbox' name='checkbox[]' value='D' onChange={handleInputChange} required/> D
</label>
<label>
Message:
<textarea name='message' value={formData.message} onChange={handleInputChange} required></textarea>
</label>
<button type='submit'>Submit</button>
</form>
);
}
These are the errors I get when I use $_GET instead of $_POST
