Editing files

If you don't know anything about HTML and web pages, before doing anything with this template I recommend you to take at least some basic tutorial or hire somebody experienced to do this.

As for tutorials I recommend w3schools.com

Editing php and JavaScript files is really advanced stuff, only experienced person should edit them. If you're not sure, do not change anything, it might cause serious damage to the scripts. Hiring somebody, who knows what to do, is better solution.

If you are not familiar with these technologies, do not play around with these files.

If you like this template, please remember to rate it on Themeforest - it really helps us to know what people think of our templates. To rate this item, go to your Downloads page on Themeforest, then next to this template click on a star rating you'd like to give us.

Show content

Inspect element - when editing html and css files utilities like firebug (free firefox plugin) are great helpers. With them you can easily find element style, even the stylesheet name and line number where the inspected style rule is.

Edit html/css/js/php files - use your favorite text editor. Editor, that highlights syntax is good choice, Pspad(free) or Notepad++(free) might be enough.

View pages - any common browser like Mozilla Firefox(free)...

Upload on server - look for some FTP program - filezilla(free)...

License

All items in this template package are mine or properly licensed as themeforest requires. For items that, are not mine, I try to keep license information close to them. So if you want to see the license, look into the items folder or perhaps it can be found on first lines of these files. Sometimes author release item under some license, but the license file is not available, then you could try to find the license on web site (if this item has url specified) or contact the author.

This html built with bootstrap

Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

If you have any questions with this plugin please visit the author's website.

          
                
                


  
.col-md-8
  
.col-md-4


  
.col-md-4
  
.col-md-4
  
.col-md-4


  
.col-md-6
  
.col-md-6

                
                

File structure

The detailed structure of html files and folders

Contact form

In this lesson we will tell you about how you can create the contact form. Unfortunately HTML cannot send messages and all actions you have to make on the web server.

Below is given the example of HTML code of contact form.

It is important to set identical NAME and ID of each field not to get confused in further control of your contact form. Placeholder for temporary filling of form with the text. You can write for it any text.

          
          
          



 
Send us a message
 
 


 
 
 
 
 
 
 send message

 

You will find the mail folder in each our HTML template. This folder has all necessary files for the contact form.

jqBootstrapValidation.js - A JQuery validation plugin for bootstrap forms.

contact_me.js – makes data checking and data receiving and also connects contact_me.php file for sending of message. If you created the contact form so you have to change or create fields which are martked in bold. It must be done in two places.

          
            
$(function() {
 $("input,textarea").jqBootstrapValidation({
 preventSubmit: true,
 submitError: function($form, event, errors) {
 // additional error messages or events
 },
 submitSuccess: function($form, event) {
 event.preventDefault(); // prevent default submit behaviour
 // get values from FORM
 var name = $("input#user-name").val();
 var lastname = $("input#user-lastname").val();
 var email = $("input#user-email").val();
 var phone = $("input#user-phone").val();
 var subject = $("input#user-subject").val();
 var message = $("textarea#user-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: "././mail/contact_me.php",
 type: "POST",
 dataType: 'json',
 data: {
 name: name,
 lastname: lastname,
 email: email,
 phone: phone,
 subject: subject,
 message: message
 },
 cache: false,
 success: function(data) {
 if(data.error){
 // Fail message
 $('#success').html("
");
 $('#success > .alert-danger').html("×").append("");
 $('#success > .alert-danger').append("Sorry " + firstName + ", Something is not right. Please try again.");
 $('#success > .alert-danger').append('
');
 //clear all fields
 $('#contactForm').trigger("reset");
 }
 else if(data.success){
 // Success message
 $('#success').html("
");
 $('#success > .alert-success').html("×").append("");
 $('#success > .alert-success').append("Your message has been sent. ");
 $('#success > .alert-success').append('
');
 //clear all fields
 $('#contactForm').trigger("reset");
 }
 }
 })
 },
 filter: function() {
 return $(this).is(":visible");
 },
 });
});




/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
 $('#success').html('');
});

          
          
          
'true'));
 return false;
}

$name = $_POST['name'];
$email_address = $_POST['email'];
$message = $_POST['message'];

$lastname = $_POST['lastname'];
$phone = $_POST['phone'];
$subject = ($_POST['subject'] ? $_POST['subject'] : "Website Contact Form: $name");



// Create the email and send the message
$to = 'yourname@yourdomain'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to.
$email_subject = $subject;
$email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nLast Name: $lastname\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message";
$headers = "From: noreply@yourdomain.com\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com.
$headers .= "Reply-To: $email_address"; 
mail($to,$email_subject,$email_body,$headers);
echo json_encode(array('success'=>'true'));
return true; 
?>