Loading...

bS Contact Form 7

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.

    Required fields are marked *

    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 the class="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>
    
    [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]
    
    <button type="submit" class="btn btn-primary wpcf7-submit" disabled="disabled"><span class="spinner-border spinner-border-sm ajax-loader" role="status" aria-hidden="true"></span>Send Message</button>
    

    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

    6 Comments on “bS Contact Form 7”

    • cemali

      says:

      How do I add a phone number

      • Basti

        says:

        Use phone field in CF7

        [tel tel-834 class:form-control placeholder "Phone number"]
        
        • 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

    Comments are closed.

    To top