50 best free bootstrap form templates & examples in 2019

Содержание:

Z-index

Several Bootstrap components utilize , the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.

These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used + or +.

We don’t encourage customization of these individual values; should you change one, you likely need to change them all.

To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit values of , , and for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher value to show their border over the sibling elements.

Responsive classes

181 free html5 responsive website templates

Bootstrap’s grid includes six tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

All breakpoints

For grids that are the same from the smallest of devices to the largest, use the and classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .

col
col
col
col

col-8
col-4

Stacked to horizontal

Using a single set of classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint ().

col-sm-8
col-sm-4

col-sm
col-sm
col-sm

Mix and match

Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

.col-md-8
.col-6 .col-md-4

.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4

.col-6
.col-6

Row columns

Use the responsive classes to quickly set the number of columns that best render your content and layout. Whereas normal classes apply to the individual columns (e.g., ), the row columns classes are set on the parent as a default for contained columns. With you can give the columns their natural width.

Use these row columns classes to quickly create basic grid layouts or to control your card layouts and override when needed at the column level.

Column
Column
Column
Column

Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column

You can also use the accompanying Sass mixin, :

Alignment

Bootstrap 5 grid system

Use flexbox alignment utilities to vertically and horizontally align columns.

Vertical alignment

One of three columns

Horizontal alignment

One of two columns

Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

.col-9
.col-4Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6Subsequent columns continue along the new line.

Column breaks

Breaking columns to a new line in flexbox requires a small hack: add an element with wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple s, but not every implementation method can account for this.

.col-6 .col-sm-3
.col-6 .col-sm-3

You may also apply this break at specific breakpoints with our responsive display utilities.

.col-6 .col-sm-4
.col-6 .col-sm-4

Accessibility

Вёрстка

Ensure that all form controls have an appropriate accessible name so that their purpose can be conveyed to users of assistive technologies. The simplest way to achieve this is to use a element, or—in the case of buttons—to include sufficiently descriptive text as part of the content.

For situations where it’s not possible to include a visible or appropriate text content, there are alternative ways of still providing an accessible name, such as:

elements hidden using the class
Pointing to an existing element that can act as a label using
Providing a attribute
Explicitly setting the accessible name on an element using

If none of these are present, assistive technologies may resort to using the attribute as a fallback for the accessible name on and elements. The examples in this section provide a few suggested, case-specific approaches.

While using visually hidden content (, , and even content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.

Quick start

Looking to quickly add Bootstrap to your project? Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files? Head to the downloads page.

JS

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper, and our own JavaScript plugins. We use jQuery’s slim build, but the full version is also supported.

Place one of the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper, and then our JavaScript plugins.

Bundle

Include every Bootstrap JavaScript plugin with one of our two bundles. Both and include Popper for our tooltips and popovers, but not jQuery. Include jQuery first, then a Bootstrap JavaScript bundle. For more information about what’s included in Bootstrap, please see our section.

Separate

If you decide to go with the separate scripts solution, Popper must come first (if you’re using tooltips or popovers), and then our JavaScript plugins.

Components

Curious which components explicitly require jQuery, our JavaScript, and Popper? Click the show components link below. If you’re unsure about the page structure, keep reading for an example page template.

Show components requiring JavaScript

Alerts for dismissing
Buttons for toggling states and checkbox/radio functionality
Carousel for all slide behaviors, controls, and indicators
Collapse for toggling visibility of content
Dropdowns for displaying and positioning (also requires Popper)
Modals for displaying, positioning, and scroll behavior
Navbar for extending our Collapse plugin to implement responsive behavior
Tooltips and popovers for displaying and positioning (also requires Popper)
Scrollspy for scroll behavior and navigation updates

Static Controls

You can create a static control like this:

<%= f.static_control :email %>

Here’s the output for a horizontal layout:

<div class="form-group">
  <label class="col-sm-2 form-control-label" for="user_email">Email</label>
  <div class="col-sm-10">
    <input class="form-control-plaintext" id="user_email" name="user" readonly="readonly" type="text" value="test@email.com"/>
  </div>
</div>

You can also create a static control that isn’t based on a model attribute:

<%= f.static_control :field_name, label: "Custom Static Control", value: "Content Here" %>

may be any name that isn’t already used in the form. Note that you may get «unpermitted parameter» messages in your log file with this approach.

You can also create the static control the following way, if you don’t need to get the value of the static control as a parameter when the form is submitted:

<%= f.static_control label: "Custom Static Control", value: "Content Here", name: nil %>

(If you neither provide a field name nor , the Rails code that submits the form will give a JavaScript error.)

Prior to version 4 of , you could pass a block to the method.
The value of the block would be used for the content of the static «control».
Bootstrap 4 actually creates and styles a disabled input field for static controls, so the value of the control has to be specified by the option.
Passing a block to no longer has any effect.

Form Helper Options

Many of the helpers accept the same options. The exceptions are:

,
,
,
,
,
,
,
,
,
,
,
,
,
,
,

The options for the form helpers that aren’t in the exceptions list are described in the following sub-sections:

Labels

Use the option if you want to specify the field’s label text:

<%= f.password_field :password_confirmation, label: "Confirm Password" %>

To hide a label, use the option. This adds the
class, which keeps your labels accessible to those using screen readers.

<%= f.text_area :comment, hide_label: true, placeholder: "Leave a comment..." %>

To add custom classes to the field’s label:

<%= f.text_field :email, label_class: "custom-class" %>

Or you can add the label as input placeholder instead (this automatically hides the label):

<%= f.text_field :email, label_as_placeholder: true %>

Input Elements / Controls

To specify the class of the generated input tag, use the option:

<%= f.text_field :email, control_class: "custom-class" %>

Help Text

To add help text, use the option:

<%= f.password_field :password, help: "Must be at least 6 characters long" %>

This generates:

<small class="form-text text-muted">Must be at least 6 characters long</small>

This gem is also aware of help messages in locale translation files (i18n):

en:
  activerecord:
    help:
      user:
        password: "A good password should be at least six characters long"

Help translations containing HTML should follow the convention of appending to the name:

en:
  activerecord:
    help:
      user:
        password_html: "A <strong>good</strong> password should be at least six characters long"

If your model name has multiple words (like ), the key on the
translation file should be underscored ().

You can override help translations for a particular field by passing the
option or turn them off completely by passing .

Prepending and Appending Inputs

You can pass and/or options to input fields:

<%= f.text_field :price, prepend: "$", append: ".00" %>

If you want to attach multiple items to the input, pass them as an array:

<%= f.text_field :price, prepend: , append:  %>

You can also prepend and append buttons. Note: The buttons must contain the
class to generate the correct markup.

<%= f.text_field :search, append: link_to("Go", "#", class: "btn btn-secondary") %>

To add a class to the input group wrapper, use the option.

<%= f.email_field :email, append: f.primary('Subscribe'), input_group_class: 'input-group-lg' %>

Additional Form Group Attributes

Bootstrap mark-up dictates that most input field types have the label and input wrapped in a .

If you want to add an additional CSS class or any other attribute to the form group div, you can use the option.

<%= f.text_field :name, wrapper: { class: 'has-warning', data: { foo: 'bar' } } %>

Which produces the following output:

<div class="form-group has-warning" data-foo="bar">
  <label class="form-control-label" for="user_name">Id</label>
  <input class="form-control" id="user_name" name="user" type="text">
</div>

If you only want to set the class on the form group div, you can use the option. It’s just a short form of .

Suppressing the Form Group Altogether

You may want to define your own form group div around a field. To do so, add the option to the input field. For example:

f.form_group :user do
  f.email_field :email, wrapper: false
end

Note that Bootstrap relies on the form group div to correctly format most fields, so if you use the option, you should provide your own form group div around the input field. You can write your own HTML, or use the helper.

Доступность

Убедитесь, что у всех элементов управления формы есть подходящие доступные имена, чтобы их назначение можно было донести до пользователей вспомогательных технологий. Самый простой способ добиться этого — использовать элемент или в случае кнопок — включить достаточно описательный текст как часть содержимого .

В ситуациях, когда невозможно включить видимую метку или соответствующее текстовое содержимое, есть альтернативные способы предоставления доступного имени, например:

Элементы скрыты с помощью класса
Указание на существующий элемент, который может действовать как метка, используя
Предоставление атрибута
Явная установка доступного имени для элемента с помощью

Если ни один из них не присутствует, вспомогательные технологии могут прибегнуть к использованию атрибута в качестве запасного варианта для доступного имени в элементах и . Примеры в этом разделе представляют несколько предлагаемых подходов для конкретных случаев.

Несмотря на то, что использование визуально скрытого содержимого (содержимое , и даже , которое исчезает после того, как в поле формы появляется содержимое) принесет пользу пользователям вспомогательных технологий, отсутствие видимого текста метки все же может быть проблематично для некоторых пользователей. Как правило, лучше всего подходят видимые метки в той или иной форме как с точки зрения доступности, так и удобства использования.

Button plugin

The button plugin allows you to create simple on/off toggle buttons.

Visually, these toggle buttons are identical to the . However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as “checked”/“not checked” (since, despite their appearance, they are fundamentally still checkboxes), whereas these toggle buttons will be announced as “button”/“button pressed”. The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.

Toggle states

Add to toggle a button’s state. If you’re pre-toggling a button, you must manually add the class and to ensure that it is conveyed appropriately to assistive technologies.

Toggle button
Active toggle button
Disabled toggle button

Methods

You can create a button instance with the button constructor, for example:

Method	Description
	Toggles push state. Gives the button the appearance that it has been activated.
	Destroys an element’s button. (Removes stored data on the DOM element)
	Static method which allows you to get the button instance associated to a DOM element, you can use it like this:
	Static method which returns a button instance associated to a DOM element or create a new one in case it wasn’t initialised. You can use it like this:

For example, to toggle all buttons

Customizing the grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns can be modified via Sass variables. is used to generate the widths (in percent) of each individual column while sets the width for the column gutters.

Grid tiers

Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the and to something like this:

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in (not , , or ).

Community

Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

Read and subscribe to The Official Bootstrap Blog.
Join the official Slack room.
Chat with fellow Bootstrappers in IRC. On the server, in the channel.
Implementation help may be found at Stack Overflow (tagged ).
Developers should use the keyword on packages that modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.

Disabled state

Make buttons look inactive by adding the boolean attribute to any element. Disabled buttons have applied to, preventing hover and active states from triggering.

Primary button
Button

Disabled buttons using the element behave a bit different:

s don’t support the attribute, so you must add the class to make it visually appear disabled.
Some future-friendly styles are included to disable all on anchor buttons.
Disabled buttons should include the attribute to indicate the state of the element to assistive technologies.

Link functionality caveat

The class uses to try to disable the link functionality of s, but that CSS property is not yet standardized. In addition, even in browsers that do support , keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to , also include a attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether.

Inline Custom Form Controls

If you want the custom form controls to sit side by side (inline), add the to the wrapper/container:

Custom radio

Example

<form> <div class=»custom-control custom-radio
custom-control-inline»>
<input type=»radio» class=»custom-control-input» id=»customRadio»
name=»example» value=»customEx»>    <label
class=»custom-control-label» for=»customRadio»>Custom radio
1</label>
</div> <div class=»custom-control custom-radio
custom-control-inline»>
<input type=»radio» class=»custom-control-input» id=»customRadio2″
name=»example» value=»customEx»>    <label
class=»custom-control-label» for=»customRadio2″>Custom radio
2</label>
</div> </form>

Горизонтальная форма

Вы можете использовать классы сетки Bootstrap для создания горизонтальных форм. Просто укажите, сколько колонок должен занимать каждый элемент. В частности, добавьте класс .row к .form-group и класс .col-*-* или .col-* для каждой колонки.

Вы также должны добавить класс .col-form-label к элементу <label>, чтобы метка относительно текстовых полей расположилась по центру вертикали.

Bootstrap 4 против Bootstrap 3

Когда речь идёт о горизонтальных формах, имеются некоторые незначительные различия между Bootstrap 4 и Bootstrap 3.

Сетки
При использовании сеток для макета формы, Bootstrap 4 требует класс .row. Этот класс не является обязательным для форм Bootstrap 3 (хотя по прежнему обязателен для сеток Bootstrap 3).
Метки
Bootstrap 4 использует .col-form-label в сетке макета формы, тогда как Bootstrap 3 использует .control-label

Обратите внимание, что Bootstrap 4 изначально использовал .form-control-label, но впоследствии заменил его на .col-form-label.
Класс .form-horizontal
Bootstrap 3 требует класс .form-horizontal, тогда как Bootstrap 4 нет.

Checkboxes and Radios

Checkboxes and radios should be placed inside of a to render
properly. The following example ensures that the entire form group will display
an error if an associated validations fails:

<%= f.form_group :skill_level, label: { text: "Skill" }, help: "Optional Help Text" do %>
  <%= f.radio_button :skill_level, 0, label: "Novice", checked: true %>
  <%= f.radio_button :skill_level, 1, label: "Intermediate" %>
  <%= f.radio_button :skill_level, 2, label: "Advanced" %>
<% end %>

<%= f.form_group :terms do %>
  <%= f.check_box :terms, label: "I agree to the Terms of Service" %>
<% end %>

You can also create a checkbox using a block:

<%= f.form_group :terms, label: { text: "Optional Label" } do %>
  <%= f.check_box :terms do %>
    You need to check this box to accept our terms of service and privacy policy
  <% end %>
<% end %>

To display checkboxes and radios inline, pass the option:

<%= f.form_group :skill_level, label: { text: "Skill" } do %>
  <%= f.radio_button :skill_level, 0, label: "Novice", inline: true %>
  <%= f.radio_button :skill_level, 1, label: "Intermediate", inline: true %>
  <%= f.radio_button :skill_level, 2, label: "Advanced", inline: true %>
<% end %>

Check boxes and radio buttons are wrapped in a . You can add classes to this with the option:

<%= f.radio_button :skill_level, 0, label: "Novice", inline: true, wrapper_class: "w-auto" %>

To render checkboxes as switches with Bootstrap 4.2+, use :

<%= f.check_box :remember_me, custom: :switch %>

Collections

also provides helpers that automatically create the
and the s or es for you:

<%= f.collection_radio_buttons :skill_level, Skill.all, :id, :name %>
<%= f.collection_check_boxes :skills, Skill.all, :id, :name %>

NOTE: These helpers do not currently support a block, unlike their equivalent Rails helpers. See issue #477. If you need to use the block syntax, use or for now.

Collection methods accept these options:

: Customize the ‘s label
: Pass true to hide the ‘s label
: Add a help span to the
Other options will be forwarded to the / method

Other Tips and Edge Cases

By their very nature, forms are extremely diverse. It would be extremely difficult to provide a gem that could handle every need. Here are some tips for handling edge cases.

Empty But Visible Labels

Some third party plug-ins require an empty but visible label on an input control. The option generates a label that won’t appear on the screen, but it’s considered invisible and therefore doesn’t work with such a plug-in. An empty label (e.g. ) causes the underlying Rails helper to generate a label based on the field’s attribute’s name.

The solution is to use a zero-width character for the label, or some other «empty» HTML. For example:

label: "&#8203;".html_safe

label: "<span></span>".html_safe

Строка формы

Вы можете заменить .row на .form-row для более компактной компоновки.

Block buttons

Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.

Button
Button

Here we create a responsive variation, starting with vertically stacked buttons until the breakpoint, where replaces the class, thus nullifying the utility. Resize your browser to see them change.

Button
Button

You can adjust the width of your block buttons with grid column width classes. For example, for a half-width “block button”, use . Center it horizontally with , too.

Button
Button

Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we’ve taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they’re no longer stacked.

Button
Button

Custom Select Menu Size

Use the class to create a small select menu and the class for a large one:

Small Custom Select MenuVolvoFiatAudiDefault Custom Select MenuVolvoFiatAudiLarge Custom Select MenuVolvoFiatAudi

Example

<form> <!— Small —> <select name=»cars» class=»custom-select-sm»>
<option selected>Small Custom Select Menu</option>    <option
value=»volvo»>Volvo</option>    <option value=»fiat»>Fiat</option>
<option value=»audi»>Audi</option> </select> <!— Large —> <select name=»cars» class=»custom-select-lg»>
<option selected>Large Custom Select Menu</option>    <option
value=»volvo»>Volvo</option>    <option value=»fiat»>Fiat</option>
<option value=»audi»>Audi</option> </select></form>

Auto-layout columns

Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like .

Equal-width

For example, here are two grid layouts that apply to every device and viewport, from to . Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

Variable width content

Use classes to size columns based on the natural width of their content.

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

Responsive breakpoints

Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.

Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.

Since we write our source CSS in Sass, all our media queries are available via Sass mixins:

We occasionally use media queries that go in the other direction (the given screen size or smaller):

Note that since browsers do not currently support , we work around the limitations of and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.

Once again, these media queries are also available via Sass mixins:

There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

These media queries are also available via Sass mixins:

Similarly, media queries may span multiple breakpoint widths:

The Sass mixin for targeting the same screen size range would be:

Form text

Block-level or inline-level form text can be created using .

Associating form text with form controls

Form text should be explicitly associated with the form control it relates to using the attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.

Form text below inputs can be styled with . If a block-level element will be used, a top margin is added for easy spacing from the inputs above.

Inline text can use any typical inline HTML element (be it a , , or something else) with nothing more than the class.

Bootstrap Checkboxes

Checkboxes are used if you want the user to select any number of options from
a list of preset options.

The following example contains three checkboxes. The last option is disabled:

Example

<div class=»form-check»> <label class=»form-check-label»>
<input type=»checkbox» class=»form-check-input» value=»»>Option 1
</label></div><div class=»form-check»> <label
class=»form-check-label»>    <input type=»checkbox»
class=»form-check-input» value=»»>Option 2 </label></div>
<div class=»form-check»> <label class=»form-check-label»>
<input type=»checkbox» class=»form-check-input» value=»» disabled>Option 3
</label></div>

Example explained

Use a wrapper element with to ensure proper margins for labels and checkboxes.

Add the class to label elements, and to style checkboxes properly inside the container.

Rich Text Areas AKA Trix Editor

If you’re using Rails 6, supports the helper.

<%= f.rich_text_area(:life_story) %>

will be rendered as:

<div class="form-group">
  <label for="user_life_story">Life story</label>
  <input type="hidden" name="user" id="user_life_story_trix_input_user"/>
  <trix-editor id="user_life_story" data-blob-url-template="http://test.host/rails/active_storage/blobs/:signed_id/:filename" data-direct-upload-url="http://test.host/rails/active_storage/direct_uploads" input="user_life_story_trix_input_user" class="trix-content form-control"/>
  </trix-editor>
</div>

Important globals

Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your .

You can see an example of this in action in the .

Box-sizing

For more straightforward sizing in CSS, we switch the global value from to . This ensures does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

With the above snippet, nested elements—including generated content via and —will all inherit the specified for that .

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

More Bootstrap Form Templates for Free use

Designer: Asanti82

Form features:

Functional form design
Fully responsive

Designer: Julie Park

Form features:

Adaptable to any web-page sidebar
Nice color scheme
Interactive elements

33. Step-by-Step Form Interaction

Designer: Bhakti Al Akbar

Form features:

Step by step guidance
Quickly get feedback from the user
Custom styled submit button

Designer: llgruff

Form features:

Fancy header with available cards

Designer: Caspian Seagull

Form features:

Consistent animation
Interactive layout
Large textboxes

Designer: Alessandro Falchi

Form features:

Sliding label effect
Interactive layout

Designer: Andy Tran

Form features:

Material inspired login form
2 panels: log in panel and registration panel

38. Multi-Step Form with Progress Bar Using jQuery and CSS3

Designer: Eric

Form features:

Smaller logic sections
Multiple-step form with a cool progress bar
Suitable for registration, checkout, profile fillups and 2-factor authentication logins

39. Sign-Up/Login Form

Designer: Eric

Form features:

Easy to switch from sign up to log in
Solid color buttons
Four input areas
Tabs and floating form labels