/Sleekform

Sleekform.css - Simple clean form built only with HTML and CSS

Primary LanguageHTML

Sleekform.css - Simple clean form built only with HTML and CSS

This is a clean-styled form built entirely in HTML and CSS.

Demo

Here's how the form looks like:

How to use it

1. Insert links in your html file in your head section:

```html ```

2. Copy the structure of HTML in your file to make sure the styles work correctly. The HTML and CSS have classes with names that will not interfere with your HTML file, unless doubled. 

<form class="form-section">
        <div class="big-square">
            <header>
                <h1>
                    *Your form name*
                </h1>
            </header>
            <div class="columns-container">
                <div class="column-66">
                    <div class="row">
                        <label>
                            *Label Name*
                        </label>
                        <div class="input-container">
                            <input type="text">
                        </div>
                    </div>
                </div>
                <div class="column-33">
                    <input type="submit" value="*Button name*">
                </div>
            </div>
        </div>
    </form>

For each information you want in your form use the template above and add a new div with the class "row" and in it put your label and a div with the class "input-container" in which to put the input.

Notes

  • Don't use same CSS class name: "form-section"
  • Form is not mobile ready(responsive)
  • Styled inputs are: text, email, textarea, checkbox