Title: Manual Bootstrap form coding examples
Last modified: June 15, 2021

---

# Manual Bootstrap form coding examples

 *  [hommealone](https://wordpress.org/support/users/hommealone/)
 * (@hommealone)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/manual-bootstrap-form-coding-examples/)
 * As an alternative to Bootstrap for Contact Form 7, you can code your own HTML
   in Bootstrap format. (see: [https://getbootstrap.com/docs/4.3/components/forms/](https://getbootstrap.com/docs/4.3/components/forms/))
 * Here are a few examples:
 *     ```
       <div class="form-row">
       <p class="col col-sm-12"><span class="required">*</span><small class="text-muted"> = required field</small></p>
       <div class="col col-sm-12 response-region">[response]</div>
       <div class="form-group col col-sm-12">
         <label for="your-name">Name <sup class="required">*</sup></label>
         [text* your-name id:your-name class:form-control]
       </div>
       <div class="form-group col col-sm-12 col-md-6">
         <label for="your-email">Email <sup class="required">*</sup></label>
         [email* your-email id:your-mail class:form-control]
       </div>
       <div class="form-group col col-sm-12 col-md-6">
         <label for="your-phone">Phone <sup class="required">*</sup></label>
         [tel* your-phone id:your-phone class:form-control placeholder "10 digits please: ##########"]
       </div>
       <div class="form-group col col-sm-12">
         <label for="your-subject">Subject <sup class="required">*</sup></label>
         [text* your-subject id:your-subject class:form-control]
       </div>
       <div class="form-group col col-sm-12">
         <label for="your-message">Your Message <sup class="required">*</sup></label>
         [textarea* your-message id:your-message class:form-control x3]
       </div>
       <div class="col col-sm-12 response-region">[response]</div>
       <div class="col col-sm-12">[submit id:submit-button class:btn class:btn-secondary "Send"]</div>
       </div>
       ```
   
 * **_Notes:_**
    Each CF7 field element must have an id that is the same as the 
   field’s name. You can include this when creating the CF7 field, or add it to 
   the shortcode afterwards. That same value must be added as the label element’s“
   for” value.
 * Each text, textarea, phone, number, date and select field should be given a class
   value of “form-control”. Here again, you can add that value when you create the
   CF7 form element, or add it manually to the shortcode. (In the shortcode, each
   class that you add gets its own class:value pair. They are not combined.)
 * For checkbox and radio fields, do _not_ use the bootstrap form-control class.
   Let CF7 populate the code without it:
 *     ```
       <div class="form-group col col-sm-12">
         <label for="your-choices">Your Choices</label>
         [checkbox your-choices id:your-choices "Choice 1" "Choice 2" "Choice 3"]
       </div>
       <div class="form-group col col-sm-12">
         <label for="your-choice">Choose One</label>
         [radio your-choice id:your-choice "Choice 1" "Choice 2" "Choice 3"]
       </div>
       ```
   
 * An alternative to placeholder text:
 *     ```
       <div class="form-group col col-sm-12 col-md-6">
         <label for="your-phone">Phone <sup class="required">*</sup> <em class="text-muted small">- enter numerals only</em></label>
         [tel* your-phone-number id:your-phone class:form-control]
       </div>
       ```
   
 * Some basic styling:
 *     ```
       <style>
       .wpcf7 form .wpcf7-response-output {
       	margin: 0 0 1em;
       	padding: 0.4em 1em;
       	border: 1px solid #00a0d2;
       	border-radius: 5px;
       	background-color: rgba(255,255,255,0.5);
       	color: #000;
       	font-weight: bolder;
       }
       .wpcf7-not-valid {
       	border-color: #ffb900;
       	box-shadow: 0 0 0 .2rem rgba(255, 185, 0, 0.25);
       }
       .wpcf7-not-valid-tip {
       	font-style: italic;
       }
       label .small {
       	font-size: 90%;
       	font-weight: normal;
       }
       .required {
       	color: red;
       }
       </style>
       ```
   
 * If you have not done so already, disable or delete your ‘Bootstrap for Contact
   Form 7’ plugin!
    -  This topic was modified 4 years, 11 months ago by [hommealone](https://wordpress.org/support/users/hommealone/).
    -  This topic was modified 4 years, 11 months ago by [hommealone](https://wordpress.org/support/users/hommealone/).
    -  This topic was modified 4 years, 11 months ago by [hommealone](https://wordpress.org/support/users/hommealone/).

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [comonist34](https://wordpress.org/support/users/comonist34/)
 * (@comonist34)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/manual-bootstrap-form-coding-examples/#post-14788536)
 * you are great! ❤️
 *  Thread Starter [hommealone](https://wordpress.org/support/users/hommealone/)
 * (@hommealone)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/manual-bootstrap-form-coding-examples/#post-14788734)
 * [@comonist34](https://wordpress.org/support/users/comonist34/) – Glad this was
   helpful to someone!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Manual Bootstrap form coding examples’ is closed to new replies.

 * ![](https://ps.w.org/bootstrap-for-contact-form-7/assets/icon-256x256.png?rev
   =1021147)
 * [Bootstrap for Contact Form 7](https://wordpress.org/plugins/bootstrap-for-contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/bootstrap-for-contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/bootstrap-for-contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/bootstrap-for-contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/bootstrap-for-contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/bootstrap-for-contact-form-7/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [hommealone](https://wordpress.org/support/users/hommealone/)
 * Last activity: [4 years, 9 months ago](https://wordpress.org/support/topic/manual-bootstrap-form-coding-examples/#post-14788734)
 * Status: not a support question