Save the Date – HTML5 Event Landing Page

Save the Date Documentation

Introduction

The Save the Date – HTML5 Event Landing Page theme is a responsive HTML theme based on Bootstrap. The theme of template is for creating landing pages and “Save the Date” pages for events or other needs.

The theme provide 5 color schemas (blue, red, orange, green, pink), but it’s very easy to customize logo, colors and texts.

The Home page come in two different solutions:

  • Contact form (uses PHP for sending mail)
  • Eventbrite embedded form (for events that require ticketing system, take a look to https://www.eventbrite.com)

The package contains:

  • Static home page (HTML)
  • Contact Form Mail (uses PHP)
  • Eventbrite embed block
  • Static “Privacy/Generic Content” page
  • 5 color schemas
  • Twitter widget on footer

Libraries:

Credits

All images used in the demo ARE NOT distributed with the theme.

Fonts used are Source+Sans+Pro and Oswald, provided by Google Fonts.

Documentation

Detailed documentation for easy customization.
It contain a PDF file with step by step instructions for modifying everything and creating your own theme.

Back To Top

HTML Files

Choose the template

The structure is based on a flexible grid that lets you change HTML pages quickly and logically with a nestable system.

First of all, you need to choose what kind of template you need:

  • index.html : is the standard template with an AJAX Contact form (this requires PHP and sendmail on your server);
  • index_eventbrite.html :  this is the Eventbrite solution, here you only need to create an account on Eventbrite, publish a new event and embed the right code.

Color schemas

Open the HTML file (index.html or index_eventbrite.html), and change the stylesheet accordingly to the choosen color schema:

<link rel="stylesheet" href="css/colorschema-blue.css" />

The possible color schema options are the followings:

  • css/colorschema-blue.css
  • css/colorschema-green.css
  • css/colorschema-orange.css
  • css/colorschema-pink.css
  • css/colorschema-red.css

Fonts

The font-family of whole page is Source Sans Pro by Google web fonts, except headings, that we used Oswald again from Google Web fonts and if you like to change it with a usual web safe font (arial, verdana etc.) you must remove from <head> section of any html file the lines:

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noticia+Text:400,700' rel='stylesheet' type='text/css'>

and also change the font-family class to lines 7, 31 and 164 of file /css/screen.css from font-family: ‘Source Sans Pro’, sans-serif; or font-family: ‘Oswald’, sans-serif; to font-family: Arial; (for example)

Back To Top

CSS Files

We’re using the following CSS files in this theme:

  • /css/screen.css -> main css for this template layout with some extra media queries
  • /css/bootstrap.min.css -> the main bootstrap css file for grid and responsive layout.
  • /css/colorschema-*.css -> styles for customize the color schema as your needs

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file (mainly the colorschema-*.css and screen.css), and then scroll down until you find the appropriate style that needs to be edited.

Custom color schema

If you would like to customize the color schema to feet your needs, you would do the following:

  1. Open the HTML file (index.html or index_eventbrite.html), and change the stylesheet to css/colorschema-custom.css
  2. Open the file /css/colorschema-custom.css, so that is extremely easy to change any css attributes. Simply find the related and commented heading in this css file and make your magic.

The following schema may help you to find the right sections of the CSS:

save-the-date-custom-color-schema-parts

Back To Top

JavaScript Files

This theme uses jQuery framework with only one custom script.

  • /javascripts/contact-script.js -> javascript functions for contact form like validation, ajax functionalities on contact section, this file is used only on Contact form (index.html) version.

NOTE: the Eventbrite version, does not use ANY javascripts.

Back To Top

Contact form configuration (index.html)

The Contact Form version, requires PHP (5.x+) and sendmail configured on the web server.

The sendmail.php uses PHPMailer (5.2) library, you can find the license on /phpMailer/LICENSE.

Customize contact form parameters

Open the sendmail.php file and take a look of the very first section that begin with “//FORM CONFIGURATION” and ends with “//DO NOT MODIFY AFTER THIS LINE OF CODE”.

Please do not modify any line of code after “//DO NOT MODIFY AFTER THIS LINE OF CODE”, or do it at your own risk.

Customize the following parameters accordingly to your needs:

<?php
//FORM CONFIGURATION

//Email SECTION//

// Recipient Email (your email)
$site_owner_email    = "info@yourdomain.com";
// Recipient Name  (your name)        
$site_owner_name     = "Cloud Business Summit Form";
// Subject of the contact form mail
$email_subject        = "Cloud Business Summit Contact Form"; 

//Error messages SECTION//

//Error message: name empty
$error_name            = "Insert your name";
//Error message: email address empty or invalid
$error_email        = "Insert a valid email address";
//Error message: message text is empty
$error_comments        = "Insert a message text";

//Success message SECTION//

//Success message: this message is displayed after form is successful sent
$success_message    = "Thank you!<br />Your message is sent.";

//DO NOT MODIFY AFTER THIS LINE OF CODE
?>

There are three sections:

  • Email SECTION: customize with your email or the email that need to receive contacts
  • Error messages SECTION: customize error messages that is displayed to user if something is wrong during form sending
  • Success message SECTION: customize the success message that is displayed after the email is sent

Back To Top

Eventbrite configuration (index_eventbrite.html)

First of all you need to create your event on Eventbrite.

  1. Please login on Eventbrite, and click on Your Profile > My Events
  2. Look at the address bar and copy the Event ID, like:

    save-the-date-find-eventbrite-event-id

  3. Open the HTML file index_eventbrite.html, find the eventbrite section (row 59), and simply replace the Event ID value, like:

    save-the-date-replace-eventbrite-event-id

After doing that, your eventbrite widget is configured.

NOTE: If you want to full replace the eventbrite code, please look on Eventbrite dashboard Event detail page > INVITE AND PROMOTE > Widgets > Ticket Form, and replace all the <div style=”width:100%; text-align:left;”> </div> content with the code taken from “Copy and paste this code for use on a webpage”

Back To Top

Twitter widget configuration

On the footer we also added a Twitter widget related to an #hashtag. This widget is useful for publishing updates related to a specific hashtag that you can promote about your event.

First of all you need to go to your Twitter account and create a new Widget:

  1. Login to your Twitter account
  2. Go to Settings > Widgets menu
  3. Than press to “Create new” and create a new Twitter Widget (customize the Height to 300px in order to fit the footer height), like:save-the-date-twitter-create-widget
  4. Then, open the index_eventbrite.html file, find the twitter code section, than replace it, like:save-the-date-twitter-configuration

Back To Top