Last active
May 16, 2016 14:02
-
-
Save joemcgill/6888764 to your computer and use it in GitHub Desktop.
Boilerplate form code for the WP Contact Forms 7 plugin that makes use of Bootstrap styles
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="form-group"> | |
<label for="your-name">My Name</label>[text your-name class:form-control] | |
</div> | |
<div class="form-group"> | |
<label for="your-email">Email Address</label>[email your-email class:form-control] | |
</div> | |
<div class="form-group"> | |
<label for="your-message">Your Message</label>[textarea your-message class:form-control] | |
</div> | |
<div class="form-group"> | |
[submit class:btn class:btn-primary "Submit"] | |
</div> |
Thank you for this shortcode!
Strong advise adding class to label and input-group-addon (icon from font-awesome)
<form role="form" id="feedbackForm">
<div class="form-group">
<label for="username" class="control-label">Full Name</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" name="fullname" id="fullname" />
</div>
</div>
<div class="form-group">
<label for="username" class="control-label">Email Address</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="email" class="form-control" name="fullname" id="fullname" />
</div>
</div>
<div class="form-group">
<label for="username" class="control-label">Message</label>
<div class="input-group">
<textarea rows="5" id="message" name="message"></textarea>
</div>
</div>
<button type="submit" id="feedbackSubmit" class="btn btn-primary" data-loading-text="Sending..." style="display: block; margin-top: 10px;">Send Request</button>
</form>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add one of Bootstrap's modifier classes to the surrounding form element in order to make use of alternate styles:
http://getbootstrap.com/css/#forms
Note that the contact form template will automatically add a
tag after your labels if you move the form shortcode to a second line. You probably don't want that.