Whimsy Collective

Since you have bootstrap; use the grid system.

Wrap your cf7 tags like this example:

<div class="col-md-8 form-controls">
 <div class="row">
  <div class="col-md-6 name">[text* your-name placeholder "Your Name..."]</div>

  <div class="col-md-6 email">[email* your-email placeholder "Please Enter Your Email..."]</div>

  <div class="col-md-6 project-title">[text* your-subject placeholder "Your Project Title..."]</div>

  <div class="col-md-6 date">[date date-186 placeholder "-Estimate Date-"]</div>

  <div class="col-md-12 message">[textarea* your-message placeholder "Your Message..."]</div>

 </div>
</div>

 <div>[submit class:btn--primary class:btn-block "Send"]</div>
</div>

If I answered your question. Please change the status to resolved.

• This reply was modified 7 years, 11 months ago by Whimsy Collective. Reason: Added example code. My first reply with code was removed

Simple answer.

From: [your-name] <[your-email]>
Subject: [your-subject]

Message Body:
[your-message]

-- 
This e-mail was sent from a contact form on (yoursite name here)

Feel free to share a screenshot using dropbox sharelink. Afterwards, you can delete the file to get rid of the shared link.

If I answered your question. Please change the status to resolved.

• This reply was modified 7 years, 11 months ago by Whimsy Collective. Reason: Added a note about change status

Since you’re running bootstrap. Use Bootstrap’s grid system.

Here’s an example from my setup wrapping contactform’s tags with div’s and bootstrap col-md-8, row, col-md-6. You could use col-md-4.

Create new contact form, try this code, and see what it looks like resizing the browser window and on the mobile. In my example I don’t have the radio button, it should be straightforward. Feel free to remove the class:btn–primary class:btn-block to keep your submit button.

<div class="col-md-8 form-controls">
 <div class="row">
  <div class="col-md-6 name">[text* your-name placeholder "Your Name..."]</div>

  <div class="col-md-6 email">[email* your-email placeholder "Please Enter Your Email..."]</div>

  <div class="col-md-6 project-title">[text* your-subject placeholder "Your Project Title..."]</div>

  <div class="col-md-6 date">[date date-186 placeholder "-Estimate Date-"]</div>

  <div class="col-md-12 message">[textarea* your-message placeholder "Your Message..."]</div>

 </div>
</div>

 <div>[submit class:btn--primary class:btn-block "Send"]</div>
</div>