0

I've been trying for the longest time to get the email form to work and be able to send an email copy to my personal email from my website. When I hit the submit button, the console communicates with the PHP code but nothing happens. I tried to change the line <form class="form-contact contact_form" action="mailto:my@email.com" method="post" id="contactForm" novalidate="novalidate">

to

<form class="form-contact contact_form" action="code.php">

but that just invoked the code.php page and still does nothing. I really want to fix this by myself so I would appreciate if you can give me a hint on how to fix it.

HTML code

<!-- Form begins -->
          <form class="form-contact contact_form" action="code.php" method="post" id="contactForm" novalidate="novalidate">
            <div class="row">
              <div class="col-12">
                <div class="form-group">

                    <textarea class="form-control w-100" name="message" id="message" cols="30" rows="9" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Message'" placeholder = 'Enter Message'></textarea>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <input class="form-control" name="name" id="name" type="text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter your name'" placeholder = 'Enter your name'>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <input class="form-control" name="email" id="email" type="email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter email address'" placeholder = 'Enter email address'>
                </div>
              </div>
              <div class="col-12">
                <div class="form-group">
                  <input class="form-control" name="subject" id="subject" type="text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Subject'" placeholder = 'Enter Subject'>
                </div>
              </div>
            </div>
            <div class="form-group mt-3">
              <button type="submit" class="button button-contactForm btn_4 boxed-btn">Send Message</button>
            </div>
          </form>
          <!-- Form Ends -->

JS Code

    // -------   Mail Send ajax

     $(document).ready(function() {
        var form = $('#contactForm'); // contact form
        var submit = $('.submit-btn'); // submit button
        var alert = $('.alert-msg'); // alert div for show alert message

        // form submit event
        form.on('submit', function(e) {
            e.preventDefault(); // prevent default form submit

            $.ajax({
                url: 'code.php', // form action url
                type: 'POST', // form submit method get/post
                dataType: 'html', // request type html/json/xml
                data: form.serialize(), // serialize form data
                beforeSend: function() {
                    alert.fadeOut();
                    submit.html('Sending....'); // change submit button text
                },
                success: function(data) {
                    alert.html(data).fadeIn(); // fade in response data
                    form.trigger('reset'); // reset form
                    submit.attr("style", "display: none !important");; // reset submit button text
                },
                error: function(e) {
                    console.log(e)
                }
            });
        });
    });

code.php file

<?php

    $to = "my@email.com";
    $from = $_REQUEST['email'];
    $name = $_REQUEST['name'];
    $subject = $_REQUEST['subject'];
    $number = $_REQUEST['number'];
    $cmessage = $_REQUEST['message'];

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

    $subject = "You have a message from your Bitmap Photography.";

    $logo = 'img/logo.png';
    $link = '#';

    $body = "<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><title>Express Mail</title></head><body>";
    $body .= "<table style='width: 100%;'>";
    $body .= "<thead style='text-align: center;'><tr><td style='border:none;' colspan='2'>";
    $body .= "<a href='{$link}'><img src='{$logo}' alt=''></a><br><br>";
    $body .= "</td></tr></thead><tbody><tr>";
    $body .= "<td style='border:none;'><strong>Name:</strong> {$name}</td>";
    $body .= "<td style='border:none;'><strong>Email:</strong> {$from}</td>";
    $body .= "</tr>";
    $body .= "<tr><td style='border:none;'><strong>Subject:</strong> {$csubject}</td></tr>";
    $body .= "<tr><td></td></tr>";
    $body .= "<tr><td colspan='2' style='border:none;'>{$cmessage}</td></tr>";
    $body .= "</tbody></table>";
    $body .= "</body></html>";

    $send = mail($to, $subject, $body, $headers);

?>
  • Also, I'm not sure if this affects it but I'm hosting the website on a local PHP server. – hazem naceur Jan 23 '20 at 22:46
  • The form's action should be the php file, not an email address link. – Funk Forty Niner Jan 23 '20 at 22:47
  • `var form = $('#myForm');` doesn't select anything (because your form's id is `contactForm` not `myForm`) so the AJAX part will never work. If you'd debugged your code using your Developer Tools (specifically the Network tools) you might have noticed that the AJAX call was not executing. You _could_ do without the AJAX though and just point your form's "action" at "mail.php". Depends if you care whether the page refreshes or not, though. – ADyson Jan 23 '20 at 22:48
  • 1
    The header is also broken. The 2nd one is missing concatenation. – Funk Forty Niner Jan 23 '20 at 22:48
  • 1
    P.S. most people tend to recommend using PHPMailer to send email, it's usually easier to get it right than using the raw mail() function. Also if this is a local server, then unless you have set it up specifically, it's quite likely not to be configured as a mailserver. Using an SMTP-compatible library such as PHPMailer allows you to specify a different mailserver to use to send the emails. – ADyson Jan 23 '20 at 22:51
  • @ADyson I fixed the changes to the form action installed sendmail but it doesn't seem to fix it. I the page just requests code.php and nothing happens – hazem naceur Jan 23 '20 at 23:08
  • Did you read what I said about the Javascript? – ADyson Jan 23 '20 at 23:11
  • "Nothing happens" is more a symptom of not printing out any result/message. – mario Jan 23 '20 at 23:14
  • @ADyson yes I changed `mail.php` to `code.php` which is the name of the PHP file, and I tried debugging using the console and the page just accesses code.php and that's it. – hazem naceur Jan 23 '20 at 23:15
  • @ADyson I edited the original code to include all the changes I made. – hazem naceur Jan 23 '20 at 23:19

0 Answers0