Thank you so much for having chosen SAPHIR!
More than 2 months have been necessary to build this template for having a perfect layout on every screen, an advanced design and the last trends coupled with an accurate coding.
I would be very grateful if you could rate my item at this link with 5 stars and leave your feedback, this is very important for me, Thanks! :-)
If you have any questions, feel free to email me via my user page with the contact form Here
I try to answer as soon as possible, 7/7 and almost 24/24!
Time in my country :
During your customization, I advise you to be connected to Internet for the correct running of jQuery
All the lines of style written in this document are the lines of the CSS files. The line numbers for the SASS users are almost the same, thanks for your comprehension.
For the customization, I advise you to get a look on the following link, explaining how HTML template can be edited : How to Customize an HTML Template
How To Install SAPHIR Via FTP :
Step 1 – Log into your hosting space via an FTP software (Filezilla for example).
Step 2 – Unzip your Download Pack file and open the extracted SAPHIR template folder.
Step 3 – Edit the variant of your choice, then rename it as index.html.
Step 4 – Upload the HTML file corresponding to the variant of your choice along with all directories (css,js,php,img) in the structure that they appear in your download package. Then, the HTML file should reside in the root directory, and all other files should reside inside their associated folder.
A simple and easy to use plugin to create fullscreen scrolling websites (also known as single page websites or onepage sites).
Check the awesome official documentation of this plugin here for all the settings available.
You can set up the navigation tooltips/anchors in your jquery.fullPage.js file, see the code below.
menu: '#bottomMenu', anchors: ['Home', 'About', 'Works', 'Contact'], lockAnchors: false, navigation: true, navigationPosition: 'nav-position', navigationTooltips: ['Home', 'About', 'Works', 'Contact'],
And for the menu in the footer, you have to edit it at the bottom of your html, see the code below.
<ul id="bottomMenu" class="on-left"> <li data-menuanchor="Home" class="active"> <a href="#Home">Home</a> </li> <li data-menuanchor="About"> <a href="#About">About</a> </li> <li data-menuanchor="Works"> <a href="#Works">Works</a> </li> <li data-menuanchor="Contact"> <a href="#Contact">Contact</a> </li> <li> <a class="trigger open_somedialog_1">Notify Me</a> </li> </ul>
HTML structure looks like this :
<!-- *** Fullpage sections *** --> <div id="fullpage"> <!-- +++ START - Home +++ --> <div class="section" id="section0"> </div> <!-- +++ END - Home +++ --> <!-- +++ START - About +++ --> <div class="section" id="section1"> </div> <!-- +++ END - About +++ --> <!-- +++ START - Work +++ --> <div class="section" id="section2"> </div> <!-- +++ END - Work +++ --> <!-- +++ START - Contact +++ --> <div class="section" id="section3"> </div> <!-- +++ END - Contact +++ --> </div> <!-- +++ / Fullpage sections +++ -->
If you want for example, add a new section, you have to create 1 new div with the correct id="sectionX", see the code below :
<!-- *** Fullpage sections *** --> <div id="fullpage"> ... <!-- +++ START - Contact +++ --> <div class="section" id="section3"> </div> <!-- +++ END - Contact +++ --> <!-- +++ START - NEW SECTION +++ --> <div class="section" id="section4"> </div> <!-- +++ END - NEW SECTION +++ --> </div> <!-- +++ / Fullpage sections +++ -->
Also, don't forget to add the new tooltips/anchors in your jquery.fullPage.js file.
For each version, you have to the choice to display headline text with or without dynamic countdown.
What you have to do is simply to remove the part you don't want to use. See the code below :
<!-- *** TEXT TITLE *** --> <h1> Great Spirit<br> We're Coming Soon </h1> <!-- *** COUNTDOWN TITLE *** --> <!-- Set your date at the bottom of js/jquery.countdown.js --> <h1> official launch in<br> <span id="getting-started"></span> </h1>
So, if you don't use the title with countdown, don't forget to remove the plugin at the end of your HTML :
<!-- Countdown plugin --> <script src="js/jquery.countdown.js"></script>
This is an Easy to use animated countdown javascript.
Set up your end date at the end of your js/jquery.countdown.js file, see the code below.
// Year/Month/Day Hour:Minute:Second $("#getting-started").countdown("2019/11/24 15:30:30", function(a) { $(this).html(a.strftime('%D days %H:%M:%S')); });
Beautiful animation, captivating for your page.
Specific color options and settings are in the file js/alien.js, see the code below.
Alien particles line 54
this.radius = random > .2 ? Math.random()*1 : Math.random()*3 this.color = random > .2 ? "#3f51b5" : "#636BFF" this.radius = random > .8 ? Math.random()*2.2 : this.radius this.color = random > .8 ? "#FFD700" : this.color
Background color line 126
canvas.fillStyle='#0B071D';
Stunning bubble animation with different colors.
Specific color options and settings are in the file js/bubble.js, see the code below.
Back bubbles line 27
this.aBgBubbles.push(new Bubble('#5C258D', 3.5)); // Color for the bubbles in the back
Front bubbles line 86
var _c = arguments.length <= 0 || arguments[0] === undefined ? '#4389A2' : arguments[0]; // Color for the bubbles on the front
Background color is set in style.css
#canvasbg { background: #5C258D; background: linear-gradient(45deg, #4389A2, #5C258D); }
This powerful plugin of Constellation effect is really easy to edit.
This effect is disabled on mobile devices for better performance, specific color options and settings are in the file js/constellation.js from line 189, see tje code below.
function init_plugin() { $('canvas').constellation({ star: { color: 'rgba(255, 255, 255, .9)', width: 2 }, line: { color: 'rgba(255, 255, 255, .9)', width: 0.3 }, position: { x: 0, // This value will be overwritten at startup y: 0 // This value will be overwritten at startup }, velocity: 0.1, length: 220, distance: 120, radius: 250, stars: [] }); }
The background picture is added in your style.css file:
#constellation { position: fixed; z-index: -31; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/constellation.jpg") center center; background-size: cover; }
A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP.
The background pictures are added in your html:
<!-- *** Distorsion effect *** --> <div class="slide-wrapper"> <div class="slide-item"> <img src="img/home-distorsion-1.jpg" alt="" class="slide-item__image"> </div> <div class="slide-item"> <img src="img/home-distorsion-2.jpg" alt="" class="slide-item__image"> </div> <div class="slide-item"> <img src="img/home-distorsion-3.jpg" alt="" class="slide-item__image"> </div> </div>
Specific slide options and settings are in the file js/distorsion.js, see the code below.
$(document).ready(function(){ "use strict"; var spriteImages = document.querySelectorAll( '.slide-item__image' ); var spriteImagesSrc = []; for ( var i = 0; i < spriteImages.length; i++ ) { var img = spriteImages[i]; spriteImagesSrc.push( img.getAttribute('src' ) ); } var initCanvasSlideshow = new CanvasSlideshow({ sprites: spriteImagesSrc, displacementImage: 'img/distorsion_effects/clouds.jpg', autoPlay: true, autoPlaySpeed: [10, 3], displaceScale: [200, 70] }); });
Awesome plugin for your page, showing fluid moving like an abstract fluid lamp.
Specific color options and settings are in the file js/liquid.js, see the code below.
Liquid colors are on line 260
lava0 = new LavaLamp(screen.width, screen.height, 5, "#43C6AC", "#191654");
Background color is set in style.css
.wrap { ... background: linear-gradient(-206deg, #00F260 0%, #0575E6 100%); }
VEGAS is a jQuery plugin which adds beautiful animated background slideshows and videos to your page body or any of its elements. It works on IE9+, Safari, Firefox and Chrome.
Check the awesome official documentation of this plugin here for all the settings available.
Specific options and settings are in the file js/vegas-video.js, see the code below.
$(document).ready(function(){ "use strict"; $('.local-video').vegas({ slides: [ { src: 'img/home-slide-1.jpg', // ONLY 1 picture is allowed in this variant for mobile devices. video: { src: [ 'media/your-video.mp4' ], loop: true, mute: false } }, ], // Add an overlay over your pictures, several patterns available in your css/overlays folder, set the one you need in style.css -->> //.vegas-overlay { // opacity: .5; // background: transparent url("overlays/01.png") center center repeat; // } overlay: true, }); });
Image src is required for video slides as a fallback when videos cannot be played.
The fallback image will be displayed instead.
VEGAS excludes mobile devices.
Add your location(s)
Find the coordonates of a place easily with this website : http://www.gps-coordinates.net/
When you got your latitude and longitude, add the values in the js/map.js file.
var locations = [ [51.507351, -0.127758, 1], // LONDON [48.856614, 2.352222, 2], // PARIS [41.902783, 12.496366, 3], // ROME [-33.868820, 151.209296, 4], // SYDNEY [40.712784, -74.005941, 5], // NEW YORK [18.017874, -76.809904, 6], // KINGSTON [52.520007, 13.404954, 7], // BERLIN [34.052234, -118.243685, 8], // LOS ANGELES [35.689487, 139.691706, 9], // TOKYO [55.755826, 37.617300, 10], // MOSCOW [25.285447, 51.531040, 11] //DOHA ];
Center of your map
Also, don't forget to set up the center of your map, still in the same file.
// The latitude and longitude to center the map (always required) var center = new google.maps.LatLng(48.856614, 2.352222);
Google Maps API warning: NoApiKeys
If you don't see your map online, then, it may require an API Key.
Click on the following link and then, on the button GET A KEY : Get my key
Then, add it at the end of your html, in the google script like the following example :
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>
I advise you to visit Snazzy Map for customizing your map ;-)
This powerful plugin called Flat Surface Shader is really easy to edit.
Specific color options are at the very bottom of the html file index-polygon.html, see the code below.
<!-- Polygon colors --> <script> var ambient_value = '#0f0c29'; // ambient color var diffuse_value = '#302b63'; // diffuse color </script>
VEGAS is a jQuery plugin which adds beautiful animated background slideshows to your page body or any of its elements. It works on IE9+, Safari, Firefox and Chrome.
Check the awesome official documentation of this plugin here for all the settings available.
Specific slide options and settings are in the file js/vegas.js, see the code below.
$(document).ready(function(){ "use strict"; $('.slideshow').vegas({ slides: [ { src: 'img/home-slide-1.jpg' }, { src: 'img/home-slide-2.jpg' }, { src: 'img/home-slide-3.jpg' }, ], // Delay beetween slides in milliseconds. delay: 5000, // Choose your transition effect (See the documentation provided in your download pack) transition: 'fade', // Add an overlay over your pictures, several patterns available in your css/overlays folder, set the one you need in style.css -->> //.vegas-overlay { // opacity: .5; // background: transparent url("overlays/01.png") center center repeat; // } overlay: true, }); });
This is a jQuery component that let you play a Youtube® movie as background of your HTML page.
Add easily your video with just your link in the HTML code, see the code below.
Please note we're using a specific main-youtube.js file instead of the main.js one for this variant.
For more options, please visit this page.
<!-- YouTube link --> <a id="bgndVideo" class="player" data-property="{videoURL:'http://youtu.be/ecV7nA3pXVI',containment:'body',autoPlay:true, mute:false, startAt:0, stopAt:0, opacity:1}"></a>
The player doesn’t work as background for mobile devices due to the restriction policy adopted by all on managing multimedia files via javascript.
To solve this, instead of to have only the color of your body, I added a fullscreen slideshow with the pictures of your choice.
Set up this one at the top, in js/vegas.js, see the code below.
$(document).ready(function(){ "use strict"; $('.slideshow').vegas({ slides: [ { src: 'img/home-slide-1.jpg' }, { src: 'img/home-slide-2.jpg' }, { src: 'img/home-slide-3.jpg' }, ], // Delay beetween slides in milliseconds. delay: 5000, // Choose your transition effect (See the documentation provided in your download pack) transition: 'fade', // Add an overlay over your pictures, several patterns available in your css/overlays folder, set the one you need in style.css -->> //.vegas-overlay { // opacity: .5; // background: transparent url("overlays/01.png") center center repeat; // } overlay: true, }); });
Featherlight is a very lightweight jQuery lightbox.
Check out the official website here.
We're using 3 options with SAPHIR, the first one is "Single picture lightbox", see the code below.
<div class="col-12 col-lg-4 block-item"> <a href="img/item-1.jpg" data-featherlight="image" data-title="Great spirit everywhere" data-text="1. Nostrud dolor aute sed proident et ea et duis proident quis ex magna enim aliquip esse aute non elit in eu in aliquip."><img src="img/item-1.jpg" alt="Item 1" class="img-fluid item-gallery" /> <h3>Single picture lightbox <small>One snap</small></h3></a> <p>Lorem ipsum Do dolor commodo occaecat sit pariatur nisi sit laboris officia exercitation officia laboris ex ullamco nulla do in elit.</p> </div>
data-text and data-title are displayed in the gallery when the content is open
The second one is "Gallery of pictures", see the code below.
<div class="col-12 col-lg-4 block-item" data-featherlight-gallery data-featherlight-filter="a"> <a href="img/gallery-1.jpg" data-title="Takin' It Back" data-text="1. Nostrud dolor aute sed proident et ea et duis proident quis ex magna enim aliquip esse aute non elit in eu in aliquip."> <img src="img/gallery-1.jpg" alt="Gallery 1" class="img-fluid item-gallery" /> <h3>Gallery of pictures <small>More & More</small></h3></a> <p>Lorem ipsum Do dolor commodo occaecat sit pariatur nisi sit laboris officia exercitation officia laboris ex ullamco nulla do in elit.</p> <a class="display-none" href="img/gallery-2.jpg" data-title="The path of the designer" data-text="2. Nostrud dolor aute sed proident et ea et duis proident quis ex magna enim aliquip esse aute non elit in eu in aliquip."> <img src="img/gallery-2.jpg" alt="Gallery 2" class="img-fluid item-gallery" /> </a> <a class="display-none" href="img/gallery-3.jpg" data-title="Promised land" data-text="3. Nostrud dolor aute sed proident et ea et duis proident quis ex magna enim aliquip esse aute non elit in eu in aliquip."> <img src="img/gallery-3.jpg" alt="Gallery 3" class="img-fluid item-gallery" /> </a> </div>
Make sure if you want to keep the design like it is, to apply the class display-none to all your "link to open" except the one used for the 1st picture.
The last one is "Video iframe", see the code below.
<div class="col-12 col-lg-4 block-item block-item-video"> <a href="https://www.youtube.com/embed/Bey4XXJAqS8" data-featherlight="iframe" data-featherlight-iframe-allowfullscreen="true" data-featherlight-iframe-width="1200" data-featherlight-iframe-height="675" data-title="Your YouTube Video" data-text="3. Nostrud dolor aute sed proident et ea et duis proident quis ex magna enim aliquip esse aute non elit in eu in aliquip."> <img src="img/item-3.jpg" alt="Item 3" class="img-fluid item-gallery" /> <h3>Video iframe <small>Animate it</small></h3></a> <p>Lorem ipsum Do dolor commodo occaecat sit pariatur nisi sit laboris officia exercitation officia laboris ex ullamco nulla do in elit.</p> </div>
We're using a modal popup for the newsletter form, lightweight, reliable and fully responsive.
Here is how look the structure of the popup in your html if you're using only 1 popup, see the code below.
<!-- START - Newsletter Popup --> <div id="somedialog_1" class="dialog"> <div class="dialog__overlay"></div> <div class="dialog__content"> <div class="dialog-inner"> <h4>You like taking the lead of line?</h4> <p>Being the first to know always feels great... Signing up to our newsletter gives you <strong>exclusive access to our Grand Opening!</strong></p> <!-- Newsletter Form --> <div id="subscribe"> <form action="php/notify-me.php" id="notifyMe" method="POST"> <div class="form-group"> <div class="controls"> <!-- Field --> <input type="text" id="mail-sub" name="email" placeholder="Click here to type your email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Click here to type your email'" class="form-control email srequiredField" /> <!-- Button --> <button class="btn btn-lg submit on-center"><span>Get notified</span></button> <div class="clear"></div> </div> </div> </form> </div> <!-- /. Newsletter Form --> </div> <!-- Cross closing the Newsletter Popup --> <button class="close-newsletter" data-dialog-close><i class="icon ion-close-round"></i></button> </div> </div> <!-- END - Newsletter Popup -->
And in your dialogFx.js file, see the code below.
// // IF YOU'RE USING A SECOND BUTTON FOR 1 POPUP (LIKE THE ORIGINAL VERSION), MAKE SURE THE FOLLOWING FUNCTION IS SET PROPERLY TO OPEN THE GOOD ONE $(".open_somedialog_1").on( "click", function() { document.getElementById("popup_somedialog_1").click(); }); // ********** 1 POPUP FUNCTION ********** // // ********** 1 POPUP FUNCTION ********** // // ********** 1 POPUP FUNCTION ********** // // ********** 1 POPUP FUNCTION ********** // // ********** 1 POPUP FUNCTION ********** // // ********** 1 POPUP FUNCTION ********** // // ********** 1 POPUP FUNCTION ********** // // ********** 1 POPUP FUNCTION ********** // // ********** 1 POPUP FUNCTION ********** // (function() { var dlgtrigger = $( '[data-dialog]' ); var i = 0; var somedialog = document.getElementById( dlgtrigger[i].getAttribute( 'data-dialog' ) ); var dlg = new DialogFx( somedialog ); dlgtrigger.click( dlg.toggle.bind(dlg) ); })(); // ****//**** 1 POPUP FUNCTION ****//**** // // ****//**** 1 POPUP FUNCTION ****//**** // // ****//**** 1 POPUP FUNCTION ****//**** // // ****//**** 1 POPUP FUNCTION ****//**** // // ****//**** 1 POPUP FUNCTION ****//**** // // ****//**** 1 POPUP FUNCTION ****//**** // // ****//**** 1 POPUP FUNCTION ****//**** // // ****//**** 1 POPUP FUNCTION ****//**** // // ****//**** 1 POPUP FUNCTION ****//**** //
In our HTML, we have 2 buttons to open the same popup, see the code below.
<a id="popup_somedialog_1" data-dialog="somedialog_1" class="trigger light-btn colored"> <span id="first-text">Keep me updated!</span> <span id="second-text">Get notified</span> <!-- On this span, it's important to use a text smaller or equal than the first one (here: Weekly Newsletter) to avoid any troubles --> </a> ... <li> <a class="trigger open_somedialog_1">Notify Me</a> </li>
How to use 2 or more popups
If you want to use 2 or more popups, here is how to manage your code.
HTML structure will look like this.
<div id="somedialog_1" class="dialog"> ... </div> <div id="somedialog_2" class="dialog"> ... </div>
Buttons:
<a id="popup_somedialog_1" data-dialog="somedialog_1" class="trigger light-btn colored"> ... </a> <a id="popup_somedialog_2" data-dialog="somedialog_2" class="trigger light-btn colored"> ... </a>
Other links:
<li> <a class="trigger open_somedialog_1">Notify Me 1</a> </li> <li> <a class="trigger open_somedialog_2">Notify Me 2</a> </li>
In your dialogFx.js file, you will have to comment the first function you can see below, because it's used if you have only 1 popup.
$(".open_somedialog_1").on( "click", function() { document.getElementById("popup_somedialog_1").click(); }); $(".open_somedialog_2").on( "click", function() { document.getElementById("popup_somedialog_2").click(); }); // ********** 1 POPUP FUNCTION ********** // // ********** 1 POPUP FUNCTION ********** // // ********** 1 POPUP FUNCTION ********** // // ********** 1 POPUP FUNCTION ********** // // ********** 1 POPUP FUNCTION ********** // // ********** 1 POPUP FUNCTION ********** // // ********** 1 POPUP FUNCTION ********** // // ********** 1 POPUP FUNCTION ********** // // ********** 1 POPUP FUNCTION ********** // // (function() { // var dlgtrigger = $( '[data-dialog]' ); // var i = 0; // var somedialog = document.getElementById( dlgtrigger[i].getAttribute( 'data-dialog' ) ); // var dlg = new DialogFx( somedialog ); // dlgtrigger.click( dlg.toggle.bind(dlg) ); // })(); // ****//**** 1 POPUP FUNCTION ****//**** // // ****//**** 1 POPUP FUNCTION ****//**** // // ****//**** 1 POPUP FUNCTION ****//**** // // ****//**** 1 POPUP FUNCTION ****//**** // // ****//**** 1 POPUP FUNCTION ****//**** // // ****//**** 1 POPUP FUNCTION ****//**** // // ****//**** 1 POPUP FUNCTION ****//**** // // ****//**** 1 POPUP FUNCTION ****//**** // // ****//**** 1 POPUP FUNCTION ****//**** // // ******** XXXX POPUPS FUNCTION ******** // // ******** XXXX POPUPS FUNCTION ******** // // ******** XXXX POPUPS FUNCTION ******** // // ******** XXXX POPUPS FUNCTION ******** // // ******** XXXX POPUPS FUNCTION ******** // // ******** XXXX POPUPS FUNCTION ******** // // ******** XXXX POPUPS FUNCTION ******** // // ******** XXXX POPUPS FUNCTION ******** // // ******** XXXX POPUPS FUNCTION ******** // (function() { var dlgTrigger = document.querySelectorAll('[data-dialog]'); var someDialog, dlg; for (i = 0; i < dlgTrigger.length; i++) { someDialog = document.getElementById( dlgTrigger[i].getAttribute( 'data-dialog' ) ); dlg = new DialogFx(someDialog); dlgTrigger[i].addEventListener( 'click', dlg.toggle.bind(dlg) ); } })(); // ***//*** XXXX POPUPS FUNCTION ***//*** // // ***//*** XXXX POPUPS FUNCTION ***//*** // // ***//*** XXXX POPUPS FUNCTION ***//*** // // ***//*** XXXX POPUPS FUNCTION ***//*** // // ***//*** XXXX POPUPS FUNCTION ***//*** // // ***//*** XXXX POPUPS FUNCTION ***//*** // // ***//*** XXXX POPUPS FUNCTION ***//*** // // ***//*** XXXX POPUPS FUNCTION ***//*** // // ***//*** XXXX POPUPS FUNCTION ***//*** //
1st solution : Mailchimp
Newsletter service
More than 12 million people and businesses around the world use MailChimp to create, send, and track email newsletters. Whether you're self-employed, you manage projects for clients, or you work for a Fortune 500 company, MailChimp has features and integrations that will suit your email marketing needs. More informations
For the configuration with Mailchimp, you must just to know your API Key and the ID of your list.
Be sure that the form created in your mailchimp dashboard is asking only the email address and not the name, surname or something else.
Find or Generate Your API Key
Users with Manager permissions can generate and view their own API keys. Users with Admin permissions can also see API keys for other account users.
Below, you'll learn how to grab an existing API key or generate a new one.
Click on the following link to know how to get it: About API Keys
Find Your List ID
Each MailChimp list has a unique List ID that integrations, plugins, and widgets may require to connect and transfer subscriber data.
The List ID is generated by our system when the list is created and cannot be changed. There are two ways to find the List ID for a MailChimp list.
Click on the following link to know how to get it: Find Your List ID
Final step
Open the file "notify-me.php" findable in the folder php/notify-me.php and fill out the API_KEY and LIST_ID fields.
// Set to "mailchimp" or "file" $STORE_MODE = "mailchimp"; // MailChimp API Key findable in your Mailchimp's dashboard $API_KEY = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-XX0"; // MailChimp List ID findable in your Mailchimp's dashboard $LIST_ID = "XXXXXXXXXX";
2nd solution : File
Save the emails in a .txt file
Second solution, the save of the subscribers's emails in a txt file at the root of your server
Set up the file storage :
• Step 1 - Create a .txt file empty or use the file subscription-list.txt provided in your download pack.
• Step 2 - Upload the file at the root of your server
• Step 3 - Open the file "notify-me.php" findable in php/notify-me.php
• Step 4 - You have to fill up the fields and comment the Mailchimp settings as on the code below:
// Set to "mailchimp" or "file" $STORE_MODE = "file"; // MailChimp API Key findable in your Mailchimp's dashboard // $API_KEY = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-XX0"; // MailChimp List ID findable in your Mailchimp's dashboard // $LIST_ID = "XXXXXXXXXX"; // After $_SERVER["DOCUMENT_ROOT"]." , write the path to your .txt to save the emails of the subscribers $STORE_FILE = $_SERVER["DOCUMENT_ROOT"]."/subscription-list.txt";
3rd solution : Email
Receive in your inbox
Third solution, you can receive directly in your inbox, the subscribers's emails
Set up the email sending :
• Step 1 - Open notify-me-email.php findable in php/notify-me-email.php
• Step 2 - Rewrite your email, subject and the email in From address.
As an example, the 'From' address should be set to something like 'noreply@yourdomain.com' in order to be based on the same domain as the form.
If you try to use a 'From' that’s not based on the domain on which your form resides, like :
$headers .= 'From: My website' . "\r\n"; the anti-spam could block the sending, but you can give a try.
If you do not know what to write in the 'From' field for your contact form, you may wish to contact your hosting provider for assistance.
$email_to = "myemail@email.com"; // Write your email here to receive the email addresses submitted $subject = 'New subscriber from SAPHIR'; // Write the subject you'll see in your inbox ... $headers = "MIME-Version: 1.0" . "\r\n"; $headers .= "Content-type:text/html; charset=utf-8" . "\r\n"; $headers .= 'From: SAPHIR Template <noreply@yourdomain.com>' . "\r\n";// As an example, the 'From' address should be set to something like 'noreply@yourdomain.com' in order to be based on the same domain as the form.
And don't forget to change the path in your html, see the code examples below
<form action="php/notify-me-email.php" id="notifyMe" method="POST">
Then you can edit the content about the email you will receive in your inbox in notify-me-email.php, see the code below.
I built up an elegant email body, this is why you will find some html and css in the next part of code.
$text = " <head> <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'> </head> <body style='font-family:Verdana;background:#f2f2f2;color:#606060;'> <style> h2 { color: #6534ff; } a { color: #FFFFFF; text-decoration: none; } p { line-height:1.5; font-size: 14px; } </style> <table cellpadding='0' width='100%' cellspacing='0' border='0'> <tr> <td> <table cellpadding='0' cellspacing='0' border='0' align='center' width='100%' style='border-collapse:collapse;'> <tr> <td> <div> <table cellpadding='0' cellspacing='0' border='0' align='center' style='width: 100%;max-width:600px;background:#FFFFFF;margin:0 auto;border-radius:5px;padding:50px 30px'> <tr> <td width='100%' colspan='3' align='center' style='padding-bottom:10px;'> <div> <h2 >Woohoo! 1 new subscriber</h2> </div> </td> </tr> <tr> <td width='100'> </td> <td width='400' align='center' style='padding-bottom:5px;'> <div> <p >One of your visitors has just subscribed to your Newsletter, here is their email address :</p> </div> </td> <td width='100'> </td> </tr> <tr> <td width='100'> </td> <td align='center' style='padding-top:25px;'> <table cellpadding='0' cellspacing='0' border='0' align='center' width='200' height='50'> <tr> <td bgcolor='#6534ff' align='center' style='border-radius:4px;padding:0 25px;color:#FFFFFF' height='50' width='auto'> <div> $email </div> </td> </tr> </table> </td> <td width='100'> </td> </tr> </table> </div> <div style='margin-top:30px;text-align:center;color:#b3b3b3'> <p style='font-size:12px;'>2018-2XXX ThemeHelite®, All Rights Reserved.</p> </div> </td> </tr> </table> </td> </tr> </table> </body>";
1st step
Set your email and the subject in the contact-me.php file.
$to_Email = 'myemail@email.com'; // Write your email here to receive the form submissions $subject = 'New message from SAPHIR'; // Write the subject you'll see in your inbox
2nd step
Edit several properties and text alerts for the contact form in the same file, contact-me.php, see the code below.
Alert messages
// PHP validation for the fields required if(empty($_POST["userName"])) { $output = json_encode(array('type'=>'error', 'text' => '<span><i class="icon ion-close-round"></i></span>Error on 1st field :<br>Name too short or not specified.')); die($output); } if(!filter_var($_POST["userEmail"], FILTER_VALIDATE_EMAIL)) { $output = json_encode(array('type'=>'error', 'text' => '<span><i class="icon ion-close-round"></i></span>Error on 2nd field :<br>Please enter a valid email address.')); die($output); } // To avoid too small message, you can change the value of the minimum characters required. Here it's <20 if(strlen($_POST["userMessage"])<20) { $output = json_encode(array('type'=>'error', 'text' => '<span><i class="icon ion-close-round"></i></span>Error on 3rd field :<br>Too short message! Take your time and write a few words.')); die($output); }
Validation messages
if(!$Mailsending) { //If mail couldn't be sent output error. Check your PHP email configuration (if it ever happens) $output = json_encode(array('type'=>'error', 'text' => '<span><i class="icon ion-close-round"></i></span>Oops! Looks like something went wrong<br>Please check your PHP mail configuration.')); die($output); } else { $output = json_encode(array('type'=>'message', 'text' => '<span><i class="icon ion-checkmark-round"></i></span><strong>Hello '.$_POST["userName"] .'!</strong><br>Your message has been sent, we will get back to you asap !')); die($output); }
Email's body you will receive in your inbox I built up an elegant email body, this is why you will find some html and css in the next part of code.
// Body of the Email received in your Inbox $emailcontent = " <head> <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'> </head> <body style='font-family:Verdana;background:#f2f2f2;color:#606060;'> <style> h3 { font-weight: normal; color: #999999; margin-bottom: 0; font-size: 14px; } a , h2 { color: #6534ff; } p { margin-top: 5px; line-height:1.5; font-size: 14px; } </style> <table cellpadding='0' width='100%' cellspacing='0' border='0'> <tr> <td> <table cellpadding='0' cellspacing='0' border='0' align='center' width='100%' style='border-collapse:collapse;'> <tr> <td> <div> <table cellpadding='0' cellspacing='0' border='0' align='center' style='width: 100%;max-width:600px;background:#FFFFFF;margin:0 auto;border-radius:5px;padding:50px 30px'> <tr> <td width='100%' colspan='3' align='left' style='padding-bottom:0;'> <div> <h2>New message</h2> </div> </td> </tr> <tr> <td width='100%' align='left' style='padding-bottom:30px;'> <div> <p>Hello, you've just received a new message via the contact form on your website.</p> </div> </td> </tr> <tr> <td width='100%' align='left' style='padding-bottom:20px;'> <div> <h3>From</h3> <p>$name</p> </div> </td> </tr> <tr> <td width='100%' align='left' style='padding-bottom:20px;'> <div> <h3>Email Address</h3> <p>$email</p> </div> </td> </tr> <tr> <td width='100%' align='left' style='padding-bottom:20px;'> <div> <h3>Message</h3> <p>$message</p> </div> </td> </tr> </table> </div> <div style='margin-top:30px;text-align:center;color:#b3b3b3'> <p style='font-size:12px;'>2018-2XXX ThemeHelite®, All Rights Reserved.</p> </div> </td> </tr> </table> </td> </tr> </table> </body>";
The 'From' address
As an example, the 'From' address should be set to something like 'noreply@yourdomain.com' in order to be based on the same domain as the form.
If you try to use a 'From' that’s not based on the domain on which your form resides, like :
$headers .= 'From: My website' . "\r\n"; the anti-spam could block the sending, but you can give a try.
If you do not know what to write in the 'From' field for your contact form, you may wish to contact your hosting provider for assistance.
// Proceed with PHP email $headers = 'MIME-Version: 1.0' . "\r\n"; $headers .= 'Content-type:text/html;charset=UTF-8' . "\r\n"; $headers .= 'From: SAPHIR Template <noreply@yourdomain.com>' . "\r\n"; // As an example, the 'From' address should be set to something like 'noreply@yourdomain.com' in order to be based on the same domain as the form. $headers .= 'Reply-To: '.$_POST["userEmail"]."\r\n";
PS : If you're getting some troubles to receive the form submissions, here are some possibilities that could block the sending :
• Check your spam folder
• Is PHP Mail() function active on your server?
• Try to change your email with a Gmail address
• Upgrade the PHP version running on your server to 5.5 (can be done in your hosting provider's panel or by their)
How to know if PHP Mail function is active on my server?
It’s quite possible PHP mail() function is either disabled or not configured properly on your server. An easy way to check if e-mail sending is working is using this code. It’s as simple as it gets, if this code doesn’t work no other will:
<?php mail('you@yourmail.com','Test mail','The mail function is working!'); echo 'Mail sent!'; ?>
• Save this code as mailtest.php
• change you@yourmail.com to your e-mail address
• upload mailtest.php to your server
• open mailtest.php in your browser (http://yourwebsite.com/mailtest.php)
• check your inbox to see if a test message arrived.
Documentation
Just below the nav on your left, you will find 5 useful links to learn or improve your knowledges in SASS, Bootstrap, Bourbon, Font Awesome & IonIcons