WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] Making a two column form responsive?? (5 posts)

  1. Plippers
    Member
    Posted 1 year ago #

    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/

  2. buzztone
    Member
    Posted 1 year ago #

    Hi Ania

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

  3. zebrawebdesigns
    Member
    Posted 1 year ago #

    Hello plippers

    Have you tried using the CSS style

    Clear:both;
    float:none;

    This should work

  4. Plippers
    Member
    Posted 1 year 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

  5. guirone
    Member
    Posted 1 year 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.

    <!-- TWO COLUMN FORM -->
    <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"]
    <!-- /TWO COLUMN FORM -->

    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%;
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic