CSSformalize - The Fast-Track to Stylish Forms!

apply dark meta

Here you can generate styles for forms tailored to your project's design.

On the left sidebar, we set global variables.
In the center, we view the result and adjust local variables for each form group.
And finally, we just copy the variables from the right sidebar.

We have also created several themes:

Input type Text, Password, Date, Time and other..

Fieldset Legend

<input class="cform cform-custom-input" type="email" placeholder="disabled" disabled="true" value="disabled"/>
<input class="cform cform-custom-input invalid" type="number" placeholder="input invalid" />
<input class="cform cform-custom-input" type="password" placeholder="password" name="password" />
<input class="cform cform-custom-input focus" type="text" placeholder="Focused State" />

<input list="tech" class="select cform cform-custom-input" placeholder="input list" />

<datalist id="tech">
  <option value="HTML"></option>
  <option value="CSS"></option>
  <option value="Javascript"></option>
  <option value="Gulp"></option>
  <option value="SASS"></option>
  <option value="PostCSS"></option>
  <option value="Git"></option>
</datalist>

<input class="cform cform-custom-input" type="number" placeholder="number" />
<input class="cform cform-custom-input" type="date" />
<input class="cform cform-custom-input focus-ring" type="datetime-local" />
<input class="cform cform-custom-input" type="month" />


<input class="cform cform-custom-input" name="login" type="text" placeholder="search" />
<input class="cform cform-custom-input" type="tel" placeholder="phone" />
<input class="cform cform-custom-input" type="time" />
<input class="cform cform-custom-input" type="week" />

<select class="cform cform-custom-input" name="" id="id">
  <option value="select">
    Select
  </option>
  <option value="select">select 1</option>
  <option value="select">select 2</option>
  <option value="select">select 3</option>
  <option value="select">select 4</option>
  <option value="select">select 5</option>
  <option value="select">select 6</option>
  <option value="select">select 7</option>
</select>
      <fieldset class="cform cform-custom-input">
  <legend>Fieldset Legend</legend>
  <input type="text" tabindex="1" class="cform" />
</fieldset>

<textarea class="cform cform-custom-input" name="" rows="5" placeholder="text">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</textarea>

<select class="cform cform-custom-input" name="" id="" multiple>
  <option value="select">select 1</option>
  <option value="select">select 2</option>
  <option value="select">select 3</option>
</select>


<input class="cform cform-custom-checkbox-radio" type="checkbox" disabled />
<input class="cform cform-custom-checkbox-radio" type="checkbox" />
<input class="cform cform-custom-checkbox-radio" type="checkbox" checked />
<input class="cform cform-custom-checkbox-radio" type="checkbox" checked disabled />

<input class="cform cform-custom-checkbox-radio" type="radio" disabled />
<input class="cform cform-custom-checkbox-radio" type="radio" name="radio" />
<input class="cform cform-custom-checkbox-radio" type="radio" name="radio" checked />
<input class="cform cform-custom-checkbox-radio" type="radio" name="radio2" checked disabled />

Custom Checkboxes


<label class="cform custom-checkbox cform-custom-checkbox">
  <input type="checkbox" disabled />
</label>
<label class="cform custom-checkbox cform-custom-checkbox">
  <input type="checkbox" />
</label>
<label class="cform custom-checkbox cform-custom-checkbox">
  <input type="checkbox" checked />
</label>
<label class="cform custom-checkbox cform-custom-checkbox">
  <input type="checkbox" checked disabled />
</label>

Switch


<div class="cform-switch cform-switch-big cform-custom-switch">
  <input type="checkbox" id="switch-1" checked />
  <label for="switch-1"></label>
</div>
<div class="cform-switch cform-custom-switch">
  <input type="checkbox" id="switch-2" />
  <label for="switch-2"></label>
</div>
<div class="cform-switch cform-switch-small cform-custom-switch">
  <input type="checkbox" id="switch-3" />
  <label for="switch-3"></label>
</div>

Radio Group / Radio Group Small

Html Css Javascript

<div class="radio-group">
    <input type="radio" id="option-one3" name="selector3" checked />
    <label for="option-one3">Html</label>
    <input type="radio" id="option-two3" name="selector3" />
    <label for="option-two3">Css</label>
    <input type="radio" id="option-three3" name="selector3" />
    <label for="option-three3">Javascript</label>
</div>
<div class="radio-group radio-group-small">
    <input type="radio" id="option-one3" name="selector3" checked />
    <label for="option-one3">Html</label>
    <input type="radio" id="option-two3" name="selector3" />
    <label for="option-two3">Css</label>
    <input type="radio" id="option-three3" name="selector3" />
    <label for="option-three3">Javascript</label>
</div>

Input type Range


<input type="range" class="cform cform-custom-range" />

Buttons

Colors:

Sizes:

Rounded:

Outlined:

Full Width & Link:


<button class="cform-btn cform-custom-btn cform-btn">Default</button>
<button class="cform-btn cform-custom-btn cform-btn-primary">Primary</button>
<button class="cform-btn cform-custom-btn cform-btn-secondary">Secondary</button>
<button class="cform-btn cform-custom-btn cform-btn-info">Info</button>
<button class="cform-btn cform-custom-btn cform-btn-error">Error</button>
<button class="cform-btn cform-custom-btn cform-btn-accent">Accent</button>

<button class="cform-btn cform-custom-btn cform-btn-xl">Button</button>
<button class="cform-btn cform-custom-btn cform-btn-l">Button</button>
<button class="cform-btn cform-custom-btn">Button</button>
<button class="cform-btn cform-custom-btn cform-btn-sm">Button</button>

<button class="cform-btn cform-custom-btn cform-btn-xl cform-btn-rounded">Button</button>
<button class="cform-btn cform-custom-btn cform-btn-l cform-btn-rounded">Button</button>
<button class="cform-btn cform-custom-btn cform-btn-rounded">Button</button>
<button class="cform-btn cform-custom-btn cform-btn-sm cform-btn-rounded">Button</button>

<button class="cform-btn cform-custom-btn cform-btn-xl cform-btn-outlined cform-btn-primary">Button</button>
<button class="cform-btn cform-custom-btn cform-btn-l cform-btn-outlined cform-btn-secondary">Button</button>
<button class="cform-btn cform-custom-btn cform-btn-outlined cform-btn-info">Button</button>
<button class="cform-btn cform-custom-btn cform-btn-outlined cform-btn-error">Button</button>
<button class="cform-btn cform-custom-btn cform-btn-sm cform-btn-outlined cform-btn-accent">Button</button>
<button class="cform-btn cform-custom-btn cform-btn-sm cform-btn-outlined">Button</button>

<button class="cform-btn cform-custom-btn cform-btn-block">Button</button>
<button class="cform-btn cform-custom-btn cform-btn-link">Button</button>

File Upload / Color Picker

<input class="cform cform-custom-file" type="file">
<input type="color" class="cform cform-custom-picker">

/* CSS variables: */

<!-- Include in <head> if use dark theme: -->