If your WordPress theme uses the Bootstrap 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.
All of the available WS Form field types are fully compatible with Bootstrap.
To view a demo of a WS Form outputting a form for the Bootstrap framework, click here.
WS Form supports the following versions of Bootstrap:
Configuring WS Form to Use Bootstrap Framework
When you first install WS Form, it will scan your theme files and if Bootstrap is detected it will automatically output your form using Bootstrap markup.
To manually select Bootstrap as your framework:
- Click on ‘WS Form’ in the WordPress administration menu.
- Click on ‘Settings‘.
- Click on the ‘Advanced’ tab.
- Select ‘Bootstrap’ under the ‘Framework’ dropdown.
- Click ‘Save’.
An example of the HTML output for a tel field is shown below (includes some additional markup required by WS Form).
<div class="col-6 col-md-3 form-group" id="wsf-1-field-wrapper-6" data-id="6" data-type="tel"> <label id="wsf-1-label-6" for="wsf-1-field-6">Phone</label> <input type="tel" id="wsf-1-field-6" name="field_6" class="form-control" aria-labelledby="wsf-1-label-6"> <div id="wsf-1-invalid-feedback-6" class="invalid-feedback">Please provide a valid phone number.</div> </div>