How to make my form send the submitted info to my email

Question

I have been trying to figure out how to get my contact form in my website to send to my email when someone submits.

I am using Google Clouds Instance and hosting on google domains. I tried to go with a process_form.php but it doesn't work even when I installed php already using the SSH in the instance.

I went with a simpler one but it doesn't work as well. It doesn't seem to be the same as previously I tried years ago to do and submit this Contact Us form.

Heres my HTML code for contact us form:

   <div class="container py-5">
        <div class="row">
            <div class="col-lg-6">
                <h2 class="text-dark">Get in Touch</h2>
                <p class="text-dark">For inquiries, bookings, or any questions, feel free to contact us:</p>
                <ul class="list-unstyled text-dark">
                    <li><strong>Phone:</strong> +1 (123) 456-7890</li>
                    <li><strong>Email:</strong> [email protected]</li>
                </ul>
                <p class="text-dark">Connect with us on social media:</p>
                <div class="d-flex justify-content-start">
                    <a href="#" class="text-dark me-3"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="text-dark me-3"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="text-dark me-3"><i class="fab fa-instagram"></i></a>
                    <a href="#" class="text-dark me-3"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>

            <!-- Right Section - Contact Form -->
            <div class="col-lg-6">  
                 <form action="mailto:[email protected]" method="post" enctype="text/plain">
                    <div class="mb-3">
                        <label for="name" class="form-label">Name</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="contact" class="form-label">Contact Number</label>
                        <input type="text" class="form-control" id="contact" name="contact" required>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Email address</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="date" class="form-label">Preferred Date</label>
                        <input type="date" class="form-control" id="date" name="date" required>
                    </div>
                    <div class="mb-3">
                        <label for="destination" class="form-label">Fishing Destination</label>
                        <select class="form-select" id="destination" name="destination" required>
                            <option value="">Select Destination</option>
                            <option value="Destination 1">Destination 1</option>
                            <option value="Destination 2">Destination 2</option>
                            <option value="Destination 3">Destination 3</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="anglers" class="form-label">Number of Anglers</label>
                        <select class="form-select" id="anglers" name="anglers" required>
                            <option value="">Select Number of Anglers</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="rent" class="form-label">Need to rent fishing rods?</label>
                        <select class="form-select" id="rent" name="rent" required>
                            <option value="">Select</option>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="rodsets" class="form-label">Number of Rod Sets</label>
                        <input type="number" class="form-control" id="rodsets" name="rodsets" min="0">
                    </div>
                    <button type="submit" class="btn btn-dark">Submit</button>
                </form>
            </div>
        </div>
    </div

How do I really get this working? I spent 4 hours on this already but to no avail. Please help.

I tried with process_form.php:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Get the form fields and remove whitespace
    $name = trim($_POST["name"]);
    $contact = trim($_POST["contact"]);
    $email = trim($_POST["email"]);
    $date = trim($_POST["date"]);
    $destination = trim($_POST["destination"]);
    $anglers = trim($_POST["anglers"]);
    $rent = trim($_POST["rent"]);
    $rodsets = trim($_POST["rodsets"]);

    // Set the recipient email address
    $to = "[email protected]";

    // Set the email subject
    $subject = "New Contact Form Submission";

    // Build the email content
    $email_content = "Name: $name\n";
    $email_content .= "Contact Number: $contact\n";
    $email_content .= "Email: $email\n";
    $email_content .= "Preferred Date: $date\n";
    $email_content .= "Fishing Destination: $destination\n";
    $email_content .= "Number of Anglers: $anglers\n";
    $email_content .= "Need to rent fishing rods: $rent\n";
    $email_content .= "Number of Rod Sets: $rodsets\n";

    // Build the email headers
    $email_headers = "From: $name <$email>";

    // Send the email
    if (mail($to, $subject, $email_content, $email_headers)) {
        // Redirect to the thank you page if the email is sent successfully
        header("Location: index.html");
    } else {
        // Set a 500 internal server error response if the email failed to send
        http_response_code(500);
        echo "Oops! Something went wrong and we couldn't send your message.";
    }
} else {
    // Set a 403 forbidden response if the form submission method is not POST
    http_response_code(403);
    echo "There was a problem with your submission, please try again.";
}
?>

This doesn't work too. My main contact us form was previously linked to process_form.php. It was successfully actually and went to index.html.

I don't know what to do anymore. This is the last hurdle. I should have went with web hosting companies that might be easier to use. It was so difficult to use SSH on Google clouds and I had a hard time at first, figuring out how to upload my index.html etc etc, using google maps api etc etc. Now this is just my last hurdle and I hope someone can help me.

Answer 1

A few things to fix :

(A) You need to change the form tag of your HTML form from

<form action="mailto:[email protected]" method="post" enctype="text/plain">

to

<form action="process_form.php" method="post">

(B) and change this line in PHP from

 $email_headers = "From: $name <$email>";

to

    $encoding = "utf-8";
    $email_headers = "Content-type: text/plain; charset=".$encoding." \r\n";
    $email_headers .= "From: ".$name." <".$email."> \r\n";
    $email_headers .= "MIME-Version: 1.0 \r\n";
    $email_headers .= "Content-Transfer-Encoding: 8bit \r\n";

(C) As commented, please consider changing the "from email" (in the $email_headers) to an email address of which the PHP web server will be regarded as a valid outgoing mail sender (e.g. with proper SPF record and/or DKIM signed), otherwise it may be regarded as spam by recipient email servers

Last but not least,

1. You may have noticed that I have used Content-type: text/plain; in the headers (because you are using \n as new line), but usually we will use Content-type: text/html because in that case you can use the HTML syntax to compose a better email contents (in that case you need to change all \n to <br> in your email contents)
2. instead of mail() function in PHP, you may choose to use PHPMailer which is a rather robust mail sending library to do the job