Title: Customize layout with CSS
Last modified: August 21, 2016

---

# Customize layout with CSS

 *  [guirone](https://wordpress.org/support/users/guirone/)
 * (@guirone)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/customize-layout-with-css/)
 * Hi all,
 * I’m very new with the CF7 and CSS and I’d like to customize the layout for CF7.
   
   What I’m trying to do is to put the contact form in 3 lines where in the **first
   line** I put the **name/surname/subject fields**,in the **second** the **body
   of message**,in the **third** the **send button**. I tried with this css that
   works fine to put fields in column but I don’t know how to modify it in order
   to have rows. Hope you can help me. thank
 * .wpcf7 input[type=”text”],
    .wpcf7 input[type=”email”], .wpcf7 textarea { background-
   color: #FFFFFF; color: #000; width: 95%; }
 * #left {
    width: 35%; float: left; }
 * #right {
    width: 35%; float: right; }
 * .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”],
 * {
    background-color: #fff; color: #000; width: 30%; }
 * [http://wordpress.org/extend/plugins/contact-form-7/](http://wordpress.org/extend/plugins/contact-form-7/)

Viewing 1 replies (of 1 total)

 *  [Neil Murray](https://wordpress.org/support/users/buzztone/)
 * (@buzztone)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/customize-layout-with-css/#post-3885431)
 * I would use Ordered List elements to display multiple fields on single line –
   much simpler to code in HTML & CSS.
 * Supply a link to your CF7 form if you would like some suggested code for this
   approach.

Viewing 1 replies (of 1 total)

The topic ‘Customize layout with CSS’ is closed to new replies.

 * ![](https://ps.w.org/contact-form-7/assets/icon.svg?rev=2339255)
 * [Contact Form 7](https://wordpress.org/plugins/contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contact-form-7/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [custom layout](https://wordpress.org/support/topic-tag/custom-layout/)

 * 1 reply
 * 2 participants
 * Last reply from: [Neil Murray](https://wordpress.org/support/users/buzztone/)
 * Last activity: [12 years, 9 months ago](https://wordpress.org/support/topic/customize-layout-with-css/#post-3885431)
 * Status: not resolved