This plugin adds Bootstrap to radio buttons, checkboxes, alerts and a loading spinner to Contact Form 7. It is an additional plugin and does not replace Contact Form 7.
Usage
- Install Contact Form 7
- Download and install this Support plugin for it
- Setup your forms with HTML markup like below and replace with your data.
- Do not change the
id="gdpr"
of the acceptance and theclass="wpcf7-submit"
of the send button. Otherwise it will not work. When change this, you have to adjust it in the plugins folder js/contactform-script.js in lines 16 and 33 – 48.
Form HTML Markup
<p>Required fields are marked *</p>
<div class="row g-3 mb-3">
<div class="col-12">
[radio radio-gender use_label_element default:1 "Mrs." "Mr." "Other"]
</div>
<div class="col-md-6">
[text* your-name class:form-control placeholder "Name*"]
</div>
<div class="col-md-6">
[email* your-email class:form-control placeholder "Email*"]
</div>
<div class="col-md-6">
[select* menu-592 class:form-select first_as_label "Option" "1" "2" "3" "4" "5"]
</div>
<div class="col-md-6">
[file file-388 class:form-control id:form-file limit:5mb filetypes:jpg|jpeg|JPEG|png]
</div>
<div class="col-12">
[text your-subject class:form-control placeholder "Subject"]
</div>
<div class="col-12">
[textarea your-message class:form-control placeholder "Message"]
</div>
<div class="col-12">
[acceptance acceptance-789 id:gdpr class:form-check-input use_label_element]I have read the <a href="https://yourdomain.com/privacy-policy/" target="_blank">privacy policy</a> note. I consent to the electronic storage and processing of my entered data to answer my request. Note: You can revoke your consent at any time in the future by emailing <a href="mailto:mail@yourdomain.com">mail@yourdomain.com</a>.[/acceptance]
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary wpcf7-submit w-100" disabled="disabled">Send Message</button>
</div>
</div>
Mail recipient HTML markup
<h1>Inquiry contact form on [_site_title]</h1>
<h2>Contact details</h2>
<strong>Gender:</strong> [radio-gender]
<strong>Name:</strong> [your-name]
<strong>Email:</strong> [your-email]
<strong>Option:</strong> [menu-592]
<strong>File:</strong> [file-388]
<strong>Subject:</strong> [your-subject]
<strong>Message:</strong>
[your-message]
--
This email was sent from a contact form on [_site_title]
Company name
Street
City
Email: mail@yourdomain.com
Phone: 1234567
Mail sender HTML markup
Hello [your-name],
thank you for contacting us. We will answer you as soon as possible.
Here is a copy of your message to us:
<h2>Contact details</h2>
<strong>Gender:</strong> [radio-gender]
<strong>Name:</strong> [your-name]
<strong>Email:</strong> [your-email]
<strong>Option:</strong> [menu-592]
<strong>File:</strong> [file-388]
<strong>Subject:</strong> [your-subject]
<strong>Message:</strong>
[your-message]
--
This email was sent from a contact form on [_site_title]
Company name
Street
City
Email: mail@yourdomain.com
Phone: 1234567
Changelog
Earlier versions can be downloaded via the Github repository. Install/downgrade via the plugin uploader.
Load version on Github
- [IMPROVEMENT] Reformatted all files
- [NEW] Display checks and radios inline
- [UPDATE] Ready for CF7 5.4
Load version on Github
- [BUGFIX] Hide alert on form submitting
- [NEW] Added README.md
- [NEW] Included Update Checker
Load version on Github
- [SEO] Load js in footer
Load version on Github
- Initial release
cemali
says:How do I add a phone number
Basti
says:Use phone field in CF7
cemali
says:[tel* tel-60 class:form-control placeholder “Telefon*”]
not working
Basti
says:Please provide a site link, then I can check it.
cemali
says:Thank you. 🙂 Message body: Telephone: [tel-60] is working.
Nam Nguyen Ba Hoang
says:Thanks, that’s very nice addon