Support » Plugin: Contact Form 7 » How to make it work in 2 col responsive layout

  • Hello,
    I have a 2 col responsive layout that I use ont he rest of a dev site. When I try to use this set up within contact Form 7 it just won’t work. The right column is on the right where it should be but dropped below the height of the left col if that makes sense? I’ve tried this on a few sites and always the same issue.

    Can anyone please advise or help me as it’s driving me mad!

    This HTML code below I use within the Contact Form 7 ‘Form’ area and I call the form within my template like so

    <?php echo do_shortcode( '[contact-form-7 id="46" title="Contact form 1"]' ); ?>

    <div class="form_left_col">
    <p>First name (required)<br />
        [text* first-name] </p>
    
    <p>Surname (required)<br />
        [text* surname] </p>
    
    <p>Telephone<br />
    [tel tel-117]</p>
    
    <p>Your Email (required)<br />
        [email* your-email] </p>
    </div><!-- END form_left_col -->
    
    <div class="form_right_col">
    <p>Your enquiry (required)<br />
        [textarea* your-enquiry] </p>
    
    <p>[captchac captcha-514]
    Please enter the code (required)<br />
    [captchar captcha-514]</p>
    
    <p>[submit "Send"]</p>
    </div><!-- END form_right_col -->

    This is the css:

    .form_left_col {
    	width: 48.8%;
    	float:left
    }
    
    .form_right_col {
    	width: 48.8%;
    	float:right
    }
    
    @media only screen and (max-width: 480px) {
    
    	.form_left_col,
    	.form_right_col {
    		display:block;width: 100%;
    	}
    }
    
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"],
    .wpcf7 textarea
    {
        background-color: #fff;
        color: #666;
        width: 100%;
        border:none!important;
        display:block;
        margin-bottom:10px
    }
    
    .wpcf7 textarea
    {
        height: 100px;
    }

    Any help MUCH appreciated! 🙂

    https://wordpress.org/plugins/contact-form-7/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter igloobob

    (@igloobob)

    so for a very simplified crude illustration in absence of a screen shot, the below is sort of what I get..

    name
    —————
    email
    —————
    comments
    —————–
    submit
    —————–

    Thread Starter igloobob

    (@igloobob)

    OK the above didn’t work! It dropped comments down but if you imagine comment and submit are shifted over floating right but in line with where they are, so below the left col items.

    Hope that makes sense!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to make it work in 2 col responsive layout’ is closed to new replies.