How to use Contact Form 7 and styles as Bootstrap’s Horizontal

Viewing 2 posts - 1 through 2 (of 2 total)
  • #19974
    DidntGetIT
    Participant

    On your demo-page Contact Us you write:

    The form below was generated with the Contact Form 7 plugin and styles as Bootstrap’s Horizontal Form.

    And the demo-form looks nice with same length inputboxes and responsiv..

    But at Bootstraps Horizontal Form the code is like this:

    <form class="form-horizontal" role="form">
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <div class="checkbox">
            <label>
              <input type="checkbox"> Remember me
            </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default">Sign in</button>
        </div>
      </div>
    </form>

    And in Contact Form 7 the basic code/syntax is like this (danish):

    <p>Dit navn (skal udfyldes)<br />
        [text* your-name] </p>
    
    <p>Din e-mail (skal udfyldes)<br />
        [email* your-email] </p>
    
    <p>Emne<br />
        [text your-subject] </p>
    
    <p>Din besked<br />
        [textarea your-message] </p>
    
    <p>[submit "Send"]</p>

    Can you please give me just one “full-code-example” that shows how you use/add the Bootstrap styles to a CF7-element in the Contact Form 7 Formular edditor? fx.:

    <p>Din e-mail (skal udfyldes)<br />
        [email* your-email] </p>

    Thanks!

    #19993
    Daniel Tara
    Keymaster

    Here is the code used in the theme demo’s contact page:

    <div class="form-horizontal">
    	<div class="form-group">
    		<label for="name" class="col-sm-3 control-label">Your Name <span class="text-danger">*</span></label>
    		<div class="col-sm-9">
    			[text* name class:form-control id:name]
    		</div>
    	</div>
    	
    	<div class="form-group">
    		<label for="email" class="col-sm-3 control-label">Your Email <span class="text-danger">*</span></label>
    		<div class="col-sm-9">
    			[email* email class:form-control id:email]
    		</div>
    	</div>
    	
    	<div class="form-group">
    		<label for="subject" class="col-sm-3 control-label">Subject <span class="text-danger">*</span></label>
    		<div class="col-sm-9">
    			[text* subject class:form-control id:subject]
    		</div>
    	</div>
    	
    	<div class="form-group">
    		<label for="message" class="col-sm-3 control-label">Your Message <span class="text-danger">*</span></label>
    		<div class="col-sm-9">
    			[textarea* message class:form-control id:message 40x5]
    		</div>
    	</div>
    
    	<div class="form-group">
    		<div class="col-sm-offset-3 col-sm-9">
    			[submit class:btn class:btn-primary "Send Message"]
    		</div>
    	</div>
    </div>
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.