Usage
To use Patterns, copy the code snippet for corresponding pattern and simply paste it into your code. Dependencies specific to a pattern will be indicated as comments at the top of a code snippet.
Example
To use evo-grid-3-a, click the VIEW CODE button below the example to reveal the code snippet.
The code snippet displays below after clicking VIEW CODE. Clicking HIDE CODE will hide the snippet.
Forms
To use a form such as form-email-1, browse to the Email Form page and find the form example you need. Click the VIEW CODE button below the example to reveal the code snippet. Any dependencies will be noted in a comment at the top of the code snippet.
There are two types of form styles. The default 'Evolution Toolkit' forms look like standard browser forms but have some custom styling and multiple size options.
A matching 'Bottom Line' form style is available for each example, for keeping with modern design trends.
Understanding Forms
For this example we'll be explaining Forms Login page.
On Forms Login page we have four different forms. Each form has specific id. For example form-login-1 has a id="form-validation-login-b" inside of form tag. Also the input fields has specific id name for each form. For example form-login-1 input field has a id="password", where form-login-1-line input field has a id="password1".
We "have" to use different id's name because each form is using similar or the same functionality, so we don't want any overlapping issues.
On the bottom of each (most) Form HTML pages, you'll see source javascript file (starts with 'form-') included, for example form-validation-login-b.js.
If we open up form-validation-login-b.js, you will look for those forms id's that matches id's in HTML file.
In JavaScript file they start with something like this document.getElementById("form-validation-login-b").onsubmit = function () {. This part of JS is related to form-login-1 because their id's match.
For additional form styling we created for these forms, you can find it in scss > patterns folder and all of them have prefix of _form.
In Sign Up Forms, under form-signup-2-line (password input) has restriction to special characters.
This means that you are not allowed to include special characters in your password. If you do include special character and try to submit it, you will get an error message saying "No special characters allowed".
Challenge: Try to make form-signup-2-line process form even if special characters are included in password field.
Usable Form PHP code
Below is php code gist snippet that can be helpful when setting up "subscribe form" or "send-mail form" using PHP.
Resources to help setting up our forms with PHP and MySQL