Horje
This plugin modifies the output of the popular Contact Form 7 plugin to be styled in compliance with themes using the Bootstrap CSS framework.

Noted That:

  • To install correctly this bootstrap-for-contact-form-7.zip.
  • Fisrt Download the bootstrap-for-contact-form-7.zip to your computer
  • Extract/Open bootstrap-for-contact-form-7.zip to Your Computer.
  • Then, Find readme.txt file inside bootstrap-for-contact-form-7.zip and Open readme.txt.
  • Now, Read the Requirements of this plugin. Which Wordpress Version and PHP Version are required to run this Plugin in Your Wordpress Site.
  • Then, Follow the the Tips Below.

Start the Tips:

1. First Download "bootstrap-for-contact-form-7.zip" Plugin to your Local Computer. (Click Download)

2. Then, Login to your "yourdomain.com/wp-admin" Dashboard.

/stack/wp/e1593231376d7d849d2-4597-4fa3-a6ff-1eca18f72aab.png

3. Then, Click on "Plugins" + "Add New" from left sidemenu of Dashboard.

/stack/wp/e1593231378Screenshot20.png

4. Now, Click on "Upload Plugin" button.

/stack/wp/e1593231380Screenshot-2019-4-2AddPluginsHorjeWordPress.png

 

5. Now, Browse "bootstrap-for-contact-form-7.zip" Downloaded plugin from your computer, Where you downloaded bootstrap-for-contact-form-7.zip According to Step – 1 Above then, click on "Install Now"

/stack/wp/e15931461531577025694plugin.png

6. Now, Click on "Active Plugin"

/stack/wp/e15932313830ca45529-bf73-4101-8178-53ae60ce549f.png

7. Then, See left sidemenu. "Bootstrap for Contact Form 7" folder is added on left sidemenu. Now, Click on "Bootstrap for Contact Form 7" folder.

   Noted that: If you do not see "Bootstrap for Contact Form 7" folder on left sidemenu then, see at left sidemenu "Settings" or "Tools".

8. Now you configure yourself oR Watch video tutorial below about Bootstrap for Contact Form 7 Configurtions and Settings or How to work "Bootstrap for Contact Form 7" in your WordPress site.

 

oR

After Activated Plugin According to Step-6 then,

  1. Go to "Plugins" + "Installed Plugin" from Wordpress Admin Panel Leftside Menu.
  2. or Direct go to: https://yourdomain/wp-admin/plugins.php
  3. Then, Find "Bootstrap for Contact Form 7" Activated Plugin from Plugin List.
  4. Then, Click on "Settings" from Plugin that is Bootstrap for Contact Form 7
  5. Now, Edit/Add/Config the setting and Click on "Save Changes" button,
WP Plugin Setting



Guide

Download and Activation

  1. Either download the plugin from within your WordPress site, or download it manually and then upload the entire bootstrap-for-contact-form-7 folder to the /wp-content/plugins/ directory.
  2. Activate the plugin through the ‘Plugins’ menu in WordPress.

Setup Guide

While the shortcodes generally work the same like in the original plugin, there are a few things to consider. If you like to get started quickly, just copy/paste the content below and adjust it to get the form you like (the code below recreates the default form from Contact Form 7).

[text* your-name]Your Name[/text*]
[email* your-email]Your Email[/email*]
[text your-subject]Subject[/text]
[textarea your-message]Your Message[/textarea]
[submit "Send"]

The following are the most important things that are different in Bootstrap for Contact Form 7:

  1. Field labels are now integrated in the field shortcodes, so you don’t need to wrap them in paragraphs when editing the form. Instead, make the field shortcode enclosing and put the label text between the opening and closing tag. Example: [text* your-name]Your Name[/text*]
  2. You don’t need to use HTML tags any longer to give your form a layout. The field shortcodes handle this manually, so you should remove all HTML tags from the form editor. Of course you can still use HTML code to separate parts of your form, for example using the
    tag.

It is recommended to adjust the shortcodes to be conform with the explainations above to ensure perfect results with the plugin and Boostrap themes.

For details on everything else that you can do to enhance your forms even further, feel free to check out the Other Notes section.


plugin, themes, using, bootstrap, framework, compliance, form, modifies, output, popular,

Name

Reffered: https://wordpress.org/

Share on: