Thank you for purchasing Slick & Clean Forms pack.
Before you get started i suggest you read the documentation and incase you have an issue or you need help, feel free to contact me via email.
Slick & Clean Forms are HTML5 and CSS3 layouts, which are ment to be easely implementated into almoust any website or CMS system with some basic knowledge of HTML, CSS and/or server side script.
They are a frameworks for easy installation, customization and further development.
For further reading i'll refer Slick & Clean Forms pack just as Forms or Forms pack.
In order to install Forms element into your html page, follow these few simple steps:
1. HTML ELEMENTS
Open the folder of Forms element of your choice. Then open the html document of chosen form with your favorite text editor.
Once opened in editor, simply select all the code between the main comments ("START COPYING FROM HERE" and "END COPYING HERE") and copy selected code to your document file.
<!-- *************************** --> <!-- START COPYING FROM HERE --> <!-- *************************** --> ... select all the code between these two comments and copy/paste to your document ... <!-- *************************** --> <!-- END COPYING HERE --> <!-- *************************** -->
<link rel="stylesheet" type="text/css" href="css/css/slick_cfs.css" media="screen" />
<!--[if IE 9]>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/placeholder.js"></script>
<![endif]-->
The main wrapper is section #slick, which holds all the inner elements.
<!-- *********************** --> <!-- START COPYING FROM HERE --> <!-- *********************** --> <!-- Wrapper --> <section id="slick"></div> ...forms inner elements </section> <!-- / Wrapper --> <!-- *********************** --> <!-- END COPYING HERE --> <!-- *********************** -->
Forms elements are build using CSS3, which is easy to customize and have fun with.
Stylesheet is divided into basic sections, which forms our layout. Let's take a look of CSS structure:
1. Fonts /* Imports for the text and icons fonts */ 2. Reset /* Reset styles for the form. Adjust this accordingly if you see that reset interferes with your template layout. */ 3. Main/Basic styles /* Main styles for the form. */ 4. Text elements /* Basic styles for main text elements and tooltip. */ 5. Inputs /* Selectors with styles for inputs, checkboxes and buttons. It breaks down into various subsections. */ 6. Modals /* Modal popup window styles. */ 7. Transitions /* Transitions for animated elements. */ 8. Media queries /* Queries for responsive layout. */
#slick * { font-family: 'Lato', Arial, Helvetica, sans-serif; /* Change the content font family if you want to use other fonts */ } #slick input:checked + label.tabs { background: #fff; /* Change this HEX value. This is active tab background color. */ color: #FF2424; /* Change this HEX value. This is active tab icon font color. */ } #slick label.tabs { background: #888; /* Change this HEX value. This is passive tab background color. */ color: #666; /* Change this HEX value. This is passive tab icon font color. */ } #slick label.tabs:hover { background: #999; /* Change this HEX value. This is passive tab background color on hover. */ color: #fff; /* Change this HEX value. This is passive tab icon font color on hover. */ } #slick .sb a { background: #ddd; /* Change this HEX value. This is social icons background color. */ color: #fff; /* Change this HEX value. This is social icons text color. */ } #slick .title { color: #333; /* Change this HEX value. This is main title text color. */ } #slick p.intro b { color: #FF2424; /* Change this HEX value. This is first paragraph red bold text, placed under main title. */ } #slick .field input, #slick .field textarea, #slick .field select { border: 1px solid #ddd; /* Change this HEX value. This is input border color. */ color: #333; /* Change this HEX value. This is input text color. */ } #slick .field > input:hover, #slick .field > input:focus, #slick .field > select:hover, #slick .field > select:focus, #slick .field > textarea:hover, #slick .field > textarea:focus { border: 1px solid #333; /* Change this HEX value. This is input border color on hover/focus. */ } #slick .field span.icon { background: #ddd; /* Change this HEX value. This is input icon background color. */ color: #fff; /* Change this HEX value. This is input icon text color. */ } #slick input:hover ~ span.icon, #slick input:focus ~ span.icon, #slick select:hover ~ span.icon, #slick select:focus ~ span.icon, #slick textarea:hover ~ span.icon, #slick textarea:focus ~ span.icon { background: #333; /* Change this HEX value. This is input icon background color on hover/focus. */ } #slick input.send { background: #FF2424; /* Change this HEX value. This is send button background color. */ color: #fff; /* Change this HEX value. This is send button text color. */ } #slick input.send:hover { background: #333; /* Change this HEX value. This is send button background color on hover/focus. */ color: #fff; /* Change this HEX value. This is send button text color on hover/focus. */ } #slick .stars > input:checked ~ label { color: #FF2424; /* Change this HEX value. This is color of active stars. */ } #slick .stars:not(:checked) > label:hover, #slick .stars:not(:checked) > label:hover ~ label { color: #FF2424; /* Change this HEX value. This is color of a non-checked star on hover. */ } #slick .stars > input:checked ~ label:hover, #slick .stars > input:checked ~ label:hover ~ label, #slick .stars > label:hover ~ input:checked ~ label { color: #FF2424; /* Change this HEX value. This is color of a hovered star when checked. */ } #slick .blocks label { background: #333; /* Change this HEX value. This is background color of block checkbox. */ color: #fff; /* Change this HEX value. This is text color of block checkbox. */ } #slick .blocks label:hover { background: #FF2424; /* Change this HEX value. This is background color of block checkbox on hover. */ } #slick .blocks input:checked + label { background: #FF2424; /* Change this HEX value. This is background color of block checkbox when checked. */ }
In this section we'll cover few basics with Forms elements and some pointers on How to.
No matter what form you will be, most of the fields are pretty straight forward and easy to add.
For example, we will add a new website field to Simple Contact form right after email input and not make it required. Our newly added html code will be in blue color.
<!-- *********************** --> <!-- START COPYING FROM HERE --> <!-- *********************** --> <section id="slick"> <!-- Social buttons --> <div class="sb"> <a href="#" class="fb entypo-thumbs-up"><span class="slick-tip right">Like us on Facebook</a> <a href="#" class="gc entypo-google-circles"><span class="slick-tip right">Find us in Circles</a> <a href="#" class="tw entypo-twitter"><span class="slick-tip right">Follow us on Twitter</a> </div> <!-- Contact form --> <div class="contact-form"> <!-- Title --> <div class="title">Hey there</div> <!-- Intro text --> <p class="intro"><b>We'd like to hear from you.</b> Send us your message or just say hy with our contact form or directly via phone, we love to chat.</p> <!-- Form --> <div class="w-100"> <!-- Form fields --> <form action="" name="contact" id="contact" method="post"> <!-- Name input --> <div class="field"> <input name="name" placeholder="Your name" type="text" id="name" required /> <span class="entypo-user icon"></span> <span class="slick-tip left">Enter your name</span> </div> <!-- Email input --> <div class="field"> <input name="email" placeholder="your@domain.com" type="email" id="email" required /> <span class="entypo-mail icon"></span> <span class="slick-tip left">Enter valid email</span> </div> <!-- Website input --> <div class="field"> <input name="website" placeholder="http://" type="url" id="website" /> <span class="entypo-globe icon"></span> <span class="slick-tip left">Enter your website</span> </div> <!-- Phone input --> <div class="field"> <input name="phone" placeholder="+44 00 123" type="tel" id="phone" /> <span class="entypo-mobile icon"></span> <span class="slick-tip left">Contact phone</span> </div> <!-- Subject input --> <div class="field"> <select name="subject" id="subject" class="grayed" onClick="this.className=this.options[this.selectedIndex].className"> <option value="" disabled="disabled" selected="selected" class="disabled">Subject</option> <option value="Presales question">1. Presales question</option> <option value="Warranty and support">2. Warranty and support</option> <option value="Other">3. Other</option> </select> <div id="arrow-select"></div> <svg id="arrow-select-svg"></svg> <span class="entypo-book icon"></span> <span class="slick-tip left">Choose subject</span> </div> <!-- Message input --> <div class="field"> <textarea name="message" placeholder="Message" id="message" class="message" required></textarea> <span class="entypo-comment icon"></span> <span class="slick-tip left">Your message</span> </div> <!-- Message copy button --> <div class="w-47 mr-5"> <input type="checkbox" id="send-copy" name="send-copy" checked="checked" /> <label for="send-copy" class="tick"><span>Send me a copy of this message</label> </div> <!-- Send button --> <input type="submit" value="Send" class="send" form="contact" name="send" /> </form> <!-- / Form fields --> </div> </div> <!-- / Contact form --> </section> <!-- *********************** --> <!-- END COPYING HERE --> <!-- *********************** -->
Steps we made are:
Adding a new tab requires some html and css editing. For example we will add a new tab called "newest" to Forms in tabs and color our newly added code in blue color.
1. HTML
Open your document, where you have pasted the html code of the forms in tabs and add a new tab with content in our new div.
<!-- *************************** --> <!-- START COPYING FROM HERE --> <!-- *************************** --> <section id="slick"> <!-- Contact input and label --> <input id="contact" type="radio" class="contact-selector" name="slick-forms" checked="checked" /> <label for="contact" class="tabs entypo-comment"></label> <!-- Feedback input and label --> <input id="feedback" type="radio" class="feedback-selector" name="slick-forms" /> <label for="feedback" class="tabs entypo-paper-plane"></label> <!-- Questionnaire input and label --> <input id="questionnaire" type="radio" class="questionnaire-selector" name="slick-forms" /> <label for="questionnaire" class="tabs entypo-pencil"></label> <!-- Newest input and label --> <input id="newest" type="radio" class="newest-selector" name="slick-forms" /> <label for="newest" class="tabs entypo-icon-of-choice"></label> <!-- White divider for hiding the shadow --> <div class="clrfx merge"></div> <!-- Social buttons --> <div class="sb"> <a href="#" class="fb entypo-thumbs-up"><span class="slick-tip right">Like us on Facebook</span></a> <a href="#" class="gc entypo-google-circles"><span class="slick-tip right">Find us in Circles</span></a> <a href="#" class="tw entypo-twitter"><span class="slick-tip right">Follow us on Twitter</span></a> </div> <!-- Forms wrapper --> <div class="forms"> <!-- Contact form --> <div class="contact-form">... contact form fields ...</div> <!-- Feedback form --> <div class="contact-form">... feedback form fields ...</div> <!-- Questionnaire form --> <div class="contact-form">... questionnaire form fields ...</div> <!-- Newest form --> <div class="contact-form">... newest form fields or content ...</div> </div> <!-- / Forms wrapper --> </section> <!-- *************************** --> <!-- END COPYING HERE --> <!-- *************************** -->
2. CSS
Now open forms stylesheet, in this case it's slick_fit.css and add the following selectors:
#slick input#contact.contact-selector:checked ~ .forms .contact-form, #slick input#feedback.feedback-selector:checked ~ .forms .feedback-form, #slick input#questionnaire.questionnaire-selector:checked ~ .forms .questionnaire-form, #slick input#newest.newest-selector:checked ~ .forms .newest-form { position: relative; z-index: 10; opacity: 1; visibility: visible; } #slick input#contact.contact-selector:checked ~ .forms .contact-form, #slick input#feedback.feedback-selector:checked ~ .forms .feedback-form, #slick input#questionnaire.questionnaire-selector:checked ~ .forms .questionnaire-form, #slick input#newest.newest-selector:checked ~ .forms .newest-form { -webkit-transition: all ease 0.3s 0.1s; -moz-transition: all ease 0.3s 0.1s; -ms-transition: all ease 0.3s 0.1s; -o-transition: all ease 0.3s 0.1s; transition: all ease 0.3s 0.1s; }
Icons are very easy to change. Visit weloveiconfonts.com and under Entypo click on desired icon. A small bottom popup will show up with a icon suffix.
For example, if we click on a shopping cart, popup will bring up "entypo-basket". We then copy choosen suffix and paste it to our html of the forms. All icons in the forms are by Entypo - look for class which has "entypo-" selector and add your suffix at the end of "-".
Open gmaps.js, located in /js folder and edit the values below (in blue color). If you don't have the coordinates of your location, you can use online tools like itouchmap and insert them into the script.
// Google maps initialize function initialize() { // Change the latitude and longitude to your location. You can also get the coordinates here: http://itouchmap.com/latlong.html var myLatlng = new google.maps.LatLng(51.505307, -0.109434); var mapOptions = { zoom: 7, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map }); var infowindow = new google.maps.InfoWindow({ content: '<div class="map-wrap">' + // Company name '<div class="b-title">' + 'Company name' + '</div>' + // Company street '<p>' + 'Imaginary Address street 73' + '</p>' + // Company city and state '<p>' + '1122 Some City, Country' + '</p>' + // Clearfix with border '<div class="clrfx map-div">' + '</div>' + // Phone '<div class="b-info w-47">' + '<span class="entypo-phone">' + '</span>' + '00 265 123 456' + '</div>' + // Email '<div class="b-info w-47">' + '<span class="entypo-paper-plane">' + '</span>' + 'hey@yoursite.com' + '</div>' + // Mobile '<div class="b-info w-47">' + '<span class="entypo-mobile">' + '</span>' + '00 268 123 789' + '</div>' + // Website '<div class="b-info w-47">' + '<span class="entypo-monitor">' + '</span>' + 'www.yoursite.com' + '</div>' + // Bottom margin clearfix '<div class="clrfx mt-10">' + '</div>' + '</div>' }); makeInfoWindowEvent(map, infowindow, marker); } function makeInfoWindowEvent(map, infowindow, marker) { google.maps.event.addListener(marker, 'click', function () { infowindow.open(map, marker); }); } google.maps.event.addDomListener(window, 'load', initialize);
Open the html document and search for class that with "slick-tip", which holds the tootlip content. For example, if we wanted to change the email input tooltip in the Simple contact form, we would look for:
<span class="slick-tip left">Enter valid email</span>
Minified CSS file is a good practice, as it can reduce loading time of the website, which your visitors will appriciate.
If you're stuck with your layout and have issues you can't fix immidiately, i recommend you first try to debug the site with firebug or native browser element inspector (eg. right click --> Inspect element).
This will also help you build your customlayout faster and understand the shematics of how structure works in the forms.
If the forms layout is not showing up as supposed, please check the following:
- have you copied/uploaded the forms stylesheet to your webserver?In order for popup to work, you also need to add a link, which is placed right before the START Form comment, for example:
<!-- Link, which triggers the forms popup --> <a href="#slick-popup" class="popup-button">Click me</a> <!-- *************************** --> <!-- START COPYING FROM HERE --> <!-- *************************** -->
You can delete class="popup-button" and use any link on your website to trigger the popup form. All the link needs is #slick-popup ID in the href, like this: href="#slick-popup".
You can set required attribute for one of the radio button and it should work for the whole group. For example, if you have 5 rating stars, set “required” for just one of their radio button.
Note that validation images won’t work properly like on other input fields. Best solution for radio and multiple checkboxes validation is for now still with Javascript.
If you change the width of the main selector #slick you also need to adjust the media queries accordingly. For example, if you have changed the Basic contact form width from 1000px to 800px, open the contect form stylesheet and at the bottom look for @media screen and (max-width:1000px)... and adjust this width with your new one. You can also check all queries as the other elements might need some fine tuning to.
After Internet Explorer 8 pointer-events are not supported in IE any more, which are used in the drop down tehnique to hide the native OS arrow and style it according to wanted design. If you wish, you can delete the attributes for the arrow both in html and css and the browser will switch to OS native arrow.
For licensing of the fonts and icons please refer to their respective owners.
The forms are not made as a plugin for CMS systems, but with some html/css/php knowledge it can be implemenated into any CMS. I don't offer implementation.
Internet Explorer 9 doesn't support placeholders natively. That's why the forms have IE9 fallback script for them to work.
If the placeholder of the type you want to use doesn't show up in IE9, open js/placeholder.js and add the new HTML5 input type attribute manualy.
Let's say we want to add type="date" for IE9 fallback. Edit placeholder.js like shown below (new attribute is colored in blue):
var i = document.createElement('input'); var html5 = 'placeholder' in i; $(document).ready(function(){ if(!html5){ $('input[type=text], input[type=email], input[type=tel], input[type=password], textarea, input[type=date]').each(function(){ if($(this).attr('placeholder')) $(this).val($(this).attr('placeholder')).addClass('ie9-placeholder'); }); $('input[type=text], input[type=email], input[type=tel], input[type=password], textarea, input[type=date]').bind('click focus', function(){ if($(this).attr('placeholder') && $(this).attr('placeholder') == $(this).val()) $(this).val(null).removeClass('ie9-placeholder'); }); $('input[type=text], input[type=email], input[type=tel], input[type=password], textarea, input[type=date]').bind('blur', function(){ if($(this).attr('placeholder') && $.trim($(this).val()).length == 0) $(this).val($(this).attr('placeholder')).addClass('ie9-placeholder'); }); } });
You should open your installed form css document and under first section (1. Fonts) delete "@import url(http://weloveiconfonts.com/api/?family=entypo);".
After you've deleted the CDN import, open one of the updated forms stylesheet and copy/paste @font-face and other entypo selectors to your stylesheet:
/* Copy everything from here */ @charset "UTF-8"; @font-face { .....all the elements in between.... [class*="entypo-"]:before { font-family: 'entypo', sans-serif; } /* to here *
Then copy /fonts folder from the updated package to the folder, where you have stored your forms css.
If you get stuck with the installation, usage or modification of the item's, contact me via email support@justcapelle.com or send me a message on Codecanyon.
When you submit a support ticket, please provide much information as possible, for example:
- Your Envato username
- Detailed issue
- URL where you use or tend to use the item
Thank you again for using Slick & Clean Forms. If you find a minute to spare, i would appriciate your rating.