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/)

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.
• This topic was modified 4 years, 11 months ago by hommealone.
• This topic was modified 4 years, 11 months ago by hommealone.