splitting a CF7 form?

Hi there!

What would I need to do to split the CF7 at the bottom of this page (http://mizva.s110.upress.link/ )so the the details would be in one column and the message would be in a second? it just looks to bulky as it is now,,,

Thanks,
Tomer

  • Denitsa

    Hello there Tomer,
    I hope you're well today and thank you for your question!

    The basic way to split your form in two columns is adding some HTML markup in your Contact -> Ad new / Edit Form like that

    <div id="two-column">
    
    	<div id="left">
    		<p>Your Name (required)
    		[text* first-name]</p>
    		<p>Your Email address (required)
    		[email* your-email] </p>
    		<p>Course / kit / Subject
    		[text* your-subject]</p>
    	</div>
    
    	<div id="right">
    		<p>Your message
    	[textarea your-message]</p>
            <p>[submit "Send"]</p>
    	</div>
    </div>

    And then some CSS to style it. That's the basic CSS for having two column-layout

    #two-column{
    	margin:0 auto;
    }
    
    #two-column #left{
    float:left;
    }
    
    #two-column #right{
    	float: right;
    }

    You can add the CSS code directly in your child-theme's style.css file or by using a plugin like Simple Custom CSS (https://wordpress.org/plugins/simple-custom-css/).

    You can then add additional styling to the CSS as per your preference.

    I hope this helps! If you have any additional issues, please let us know and we'll be happy to help.

    Cheers,
    Denitsa

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.