MP - Minimal Responsive Portfolio Template

A simple HTML5 / CSS3 portfolio template

A simple HTML5 / CSS3 portfolio template

Files included

Besides the PSD logo file, in the package you will find the actual HTML files of your templates : 

- index.html (the main page)

- about.html (the About page)

- contact.html (the Contact page)

- portfolio.html (the Portfolio page)

- project.html (individual portfolio project page)

- shortcodes.html (some shortcodes you can use)

- thankyou.html (the Thank you page after a contact form is successfully submitted)

- error.html (the Error page after a contact form is successfully submitted)

Contact form

The template includes a working contact form. You need to make some adjustments in order to make it work. Don't worry if you are not familiar with PHP. The edits you need to make are minor and refer to inserting your email address you would want your messages to arrive.

The contact page works like this : the form collects the information the user inputs and when the "Send message" button is pressed the info in transmitted to a PHP contact scipt (contact.php) it gets processed and the actual mail is sent to your email address.

The PHP contact script works out-of-the-box. You just need to insert your email address. The code of the contact.php file is below : 

<?
$mailto = 'youremail@provider.com' ;
$formurl = "contact.html" ;
$errorurl = "error.html" ;
$thankyouurl = "thankyou.html" ;

// -------------------- END OF CONFIGURABLE SECTION ---------------

$name = $_POST['name'] ;
$email = $_POST['email'] ;
$subject = $_POST['subject'] ;
$comments = $_POST['comments'] ;
$spam=$_POST['spam'] ;
$http_referrer = getenv( "HTTP_REFERER" );

if (!isset($_POST['email'])) {
header( "Location: $formurl" );
exit ;
}

if (empty($name) || empty($email) || empty($subject) || empty($comments) || $spam!="2014") {
   header( "Location: $errorurl" );
   exit ;
}
$name = strtok( $name, "\r\n" );
$email = strtok( $email, "\r\n" );
$subject = strtok( $subject, "\r\n" );
if (get_magic_quotes_gpc()) {
$comments = stripslashes( $comments );
}

$messageproper =

"---------- MP Contact Form Message ----------\n\n" . "\nSent by : " . $name . "\nEmail : " . $email . "\nSubject : " . $subject . "\n\n\nMessage : " . $comments;
mail($mailto, $subject, $messageproper, "From: \"$name\" <$email>\r\nReply-To: \"$name\" <$email>\r\nX-Mailer: chfeedback.php 2.04" );
header( "Location: $thankyouurl" );
exit ;
?>

On the beginning of the file there is a configuration section. These 5 lines contain the configurations needed for your form to work.

The first line : 

$mailto = 'youremail@provider.com' ;

needs to be edited. Here you will need to insert your email address. Only replace : "youremail@provider.com" with your email address. For example if your email is john.smith@gmail.com the link will be : 

$mailto = 'john.smith@gmail.com' ;

The other 3 lines refer to the locations of your contact page, thank you page and error page. If the contact.php file is located in the same folder as these 3 files : contact.html, thankyou.html, error.html, you do not need to edit anything.

Anti-spam section

One more thing you need to pay attention to is the "anti-spam" section of the contact form. We found this method (asking what year it is) to be extremly effective in stopping spam bots.

What you need to pay attention to is editing a value in your contact.php once a year. The contact.php file checks wheather the correct year value is inserted. What you need to edit? When the year changes you need to change this following line in contact.php : 

if (empty($name) || empty($email) || empty($subject) || empty($comments) || $spam!="2014") {

What you need to edit is the value "2014" with the current year. For example if the year is 2016, the link will be :

if (empty($name) || empty($email) || empty($subject) || empty($comments) || $spam!="2016") {
 

Editing Google Map

You will need to add your own address in the Contact page file. Also since the Google map is included in the thankyou.html and error.html file, you will need to edti them as well.

I will teach you how to change the default "Upper East Side, New York, NY" address with an example address in London (Trafalgar Square)

Step 1

Go to Google Maps (http://maps.google.com) and search for "Trafalgar Squre, London, United Kingdom". You will search for your own address here. This is just for the purpose of exemplification. You will get something like below : 

In the bottom right section of the page, you will see a "Settings wheel". Click on it and a menu will open. In that menu you will find "Show and embed map". These are shown in the image above by the red arrows.

Choose the "Embed map" tab in the window that opens and then "Custom size". Edit the height value to 300 and leave the width value intact. If you prefer a larger height, you can input any value you wish. After that copy the iframe code.

Now go in the contact.html file and find the Google map code :

<div class="unit-100">
<iframe src="https://www.google.com/maps/embed?pb=!1m24!1m12!1m3!1d12085.142749454873!2d-73.94987594999995!3d40.777733049999775!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m9!1i0!3e1!4m0!4m5!1s0x89c258baf771651f%3A0xf095bef3578b9b78!2sYorkville%2C+New+York%2C+NY!3m2!1d40.776223099999996!2d-73.94920789999999!5e0!3m2!1sen!2s!4v1395004518530" width="100%" height="300" frameborder="0" style="border:0"></iframe>
</div>

Replace the <iframe src=...></iframe> with the text you just copied from the Google Maps website. It will be something like this : 

<div class="unit-100">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1241.650742161186!2d-0.12717090000000375!3d51.50768469999997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604ce3941eb1f%3A0x1a5342fdf089c627!2sTrafalgar+Square!5e0!3m2!1sen!2s!4v1395611176465" width="800" height="300" frameborder="0" style="border:0"></iframe>
</div>

Again, ths is the code for "Trafalgar Square, London, UK". Your code with your address will be different.

What you need to edit now is this part of the code : 

width="800"

and replace it with 

width="100%"

This will make it responsive.

That's about it.

Other questions

If you have problems with the template you can reach me at the email address included in this documentation. I will try to answer as fast as possible.

Thank you,
Alex