Layers Framework: Forms

Layers Framework

Last Updated: Time to Read: 5 minutes

Forms can be utilised in Layers two primary ways – statically through front-end styling or HTML structures, or internally via the Layers_Form_Elements functions.

This guide covers the following:

  1. Front-end structure of forms as they are rendered by using Layers_Form_Elements functions
  2. How to utilise Layers framework CSS and HTML form structure in Custom Meta fields or front-end forms.

This guide does not get into front-end form submission or data validation. See input() for how to build forms backend from within a plugin or widget for automatic processing.

When building HTML forms or including support for 3rd Party forms, the Layers Forms HTML and CSS framework can be referenced. This styling and structure can be applied to any form element in your extension or child theme, including Search fields, radio buttons, WooCommerce elements inputs or textareas. This reduces the amount of CSS you need to write by hand.

Form title using legend

@

.00

$.00

 

Contained form using .well .content

@

.00

$.00

This breakdown aims to demonstrate the default framework element structure and styling for rapidly building frames. Each framework class is shown here to demonstrate what using specific classes will grant you, and how to reset them with the correct selectors/styles when customizing. Form styles in their entirety can be referenced in framework.css.

form and fieldset

Each form area is wrapped in a div with the “grid” class. This is assuming your form is already inside of a primary <section> or <div> .  We follow this with the column wrapper, set to column span-6  since our example uses a 2-column layout. If your form intends to fill whatever space it is in, you don’t need the column wrapper.

Finally, we have the beginning of the form structure, which is a basic HTML5 form and fieldset.

The framework will automatically apply the following styling:

In the above example, the form does not take a class. You can add small  or large   to automatically adjust margins, font sizing and line-heights depending on if you want larger text(contact forms , etc) or smaller (login forms, inline forms, sidebar or widget forms). Reference

Input wrappers

form-row: Each form element is wrapped in a paragraph tag with this class.

This adds the following important properties automatically: (Reference )

See also default input type styling

label

The label is optional and has no pre-defined class. The framework adds the following automatically: (Reference)

Within thefieldset  is where you can begin adding form elements. These are standard HTML5 tags and input types which simply use Layers framework CSS classes to take advantage of pre-existing form styling. The type is important, as it ensures proper browser functionality of the control and handling of the submitted data (such as a password field).

input type=text

Text fields are for any free-form alpha-numeric input that is not covered by a more specific input type.

input type=email

Email type inputs are exclusively for collecting an email address.

input type=url

input type=password

You get the idea. See this reference on w3 for detailed explanations of all the available form field types, and reference input() for the types you can render via Layers_Form_Elements.

Specially styled Input types in Layers include buttons, addon fields, select, list and checkboxes. The following demonstrate how you can manipulate form layout using various helper CSS styles.

buttons

These are just like standard framework buttons. You can define size, font style and alignment via classes likebtn-small ,btn-link andpull-left , explained in the button guide.

input type=submit

Submit buttons go after the closing </fieldset>  tag and can be wrapped in another form-row , a custom wrapper, or a <div>  to alow grouping with elements such as checkboxes or radio buttons:

input type=checkbox

Checkboxes and Radio buttons are wrapped in a label to ensure the label is inline and given the correct font styling.

input type=radio

In keeping with the same structure, we wrap a standard <select>  group in a form-row paragraph.

Email fields can be enhanced by wrapping the input in a span with the
input-prepend
or
input-append
class. This is used in combination with the add-on class which is added to a span wrapping whichever text you want given the inset box style.

When using the add-on element, your input should take a span class to define its max width. The remaining column space is taken by the
add-on
span.

Theadd-on  span can come before or after the input. To place it to the right, useinput-append .

The add-on  element can be combined with any input type. For example, if your url field will already handle automatic prefixing of a url, you can use add-on  to suggest the http:// is already entered:

Inline fields can be used to position elements next to one another in a multi-column form. This is as simple as adding a span class to the input. Here we place a text input next to a submit input to create a submission form.

 

Forms can be instantiated and built from within a widget or template via a Layers Extension, which will pull in the styling and structure automatically.

Refer to Layers Form_Elements