Save the Date – HTML5 Event Landing Page
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
All images used in the demo ARE NOT distributed with the theme.
Detailed documentation for easy customization.
It contain a PDF file with step by step instructions for modifying everything and creating your own theme.
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.
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:
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)
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:
- Open the HTML file (index.html or index_eventbrite.html), and change the stylesheet to css/colorschema-custom.css
- 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:
This theme uses jQuery framework with only one custom script.
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 = "firstname.lastname@example.org"; // 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
First of all you need to create your event on Eventbrite.
- Please login on Eventbrite, and click on Your Profile > My Events
- Look at the address bar and copy the Event ID, like:
- Open the HTML file index_eventbrite.html, find the eventbrite section (row 59), and simply replace the Event ID value, like:
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”
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:
- Login to your Twitter account
- Go to Settings > Widgets menu
- Than press to “Create new” and create a new Twitter Widget (customize the Height to 300px in order to fit the footer height), like:
- Then, open the index_eventbrite.html file, find the twitter code section, than replace it, like: