Not getting contact form to work using template

Question

Please be aware that I am a total noob when it comes to making websites.

I am making a website using a template that I found online: https://www.styleshout.com/new-website-template-kards/

I am hosting the website through github. Everything is working well, except for making the contact form work. I have been searching for hours without progress.

There is very little information to find in the template folder how to make the contact form work, and I have zero experience with this. There is a 'sendEmail.php' file where I find the following:

// Replace this with your own email address 
$siteOwnersEmail = 'user@website.com';

which is extactly where I filled in my own email address. However, I am not getting it to work, and I keep on getting the "Something went wrong. Please try again." error. This error message should be coming from the Java Script 'main.js', as I tested changing the message.

I hope the blocks below are relevant and sufficient for helping me solve my problem.

Thanks.

Contact section in 'index.html'

   <!-- contact
   ================================================== -->
    <section id="contact">

        <div class="row section-intro">
        <div class="col-twelve">

            <h5>Contact</h5>
            <h1>I'd Love To Hear From You.</h1>

        </div> 
    </div> <!-- /section-intro -->

    <div class="row contact-form">

        <div class="col-twelve">

            <!-- form -->
            <form name="contactForm" id="contactForm" method="post" action="">
                <fieldset>

                    <div class="form-field">
                        <input name="contactName" type="text" id="contactName" placeholder="Name" value="" minlength="2" required="">
                    </div>
                    <div class="form-field">
                        <input name="contactEmail" type="email" id="contactEmail" placeholder="Email" value="" required="">
                    </div>
                    <div class="form-field">
                        <input name="contactSubject" type="text" id="contactSubject" placeholder="Subject" value="">
                    </div>                       
                    <div class="form-field">
                        <textarea name="contactMessage" id="contactMessage" placeholder="message" rows="10" cols="50" required=""></textarea>
                    </div>                      
                    <div class="form-field">
                        <button class="submitform">Submit</button>
                        <div id="submit-loader">
                            <div class="text-loader">Sending...</div>                             
                            <div class="s-loader">
                                <div class="bounce1"></div>
                                <div class="bounce2"></div>
                                <div class="bounce3"></div>
                            </div>
                        </div>
                    </div>

                </fieldset>
            </form> <!-- Form End -->

            <!-- contact-warning -->
            <div id="message-warning">              
            </div>            
            <!-- contact-success -->
            <div id="message-success">
               <i class="fa fa-check"></i>Your message was sent, thank you!<br>
            </div>

         </div> <!-- /col-twelve -->
        
    </div> <!-- /contact-form -->
        
    </section> <!-- /contact -->

Contact form block in Java Script 'main.js' (also included as a script in 'index.html')

    /*---------------------------------------------------- */
    /*  contact form
    ------------------------------------------------------ */

    /* local validation */
    $('#contactForm').validate({

        /* submit via ajax */
        submitHandler: function(form) {

            var sLoader = $('#submit-loader');

            $.ajax({        

              type: "POST",
              url: "inc/sendEmail.php",
              data: $(form).serialize(),
              beforeSend: function() { 

                sLoader.fadeIn(); 

              },
              success: function(msg) {

                // Message was sent
                if (msg == 'OK') {
                    sLoader.fadeOut(); 
                   $('#message-warning').hide();
                   $('#contactForm').fadeOut();
                   $('#message-success').fadeIn();   
                }
                // There was an error
                else {
                    sLoader.fadeOut(); 
                   $('#message-warning').html(msg);
                    $('#message-warning').fadeIn();
                }

              },
              error: function() {

                sLoader.fadeOut(); 
                $('#message-warning').html("Something went wrong. Please try again.");
                 $('#message-warning').fadeIn();

              }

          });           
        }

    });

'sendEmail.php' file (with email placeholder)

<?php

// Replace this with your own email address
$siteOwnersEmail = 'user@website.com';


if($_POST) {

   $name = trim(stripslashes($_POST['contactName']));
   $email = trim(stripslashes($_POST['contactEmail']));
   $subject = trim(stripslashes($_POST['contactSubject']));
   $contact_message = trim(stripslashes($_POST['contactMessage']));

   // Check Name
    if (strlen($name) < 2) {
        $error['name'] = "Please enter your name.";
    }
    // Check Email
    if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
        $error['email'] = "Please enter a valid email address.";
    }
    // Check Message
    if (strlen($contact_message) < 15) {
        $error['message'] = "Please enter your message. It should have at least 15 characters.";
    }
   // Subject
    if ($subject == '') { $subject = "Contact Form Submission"; }


   // Set Message
   $message .= "Email from: " . $name . "<br />";
    $message .= "Email address: " . $email . "<br />";
   $message .= "Message: <br />";
   $message .= $contact_message;
   $message .= "<br /> ----- <br /> This email was sent from your site's contact form. <br />";

   // Set From: header
   $from =  $name . " <" . $email . ">";

   // Email Headers
    $headers = "From: " . $from . "\r\n";
    $headers .= "Reply-To: ". $email . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";


   if (!$error) {

      ini_set("sendmail_from", $siteOwnersEmail); // for windows server
      $mail = mail($siteOwnersEmail, $subject, $message, $headers);

        if ($mail) { echo "OK"; }
      else { echo "Something went wrong. Please try again."; }
        
    } # end if - no validation error

    else {

        $response = (isset($error['name'])) ? $error['name'] . "<br /> \n" : null;
        $response .= (isset($error['email'])) ? $error['email'] . "<br /> \n" : null;
        $response .= (isset($error['message'])) ? $error['message'] . "<br />" : null;
        
        echo $response;

    } # end if - there was a validation error

}

?>

Answer 1

As mentioned in the comments, you're trying to do something that isn't possible with the technologies you're using.

But let's be real here...

When you're just starting out, it's kinda confusing as to how in the world a form is submitted, where that data goes, how it happens, etc.

So here's a few pointers to get you in the right direction, but first lets start with a basic explanation as I think it's important here.

Javascript like this has virtually 2 purposes only.

• Change the look of the page by using a programming language that can modify an update the HTML on the page (like adding a css class to an element or adding new elements to the page based on a user's activity)

• Have a language on the page that can send a request over the internet from the user's browser to some other computer (a general purpose http request).

I don't wanna go tooooooo far into the second one since it's a bit out of scope, but here's the super basics:

Javascript makes a call (fetch api or similar) to a server. This just means that the Javascript is picking up the phone, dialing a number (in this case an IP address [or a domain name ex: google.com, which is just an IP address in the end]). The server is what it dials on the phone- it's just like calling a friend on the phone- which takes the data javascript sent and does stuff with it.

Usually this stuff is writing to a database, sending an email, etc. That being said, this requires having a server dedicated to this. When you connect to a webpage, you're just sending a request the exact same way to another server (the browser picks up the phone and dials a server for you based on what you typed in the url), but this server is simply sending you back all the html and css from its own database or whatever type of storage.

So with all this said, how does this answer the question? Well, where you're hosting, being github, is kinda like telling the server to answer a phone that doesn't exist. It doesn't support anything but the plain old static pages, not a server language like php, nodejs, ruby, etc.