Mobile formatting

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>

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, 7 months ago by Whimsy Collective. Reason: Added example code. My first reply with code was removed

Hi,

Thanks for this – finally found some time this morning to have a play with this…! I am pleased to say your suggestion worked (with a few tweeks).

For information (in case anyone else is having a similar issue)…

My original code was this

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Your Telephone 
    [tel tel-618] </label>

<label> Type of Event
    [radio radio-906 "Wedding" "Corporate" "Birthday" "Other"] </label>

<label> Date of Event (required)
    [date* date-406] </label>

<label> Location of Event (required)
    [text* text-985] </label>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

The label tags didn’t work with the bootstrap grid system, so these needed to be removed. The following gave me an identical appearance but with the responsive capability:

<div class="col-md-12 form-controls">
 <div class="row">
<strong>
<div class="col-md-12">
Your Name (required): 
    [text* your-name] 
</div>
<div class="col-md-12">
Your Email:  (required)
    [email* your-email]
</div>
<div class="col-md-12">
Your Telephone:  
    [tel tel-618]
</div>
<div class="col-md-12">
Type of Event: 
    [radio radio-906 "90s event" "Corporate" "Birthday" "Wedding" "Other"]
</div>
<div class="col-md-12">
Date of Event (required): 
    [date* date-406]
</div>
<div class="col-md-12">
Location of Event (required): 
    [text* text-985]
</div>
<div class="col-md-12">
Your Message: 
    [textarea your-message]
</strong>
</div>
</div>
</div>
[submit "Send"]

Thanks for your help Whimsy Collective…!

Rog

• This reply was modified 7 years, 7 months ago by wollyroger.
• This reply was modified 7 years, 7 months ago by wollyroger.