PHP Email Form Issue

Discussion in 'Email' started by Victor, Mar 15, 2016.

Tags:
  1. I am having an issue with my form which is base of a boostrap file.

    I have a contact.html with a contact_me.php which in turn validates the fields with contact_me.js

    I am using bootstrap. Both of the .php and .js files are under /bin & /js folders not in the root as the contact.html.

    I get the custom error from the .js file that the mail server is not responding; which it means that the message fail.

    I tried to add the items missing found here https://support.winhost.com/kb/a826/how-to-send-email-from-a-php-application.aspx?KBSearchID=598018 within my <?php ?> (see code) but I am new to php therefore I am not sure where to add it or how. Any pointers ???

    I also tried to follow this threat http://forum.winhost.com/threads/php-email.17451/#post-34296 but at the end the user did not post how she solved the problem. :(

    Any ideas?

    Code below;

    HTML:
    ..........
    
    <!-- Contact Form -->
      <!-- In order to set the email address and subject line for the contact form go to the bin/contact_me.php file. -->
      <div class="row">
                <div class="col-md-8 col-lg-offset-3 col-lg-6" id="contact-form">
                    <h3>Let us know what type of project do you need help with</h3>
                    <form name="sentMessage" id="contactForm" novalidate>
                        <div class="control-group form-group">
                            <div class="controls">
                                <label>Full Name:</label>
                                <input type="text" class="form-control" id="name" required data-validation-required-message="Please enter your name.">
                                <p class="help-block"></p>
                            </div>
                        </div>
                        <div class="control-group form-group">
                            <div class="controls">
                                <label>Phone Number:</label>
                                <input type="tel" class="form-control" id="phone" required data-validation-required-message="Please enter your phone number.">
                            </div>
                        </div>
                        <div class="control-group form-group">
                            <div class="controls">
                                <label>Email Address:</label>
                                <input type="email" class="form-control" id="email" required data-validation-required-message="Please enter your email address.">
                            </div>
                        </div>
                        <div class="control-group form-group">
                            <div class="controls">
                                <label>Project Details:</label>
                                <textarea rows="10" cols="100" class="form-control" id="message" required data-validation-required-message="Please enter your message" maxlength="999" style="resize:none"></textarea>
                            </div>
                        </div>
                        <div id="success"></div>
                        <!-- For success/fail messages -->
                        <button type="submit" class="btn btn-primary">Send Message</button>
                    </form>
                </div>
    
            </div>
            <!-- /.row -->
    
            <hr>
    
            <!-- Footer -->
            <footer>
                <div class="row">
                    <div class="col-lg-12">
                        <p>Copyright &copy; Your Website 2014</p>
                    </div>
                </div>
            </footer>
    
        </div>
        <!-- /.container -->
    
        <!-- jQuery -->
        <script src="js/jquery.js"></script>
    
        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js"></script>
    
        <!-- Contact Form JavaScript -->
        <!-- Do not edit these files! In order to set the email address and subject line for the contact form go to the bin/contact_me.php file. -->
        <script src="js/jqBootstrapValidation.js"></script>
        <script src="js/contact_me.js"></script>
    
    </body>
    
    </html>
    PHP:

    contact_me.php

    <?php
    // check if fields passed are empty
    if(empty($_POST['name'])      ||
      empty(
    $_POST['phone'])      ||
      empty(
    $_POST['email'])      ||
      empty(
    $_POST['message'])   ||
      !
    filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
      {
       echo 
    "No arguments Provided!";
       return 
    false;
      }
       
    $name $_POST['name'];
    $phone $_POST['phone'];
    $email_address $_POST['email'];
    $message $_POST['message'];

    // Added code to work with SMTP

    require_once "Mail.php";
    $host "mail.mydomainname.com";
    $username "[email protected]";
    $from_address "[email protected]";
    $password "mypassword";
    $reply_to "[email protected]";
    $port "587";


       
    // create email body and send it   
    $to '[email protected]'// PUT YOUR EMAIL ADDRESS HERE
    $email_subject "Test: $name"// EDIT THE EMAIL SUBJECT LINE HERE
    $email_body "You have received a new message from your website's contact form.\n\n"."Here are the details:\n\nName: $name\n\nPhone: $phone\n\nEmail: $email_address\n\nMessage:\n$message";
    $headers "From: [email protected]\n";
    $headers .= "Reply-To: $email_address";   

    $smtp Mail::factory('smtp'$authe);
    $mail $smtp->send($to,$headers,$email_subject,$email_body);

    //mail($to,$email_subject,$email_body,$headers);
    return true;       
    ?>
    Code:
    
    contact_me.js
    
    /*
      Jquery Validation using jqBootstrapValidation
      example is taken from jqBootstrapValidation docs
      */
    $(function() {
    
      $("input,textarea").jqBootstrapValidation({
      preventSubmit: true,
      submitError: function($form, event, errors) {
      // something to have when submit produces an error ?
      // Not decided if I need it yet
      },
      submitSuccess: function($form, event) {
      event.preventDefault(); // prevent default submit behaviour
      // get values from FORM
      var name = $("input#name").val();
      var phone = $("input#phone").val();
      var email = $("input#email").val();
      var message = $("textarea#message").val();
      var firstName = name; // For Success/Failure Message
      // Check for white space in name for Success/Fail message
      if (firstName.indexOf(' ') >= 0) {
      firstName = name.split(' ').slice(0, -1).join(' ');
      }
      $.ajax({
      url: "./bin/contact_me.php",
      type: "POST",
      data: {
      name: name,
      phone: phone,
      email: email,
      message: message
      },
      cache: false,
      success: function() {
      // Success message
      $('#success').html("<div class='alert alert-success'>");
      $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
      .append("</button>");
      $('#success > .alert-success')
      .append("<strong>Your message has been sent. </strong>");
      $('#success > .alert-success')
      .append('</div>');
    
      //clear all fields
      $('#contactForm').trigger("reset");
      },
      error: function() {
      // Fail message                                                                              //This is where the error triggers
      $('#success').html("<div class='alert alert-danger'>");
      $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
      .append("</button>");
      $('#success > .alert-danger').append("<strong>Sorry " + firstName + " it seems that my mail server is not responding...</strong> Could you please email me directly to <a href='mailto:[email protected]?Subject=Message_Me from myprogrammingblog.com;>[email protected]</a> ? Sorry for the inconvenience!");
      $('#success > .alert-danger').append('</div>');
      //clear all fields
      $('#contactForm').trigger("reset");
      },
      })
      },
      filter: function() {
      return $(this).is(":visible");
      },
      });
    
      $("a[data-toggle=\"tab\"]").click(function(e) {
      e.preventDefault();
      $(this).tab("show");
      });
    });
    
    
    /*When clicking on Full hide fail/success boxes */
    $('#name').focus(function() {
      $('#success').html('');
    });
    
    
     

Share This Page