Making a two column form responsive??

Resolved

(@plippers)

Hello! I’m trying to create a two column Contact 7 form that is also responsive. I’ve got as far as the two column form, but can’t seem to make it responsive. The two columns just smush together on a mobile, and instead I’d like the “Subject” and “Message” fields (in the right column) to drop below the left column fields. My test website is http://bit.ly/10F4zfy and I’ve outlined the code I’m trying below.

Below is the code I used to create the form:

<!-- TWO COLUMN FORM -->
<div class="clearfix">
    <div id="left">
        [text name watermark "Name"] <br/>
        [email* your-email watermark "Email"]<br/>
        [text your-phone watermark "Phone"]
    </div>
    <div id="right">
        [text* your-subject watermark "Subject "] <br/>
        [textarea* your-message watermark "Message "]
    </div>
</div>
[submit "Send"]
<!-- /TWO COLUMN FORM -->

Below is the CSS code I used:

#left {
    width: 35%;
    float: left;
}  

#right {
    width: 65%;
    float: left;
}  

.clearfix:after {
    content:"020";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    overflow:hidden;
}  

.clearfix {
    display:block;
}  

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    background-color: #fff;
    color: #000;
    width: 85%;
}

I also tried this media screen code in the CSS – it worked to make my submit button nice and big on a mobile, but the columns stayed squashed side by side.

@media screen and (max-width: 599px) {

  .wpcf7-form-control {
    width: 95% !important;
  }

  .wpcf7-form-control.wpcf7-submit {
    font-size: 18px;
    font-size: 1.286rem;
    padding: 14px 0;
    padding:  1rem 0;
  }
}

Is what I’m trying to do with a two column form even possible? If so, any help with the coding would be super greatly appreciated!

Cheers!
Ania

http://wordpress.org/extend/plugins/contact-form-7/

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

Neil Murray
(@buzztone)

10 years, 11 months ago

Hi Ania

Have you tried posting your problem at WordPress Answers (very code orientated) or WordPress LinkedIn Group (help with most things WordPress).

zebrawebdesigns
(@sbhuvan)

10 years, 11 months ago

Hello plippers

Have you tried using the CSS style

Clear:both;
float:none;

This should work

Thread Starter Plippers
(@plippers)

10 years, 10 months ago

Hi zebrawebdesigns and buzztone!

Thank you very much for your responses! Sorry about the super delayed reply, I had a bunch of things come up and haven’t have time to work on my site, so didn’t properly test zebrawebdesigns’ suggestion until today.

It works, and the two columns stack neatly on top of one another on mobile!! The only issue I encountered is that when the contact form is viewed as one column on a mobile, the bottom box of the left column and the top box of the right column are stuck together with no padding between them. I solved this by adding a “margin-bottom” padding to the bottom box of the left column in the @media screen CSS. This works perfectly and looks great! zebrawebdesigns – thank you SO much for the suggestion, I really really appreciate your help! Again, v sorry for the late reply!

Cheers!
Ania
guirone
(@guirone)

10 years, 10 months ago
Hi all,

I’m very new with this plug in and css also and I need to generate a contact form with three rows where in the first one there are a dropbox,the input box for name,email and subject,in second one there’s the subject input box and in third one the send button.Also it must be responsive…

Belove there’s the code I used for the contact form(copied from above posts and for colums while I need rows) and CSS.But result is not the one I’m looking for.PLease,could you help me to modify the contact form as I want?

Thank you so much in advance.
```

<div class="clearfix">
    <div id="left">
        [select* Tour "Barrio Gotico" "Modernismo" "Barcellona su due ruote" "Itinerario Gourmet"] <br/>
    </div>
    <div id="right">
        [text* your-name watermark "Il tuo nome"]<br/>
        [email* your-email watermark "La tua email"]<br/>
        [text* your-subject watermark "Subject "] <br/>
    </div>
</div>
        [textarea* your-message watermark "Il tuo messaggio "]
[submit "Send"]

```
and this CSS:
```
#left {
    width: 35%;
    float: left;
}  

#right {
    width: 35%;
    float: left;
}  

.clearfix:after {
    content:"020";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    overflow:hidden;
} 

.clearfix {
    display:block;
}  

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    background-color: #fff;
    color: #000;
    width: 30%;
}
```

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

The topic ‘Making a two column form responsive??’ is closed to new replies.

Tags