Bootstrap for Contact Form 7 – WordPress plugin Free download

Click to Download

Bootstrap for Contact Form 7

Description

Bootstrap for Contact Form 7 modifies all the output of the popular Contact Form 7 plugin to be fully compatible with the current version 3 of the popular CSS framework Bootstrap. What this means to you as a Bootstrap user: No additional CSS rules necessary – from now on, Contact Form 7 integrates seamlessly with the overall Bootstrap design. It is even possible to use different form layouts via Contact Form 7’s “Additional Settings” tab.

This plugin is an addon to Contact Form 7.
The plugin requires Contact Form 7 to be activated, otherwise it won’t change anything. Furthermore you should be using it in conjunction with a Bootstrap-based WordPress theme, otherwise the forms might look weird (and there would be no point in using this addon anyway).

Usage

Bootstrap for Contact Form 7 does not provide additional options itself, so you can continue using Contact Form 7 (almost) the same way you did before.

The plugin will not break your form’s appearance, however it is recommended to adjust the contact form shortcodes to achieve perfect results: Generally, you should not be using HTML tags any longer to wrap the field shortcodes. They already include the complete Bootstrap-ready markup, including displaying labels. Read the Setup Guide for a quick introduction.

Advanced Features

The plugin brings some additional useful features to enhance your forms even more:

the form layout can be changed to a horizontal or inline one
the form’s input size can be globally changed
checkbox and radio groups can be displayed either one per line, inline or as Bootstrap buttons
text inputs and textareas support Bootstrap’s input group feature to add content before or after them
text inputs and textareas can show a character count (the [count] shortcode from Contact Form 7) inline
the captcha input field can show the captcha image inline
by using GET parameters in a URL to a contact form, field values can be predefined

The above features are explained in detail on the Other Notes page.

Basic Idea behind the Plugin

Lots of WordPress Themes are based on Bootstrap – and while it is the general approach to use CSS rules to style your HTML content, it is also possible the other way around – with many benefits.

When using a well-known framework which provides general styles for all the important components of a website, it can be time-consuming to apply the same styles to third-party plugins which (obviously) have not been written with a framework in mind. This is perfectly fine, but if you’re using Bootstrap for your WordPress theme, you will certainly love the fact that you do not need to write CSS rules for the Contact Form 7 plugin any longer. It will all look like Bootstrap from the beginning so that it fits into your website design. If you’re not using Bootstrap, this plugin is useless for you – but maybe you’re just having an idea how you can adjust another popular WordPress plugin to integrate with another well-written CSS framework.

Advanced Features

Additional Settings

Here you find additional settings which are part of the Bootstrap for Contact Form 7 plugin. If you want to learn more about the additional settings of the original Contact Form 7 plugin, please visit this page.

You can adjust several form properties (properties that affect an entire form, not just a single field of it) to give your forms the appearance you want. Here is a list of the properties, what they do and their possible values:

layout – adjusts the form’s layout (note that in most cases the inline form will need additional styling to look good); valid values: ‘default’, ‘inline’, ‘horizontal’; default value: ‘default’
size – adjusts the size of all input fields; valid values: ‘default’, ‘small’, ‘large’; default value: ‘default’
group_layout – adjusts the layout of checkbox and radio groups; valid values: ‘default’, ‘inline’, ‘buttons’; default value: ‘default’
group_type – adjusts the color of checkbox and radio groups with buttons layout; valid values: ‘default’, ‘primary’, ‘success’, ‘info’, ‘warning’, ‘danger’; default value: ‘default’
submit_size – adjusts the size of the submit button; valid values: ‘default’, ‘small’, ‘large’ or an empty string to force it to have the size defined in the size form property; default value is an empty string
submit_type – adjusts the color of the submit button; valid values: ‘default’, ‘primary’, ‘success’, ‘info’, ‘warning’, ‘danger’; default value: ‘primary’
required_html – adjusts the HTML output to append to required fields’ labels; valid values: any HTML output; default value: <span class="required">*</span>
grid_columns – allows you to override the total grid column count of Bootstrap (you might only need to adjust this if you’re using a custom version of Bootstrap); valid values: any integer greater than 1; default value: 12
label_width – adjusts the form’s label width (applies only to horizontal layout); valid values: any integer between 1 and the value of grid_columns minus 1; default value: 3
breakpoint – adjusts the responsive breakpoint (applies only to horizontal layout); valid values: ‘xs’, ‘sm’, ‘md’, ‘lg’; default value: ‘sm’

There are four methods to adjust the above properties: The easiest one is to use the “Additional Settings” tab when editing a form in Contact Form 7 and insert any property and its desired value there, one per line. For example:

layout:horizontal
size:large
group_layout:inline

Alternatively you can use the filter cf7bs_form_{{FORM_ID}}_properties where {{FORM_ID}} must be replaced by the ID of the form you would like to modify (you find that number in the overall form’s shortcode). An array of all the properties and their values is passed to that function so that you can easily adjust them. Example (in this case we would adjust the contact form with the ID 3):

function my_custom_form_properties( $properties ) {
    $properties['layout'] = 'horizontal';
    $properties['size'] = 'large';
    $properties['group_layout'] = 'inline';
    return $properties;
}
add_filter( 'cf7bs_form_3_properties', 'my_custom_form_properties' );

The third way does something slightly different from the other two since it does not change a specific form’s properties, but the default properties for all forms. To do that, you should use the filter cf7bs_default_form_properties which works exactly like the other filter mentioned above.

The fourth method is different from the others as it allows to override the form settings on a per-field basis. You can add any of the setting names plus its intended value as a shortcode attribute for any field to make this field behave differently from the form’s setting. This can be especially helpful if you need to create advanced form layouts like when you need multiple fields on the same line. For example, you could do the following to display two fields in one row, even though the form’s layout is set to ‘default’:

<div class="form-group row">
    <div class="col-md-6"><label for="user-first-name">First Name</label>[text user_first_name id:user-first-name layout:none][/text]</div>
    <div class="col-md-6"><label for="user-last-name">Last Name</label>[text user_last_name id:user-last-name layout:none][/text]</div>
</div>

Note that the custom form filter takes precedence over the properties defined in the admin, while the default filter is just used as fallback.

Input Groups

All textual input fields support the input group feature that Bootstrap provides. To use it, add a shortcode-like construct (almost, but it has to use curly braces instead) into the content of any text / email / url / tel input shortcode. Example:

[text twitter-username]{input_before}@{/input_before}Your Twitter Handle[/text]

Note that the input_before and input_after can also be added to textareas. In this case, the content will be displayed directly above or below the textarea respectively.

Submit Button Alignment

The submit button can be aligned left, center or right to fit your form’s desired appearance. Simply provide an align option with either ‘left’, ‘center’ or ‘right’ as value. Example:

[submit align:right "Send"]

Inline Character Count

Contact Form 7 provides a [count] shortcode that renders a number indicating how many characters have been entered or how many characters are remaining in a specific input field. Using it on its own looks kind of ugly though. But guess what, you can adjust that too by adding an option include_count to any text / email / url / tel / textarea input. You can optionally specify a value for that option as well which can consist of the positioning (‘before’ or ‘after’) and the count direction (‘up’ or ‘down’) of the counter. Just as a reminder, when choosing ‘down’, make sure you give the input element a maximum length, otherwise there is no point in having that counter. Example:

[text your-text maxlength:80 include_count:after:down]Your Text[/text]

Good job.

Leave a Reply

Your email address will not be published. Required fields are marked *