Contact Forms

Why include a contact page template when we could just take the most popular contact form plugin and style it to be compatible with the theme? And that’s exactly what we’ve done. Install Contact Form 7, go to town with your contact forms, and put them on any page or post you want.

Below you can see some examples of contact forms built with Contact Form 7 along with the source code you can copy and paste into your form builder for a quick start.

[divider]

Simple Contact Form

[contact-form 1 “Contact form 1”]

Source Code

<p>[text* your-name]<label>Your Name<span class="required">*</span</label</p>
<p>[text* your-email]<label>Your Email<span class="required">*</span></label</p>
<p>[text your-subject]<label>Subject</label></p>
<p>[textarea your-message]</p>
<p>[submit "Send Message"]</p>

Copy the above source code into your Contact Form 7 form builder for a quick start.

[divider]

Simple Contact Form w/Captcha

[contact-form 2 “Contact form 2”]

Source Code

<p>[text* your-name]<label>Your Name<span class="required">*</span</label</p>
<p>[text* your-email]<label>Your Email<span class="required">*</span></label</p>
<p>[text your-subject]<label>Subject</label></p>
<p>[textarea your-message]</p>
<p>
  <h5>Are you human?</h5>
  [captchac captcha-400]
  [captchar captcha-400]
  <em>Enter in the text you see above to submit the form.</em>
</p>
<p>[submit "Send Message"]</p>

Copy the above source code into your Contact Form 7 form builder for a quick start.

[divider]

A Bunch of Form Elements

[contact-form 3 “Contact form 3”]

Source Code

<p>
  <h5>Text Field</h5>
  [text* text-field]
</p>
<p>
  <h5>Text Field 2</h5>
  [text* text-field-2]
</p>
<p>
  <h5>Select Menu</h5>
  [select menu-55 "Thing 1" "Thing 2" "Thing 3" "Thing 4" "Thing 5"]
</p>
<p>
  <h5>Checkboxes</h5>
  [checkbox checkbox-528 "Thing 1" "Thing 2" "Thing 3" "Thing 4" "Thing 5"]
</p>
<p>
  <h5>Radio Buttons</h5>
  [radio radio-34 "Thing 1" "Thing 2" "Thing 3" "Thing 4" "Thing 5"]
</p>
<p>
  <h5>Message</h5>
  [textarea textarea-679]
</p>
<p>[submit "Send Message"]</p>

Copy the above source code into your Contact Form 7 form builder for a quick start.

Leave a Reply

Your email address will not be published. Required fields are marked *