php code not running just displaying in Chrome

Question

So I am trying to set up my own Website. I am using sublime text to write the HTML code. I am having trouble with the contact form. When I click submit on my contact form Chrome just opens another tag showing the php code. How do I manage to get contact form to actually send me an email from the website?

I activated apache on my mac and localhost is working( I typed it into the browser and get to the "It Works!" page.

Could the problem be that I am accessing the files via local file access and not using a URL?

THis is the php code:

<?php
if(isset( $_POST['name']))
$name = $_POST['name'];
if(isset( $_POST['email']))
$email = $_POST['email'];
if(isset( $_POST['message']))
$message = $_POST['message'];
if(isset( $_POST['subject']))
$subject = $_POST['subject'];

$content="From: $name \n Email: $email \n Message: $message";
$recipient = "myemail.com";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $content, $mailheader) or 
die("Error!");
echo "Email sent!";
?>

THis is the HTML contact form:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
        <link href="styles.css" rel="stylesheet">
        <title>Contact</title>
    </head>
    <body><!--Section: Contact v.2-->
<section class="mb-4">

    <!--Section heading-->
    <h2 class="h1-responsive font-weight-bold text-center my-4">Contact us</h2>
    <!--Section description-->
    <p class="text-center w-responsive mx-auto mb-5">Do you have any questions? Please do not hesitate to contact us directly. Our team will come back to you within
        a matter of hours to help you.</p>

    <div class="row">

        <!--Grid column-->
        <div class="col-md-9 mb-md-0 mb-5">
            <form id="contact-form" name="contact-form" action="mail.php" method="POST">

                <!--Grid row-->
                <div class="row">

                    <!--Grid column-->
                    <div class="col-md-6">
                        <div class="md-form mb-0">
                            <input type="text" id="name" name="name" class="form-control">
                            <label for="name" class="">Your name</label>
                        </div>
                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-md-6">
                        <div class="md-form mb-0">
                            <input type="text" id="email" name="email" class="form-control">
                            <label for="email" class="">Your email</label>
                        </div>
                    </div>
                    <!--Grid column-->

                </div>
                <!--Grid row-->

                <!--Grid row-->
                <div class="row">
                    <div class="col-md-12">
                        <div class="md-form mb-0">
                            <input type="text" id="subject" name="subject" class="form-control">
                            <label for="subject" class="">Subject</label>
                        </div>
                    </div>
                </div>
                <!--Grid row-->

                <!--Grid row-->
                <div class="row">

                    <!--Grid column-->
                    <div class="col-md-12">

                        <div class="md-form">
                            <textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea"></textarea>
                            <label for="message">Your message</label>
                        </div>

                    </div>
                </div>
                <!--Grid row-->

            </form>

            <div class="text-center text-md-left">
                <a class="btn btn-primary" onclick="document.getElementById('contact-form').submit();">Send</a>
            </div>
            <div class="status"></div>
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-md-3 text-center">
            <ul class="list-unstyled mb-0">
                <li><i class="fas fa-map-marker-alt fa-2x"></i>
                    <p>San Francisco, CA 94126, USA</p>
                </li>

                <li><i class="fas fa-phone mt-4 fa-2x"></i>
                    <p>+ 01 234 567 89</p>
                </li>

                <li><i class="fas fa-envelope mt-4 fa-2x"></i>
                    <p>contact@mdbootstrap.com</p>
                </li>
            </ul>
        </div>
        <!--Grid column-->

    </div>

</section>
<!--Section: Contact v.2--></body>

I expect the website to send me an email with the info from the contact form

You need to access the `.php` files via the server using a browser. Like `http://localhost/test.php` — Adder, Mar 26 '19 at 16:21
you need a server to run your php code, if you want to do locally you need something like mamp or xampp — Sfili_81, Mar 26 '19 at 16:21

score 2 · Answer 1 · answered Mar 26 '19 at 16:22

2

Could the problem be that I am accessing the files via local file access and not using a URL?

Yes, when you open the html file directly in the browser chrome will load the php file directly as text and just show the PHP code. You will have to put your HTML and PHP files inside Apache's www directory and access your page through http://localhost, only then will the call be handled by the Apache web server.

answered Mar 26 '19 at 16:22

Mathias Dam

107
1
4

So I put my php and Html files into the Library/Webserver/Documents directory, then I accessed them on my browser via http://localhost . The html pages load fine but when I click on the Submit button on the contact form I still just see the php code.... – Fabian Omobono Mar 27 '19 at 16:47

php code not running just displaying in Chrome

1 Answers1