WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Form Fields in two columns (2 posts)

  1. ABID KHAN
    Member
    Posted 5 months ago #

    Hi,

    How can I make form in two columns. I mean that that, when this form is viewed on a page, Name is in column 1 while email address in column 2.

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

  2. Jose Lazo
    Member
    Posted 5 months ago #

    You have to give styles with CSS.
    An example is:
    HTML

    <div id="datospersonales" class="formudoscolumnas">
    
    		<p>Nombre (requerido)<br />
    		    [text* your-name] </p>
    
    		<p>Apellidos (requerido)<br />
    		    [text* text-apellidos] </p>
    
    		<p>Dirección<br />
    		    [text text-direccion] </p>
    
    	<div class="izq cuarenta">
    
    		<p>NIF<br />
    		    [text text-nif] </p>
    
    		<p>Tu e-mail (requerido)<br />
    		    [email* your-email] </p>		
    
    		<p>Móvil<br />
    		    [tel tel-telefono] </p>
    
    		<p>Ciudad<br />
    		    [text text-ciudad] </p>
    
    		<p>Facebook<br />
    		    [url url-facebook "http://www.facebook.com/"] </p>
    
    	</div>
    	<div class="der cuarenta">
    
    		<p>Edad<br />
    		    [text text-edad] </p>
    
    		<p>Código Postal<br />
    		    [text text-cp] </p>
    
    		<p>País<br />
    		    [text text-pais] </p>
    
    		<p>Indica tu web<br />
    		    [text text-web] </p>
    
    		<p>Otras Redes Sociales<br />
    		    [text text-otras ] </p>
    	</div>
    	<div class="clear"></div>
    </div><br>

    And CSS:

    .formudoscolumnas {
    	text-align: center;
    }
    
    .izq {
    	float: left;
    }
    
    .der {
    	float: right;
    	margin-right: 10px;
    }
    
    .clear {
    	clear: both;
    }
    
    .cuarenta {
    	width: 40%;
    }

    Regards

Reply

You must log in to post.

About this Plugin

About this Topic