Skip to content

Instantly share code, notes, and snippets.

@joemcgill
Last active May 16, 2016 14:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joemcgill/6888764 to your computer and use it in GitHub Desktop.
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
<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>
@joemcgill
Copy link
Author

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.

@khoipro
Copy link

khoipro commented Dec 22, 2015

Thank you for this shortcode!

@khoipro
Copy link

khoipro commented May 16, 2016

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