GENIUX

Contact Form

Contact form is very useful to enable your website to receive email to your email account.

Geniux is provided of six contact form layouts, see the demos in Geniux Blocks page (Geniux/blocks/index.html)

This is the Geniux CENTER contact form layout.

Image

Code Example:

<!-- Start Contact Form -->
<section id="contact-us">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 p-b-20 text-center">
        <h2>Contact Us</h2>
        <hr class="hr-small hr-color">
        <h4 class="m-t-40 m-b-30">Get In Touch</h4>
          <!-- Start Contact Form -->
          <form id="contactForm" class="contact-form text-center m-b-0" data-toggle="validator">
            <div class="form-group">
              <div class="controls">
                <input type="text" id="name" class="form-control" placeholder="Name" required data-error="Please enter your name">
                <div class="help-block with-errors"></div>
              </div>
            </div>
            <div class="form-group">
              <div class="controls">
                <input type="email" class="email form-control" id="email" placeholder="Email" required data-error="Please enter your email">
                <div class="help-block with-errors"></div>
              </div>
            </div>
            <div class="form-group">
              <div class="controls">
                <input type="text" id="msg_subject" class="form-control" placeholder="Subject" required data-error="Please enter your message subject">
                <div class="help-block with-errors"></div>
              </div>
            </div>
            <div class="form-group">
              <div class="controls">
                <textarea id="message" rows="5" placeholder="Message" class="form-control" required data-error="Write your message"></textarea>
                <div class="help-block with-errors"></div>
              </div>
            </div>
            <button type="submit" id="submit" class="gnx-btn gnx-btn-default">Send Message</button>
            <div id="msgSubmit" class="hidden"></div>
            <div class="clearfix"></div>
          </form>
          <!-- End Contact Form -->
      </div>
    </div><!-- /.row -->
  </div><!-- /.container -->
</section>
<!-- End Contact Form -->

eMail Setup

1. Find the file form-process.php, go to (Geniux/assets/contact-form/form-process.php) and open it with your code editor;

<?php

  $errorMSG = "";

  // NAME
  if (empty($_POST["name"])) {
      $errorMSG = "Name is required ";
  } else {
      $name = $_POST["name"];
  }

  // EMAIL
  if (empty($_POST["email"])) {
      $errorMSG .= "Email is required ";
  } else {
      $email = $_POST["email"];
  }

  // MSG SUBJECT
  if (empty($_POST["msg_subject"])) {
      $errorMSG .= "Subject is required ";
  } else {
      $msg_subject = $_POST["msg_subject"];
  }


  // MESSAGE
  if (empty($_POST["message"])) {
      $errorMSG .= "Message is required ";
  } else {
      $message = $_POST["message"];
  }

  // CHANGE HERE YOUR EMAIL DETAILS
  $EmailTo = "your.email@mail.com";
  $Subject = "Geniux - Contact Form";

  // prepare email body text
  $Body = "";
  $Body .= "Name: ";
  $Body .= $name;
  $Body .= "\n";
  $Body .= "Email: ";
  $Body .= $email;
  $Body .= "\n";
  $Body .= "Subject: ";
  $Body .= $msg_subject;
  $Body .= "\n";
  $Body .= "Message: ";
  $Body .= $message;
  $Body .= "\n";

  // send email
  $success = mail($EmailTo, $Subject, $Body, "From:".$email);

  // redirect to success page
  if ($success && $errorMSG == ""){
     echo "success";
  }else{
      if($errorMSG == ""){
          echo "Something went wrong :(";
      } else {
          echo $errorMSG;
      }
  }

  ?>

2. At line 35 of form-process.php, enter your email and subject between the " " quotation marks.

34. //CHANGE HERE YOUR EMAIL DETAILS
35. $EmailTo = "your.email@mail.com";
36. $Subject = "Geniux - Contact Form";

Now your contact form is enabled to receive emails to your email account.

If you will not receive emails, we suggest to check the spam folder in your email account.

NOTE: the contact form works only on live server, not works on localhost.

Contact Form Validation

To validate our form Geniux use the bootstrap-validator plugin, a user-friendly HTML5 form validation jQuery plugin for Bootstrap 3.

More info at: https://github.com/1000hz/bootstrap-validator