1. Hello
  2. Overview
  3. Quick install
  4. HTML structure
  5. CSS structure
  6. Quick theming
  7. How to
  8. Tricks and tips
  9. Faq
  10. Notes
  11. Support

Slick & Clean Forms pack

Documentation


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.

Overview


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.

1. Supported browsers
Note 1: Forms were tested in browsers, listed above - on PC and partialy MAC machine. Older browsers (like Internet Explorer 8 and below) or browsers, which don't support CSS3 in full, will not render the elements and animations correctly.
Note 2: Forms should work on almoust all modern portable devices (IOS and Android based), but they were created and tested to work mainly on desktops and high-res tablets, which support the CSS3 tehniques, used in creating the elements.



2. Supported resolutions

Forms were made to be partialy responsive and to adapt to most of the common resolutions for mobile, tablet and desktop devices.
They have been tested to work properly with the following resolutions and orientations:
3. Package contents
  1. Contact forms folder - demo's of most used contact and feedback forms
  2. Registration forms folder - demo's of login, registration and account reset forms
  3. Additional forms folder - miscellaneous useful forms
  4. Documentation folder - documentation
  5. Release-notes.txt (information regarding updates and changes)

Quick Installation


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            -->
<!-- *************************** -->

Note 1: You can put the forms html anywhere in your document. Just be sure not to nest it deeply, as it might break the layout if the selectors aren't adjusted properly.



2. HEAD LINKS

To use one of the form, we must include it's stylsheet and conditional statements if they are present (for example: conditionals for IE9 - placeholder).
In already opened html document (from step 1.) find the following lines in the <head> section and copy them to your html document, also in the <head> section.

For example we are going to copy links for Contact form simple, which needs it's stylesheet for the layout to work and conditionals for placeholders to work in Internet Explorer 9:

<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]-->

Note 1: If you are using a form/s with a Google map, be sure to copy the javascript and jquery links in the head (see the comments for Google maps in html document for that form).
Note 2: Adjust the css and javascript paths according to the path, where you have copied the css file (see step 3.)



3. FILES

Now that we have adjusted the html document, we should copy/paste the files from the package folder.
Files you should copy:

- stylesheet file from CSS folder (for example: slick_cfs.css).
- fonts folder from the CSS folder (css/fonts/).
- images folder, which are used in the forms for validations and select arrow (css/img/).
- ie9-placeholder.js from the /js folder for the forms. This is a script for the IE9 conditionals from the head section.

- Optional: gmaps.js from the /js folder, if you are using contact form/s with Google map.


Note 1: It's best to copy img and fonts folder inside the css folder, where you have copied the stylesheet or adjust the new paths in the css accordingly.



4. MODIFY

The last step is to modify the html in your document.

HTML structure


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        -->
<!-- *********************** -->


Note 1: With forms in popup a different main selector in used (#slick-popup), which forms our popup on click and it's a parent of forms section.

CSS structure


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. */
	

Note 1: CSS structure may be slightly different depending on the form layout.

Quick theming


You can theme Forms the way you want, from changing the elements positions, layout structure or animations and transitions. For quick theming it's enough just to change the colors to fit your overall design of the website.
The forms come with default color scheme so you can style them quickly. For demonstration purpuses of a simple color theming we'll use "Contact forms in tabs" and change the colors on the main elements.


1. Simple theming - color changing

When you have installed the form, open slick_fit.css with your favorite text editor and change the values of the selectors below:

#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. */
}

Note 1: CSS selectors are almost the same with all forms. If you can't find appropriate selector, contact me for help.

Note 2: Adjust the images for validations and selectbox with photo editing program like Photoshop or Gimp if you want to change their color.



2. Advanced theming

If you wish to adjust the transitions, customize certain elements or change layout structure, i recommend you use Firebug for Firefox or the browsers native inspecting tool (normaly Right click --> Inspect element).
With this you can inspect certain parts of the Form and it's elements and experiment with css theming to fit your needs. Here is a quick tutorial on how to use Firebug.

How to


In this section we'll cover few basics with Forms elements and some pointers on How to.


1
Adding a new field in the form

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:

  1. Selected similar field and copyied it to desired location, in this case after email input.
  2. Changed the values: Input name, input ID, placeholder, input type, entypo icon (to globe) and tooltip text.


2
Adding a new tab in the Contact forms with Tabs

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            -->
<!-- *************************** -->

Note 1: When you finish the steps above, populate the new div with content or a form with fields. See how other forms are formed.

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;
}




3
Changing the icons

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 "-".



4
Changing the location and info on the map

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);

Note 1: You can also change the icons next to each field. See entypo-icon-name above.




5
Changing the tooltip text

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>

Tricks and tips


1. Minify CSS

Minified CSS file is a good practice, as it can reduce loading time of the website, which your visitors will appriciate.


2. Debug

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.

Faq and quick help



Q: The forms layout is distorted. What's wrong?

If the forms layout is not showing up as supposed, please check the following:

- have you copied/uploaded the forms stylesheet to your webserver?
- is the stylesheet link in the head section correct and pointing towards right path?
- does your template interfere with the forms?

If you experience issues which you can't resolve you can contact me for assistance.



Q: How do i use form with PopUp? I copied the content within Start and End forms commments, but nothing happens.

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".



Q: How do i add a "required" option for checkboxes?

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.



Q: I've changed the width of the forms and now the responsiveness is weird.

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.



Q: Why can't i click the dropdown arrow in Internet Explorer?

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.



Q: Which licenses and rules apply in using the fonts and icons?

For licensing of the fonts and icons please refer to their respective owners.



Q: Can i use the forms in Joomla, Wordpress or other CMS systems?

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.



Q: I want to use type="date" in the form, but when using HTML5 input types, some of them don't show up as placeholders in Internet Explorer 9.

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');
    });
  }
});




Q: I am using an older version of Slick & Clean forms, which uses weloveiconsfont.com CDN. How do i use fonts in the package for self hosting?

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.

Additional notes


Note 1: These forms are layouts, made with HTML and CSS. They aren't active/can't submit the actual form.
Note 2: The layout and functionalities of the item's and their inner elements won't work properly in non supported CSS3 browsers.
Note 3: Please don't copy or use codes demostrated in the documentation. Use the original sources inside demo's in the package.
Note 4: To view this documentation properly, i recommend resolution 1366px of width or above.
Note 5: If you don't understand implementation steps and usage, feel free to contact me. I'm are not responsible for any data lost or other damage, which was formed during installation or usage of this items and their elements. Always create backups.




Credits:

- Entypo - by Daniel Bruce for icons font.
- Google Fonts - Lato for Lato fonts.

All licenses are provided by their authors - be sure to check them for any changes.

Support


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.