Foundation

Foundation is a responsive front-end framework. Foundation provides a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface elements, as well as optional functionality provided by JavaScript extensions. Many popular WordPress themes use Foundation.

If your WordPress theme uses the Foundation framework, WS Form can output forms that containĀ  HTML markup that is native to that framework. This means that WS Form physically changes the HTML so that your form dovetails seamlessly into your theme.

In addition to output native markup, WS Form will also change the breakpoint selector to match the available breakpoints in Foundation. This feature is only available in WS Form PRO.

All of the available WS Form field types are fully compatible with Foundation.

Demo

To view a demo of a WS Form outputting a form for the Foundation framework, click here.

WS Form Frameworks - Foundation - Demo

Supported Versions

WS Form supports the following versions of Foundation:

Configuring WS Form to Use Foundation Framework

Automatic

When you first install WS Form, it will automatically scan your theme files and if Foundation is detected it will automatically output your form using Foundation markup.

Manual

To manually select Foundation as your framework:

WS Form Frameworks - Foundation - Settings

  1. Click on ‘WS Form’ in the WordPress administration menu.
  2. Click on ‘Settings‘.
  3. Click on the ‘Advanced’ tab.
  4. Select ‘Foundation’ under the ‘Framework’ dropdown.
  5. Click ‘Save’.

Sample Output

An example of the HTML output for a tel field is shown below (includes some additional markup required by WS Form).

<div class="small-6 medium-3 cell" id="wsf-1-field-wrapper-7" data-id="7" data-type="tel">
	<label id="wsf-1-label-7" for="wsf-1-field-7">
		Phone
		<input type="tel" id="wsf-1-field-7" name="field_7" aria-labelledby="wsf-1-label-7" aria-describedby="wsf-1-invalid-feedback-7">
		<span id="wsf-1-invalid-feedback-7" data-form-error-for="wsf-1-field-7" class="form-error" role="alert">Please provide a valid phone number.</span>
	</label>
</div>