Mobile formatting

Resolved wollyroger
(@wollyroger)

8 years, 11 months ago

Hi,

I have installed the form on the following page:

http://www.rockthe90s.co.uk/contact/

… but the form doesn’t appear to be responsive with mobile devices (the form is displaying larger than the site). Is there any way of coding it to behave like the rest of the site?

I’m guessing some kind of @media code (or similar) in the additional formatting section would do the trick…?

Thanks in advance,

Roger

Viewing 3 replies - 1 through 3 (of 3 total)

(@whimsycollective)

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>

Whimsy Collective

(@whimsycollective)

8 years, 11 months ago

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

Thread Starter

wollyroger

(@wollyroger)

8 years, 11 months ago

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"]

Tags