Title: Responsive fields is it possible? Last modified: August 30, 2016 --- # Responsive fields is it possible? * [AdonaiCB](https://wordpress.org/support/users/adonaicb/) * (@adonaicb) * [10 years, 8 months ago](https://wordpress.org/support/topic/responsive-fields-is-it-possible/) * Hello, * I am interested in to do fields like this example: [http://hargreaves-brand.com/es/contacto/](http://hargreaves-brand.com/es/contacto/) is it possible to do this with contact form? Actually in my web appears on this way: [http://maria-candela.com/index.php/contact/contact/](http://maria-candela.com/index.php/contact/contact/) * Thanks * [https://wordpress.org/plugins/contact-form-7/](https://wordpress.org/plugins/contact-form-7/) Viewing 12 replies - 1 through 12 (of 12 total) * [hkchakladar](https://wordpress.org/support/users/hkchakladar/) * (@hkchakladar) * [10 years, 8 months ago](https://wordpress.org/support/topic/responsive-fields-is-it-possible/#post-6560753) * What you meant by responsive here ? Both forms looks and works almost same. * [davmerit](https://wordpress.org/support/users/davmerit/) * (@davmerit) * [10 years, 8 months ago](https://wordpress.org/support/topic/responsive-fields-is-it-possible/#post-6560805) * Use Ordered List elements to display multiple fields on single line. * HTML: * ```
  1. [text cf7-phone 15/]
  2. [text cf7-mobile 15/]
``` * Added to Form section of CF7 interface. Labels are added for improved accessability. * CSS: * ``` .wpcf7-form .singleline ol { list-style: none; margin: 0; } .wpcf7-form .singleline li{ display: inline-block; float: left; margin-right: 10px; padding-right: 10px; } ``` * ​​Add your CSS via [Child Theme ](http://wplift.com/customise-wordpress-child-theme) or use [custom CSS plugin](http://wordpress.org/extend/plugins/search.php?q=custom+css). * ​Also see [Styling Contact Form](http://contactform7.com/styling-contact-form/#Styling_Contact_Form_7_Forms) for a general explanation of styling CF7 forms using CSS. * Thread Starter [AdonaiCB](https://wordpress.org/support/users/adonaicb/) * (@adonaicb) * [10 years, 8 months ago](https://wordpress.org/support/topic/responsive-fields-is-it-possible/#post-6560844) * Ok, where I put this CSS CODE? In wich section of my WP? I don’t understand. Thanks * [hkchakladar](https://wordpress.org/support/users/hkchakladar/) * (@hkchakladar) * [10 years, 8 months ago](https://wordpress.org/support/topic/responsive-fields-is-it-possible/#post-6560848) * Go to Apperance > Editor, put this code there and save. * Thread Starter [AdonaiCB](https://wordpress.org/support/users/adonaicb/) * (@adonaicb) * [10 years, 7 months ago](https://wordpress.org/support/topic/responsive-fields-is-it-possible/#post-6560874) * Hello, in this order? I pasted the code on this way and anything changes * /*———————————————————————————–*/ /* CONTACT FORM 7 /*———————————————————————————–*/ div.wpcf7 { padding-top: 20px; } div.wpcf7 .wpcf7-not-valid { border: 2px solid# b54d4d } span.wpcf7-not-valid-tip { display: none !important } div.wpcf7-validation- errors { margin: 0; padding: 10px; background-color: #fcf8e3; color: #c09853; border: 2px solid #faebcc; } div.wpcf7-mail-sent-ok { margin: 0; padding: 10px; border: 2px solid #d6e9c6; background-color: #dff0d8; color: #468847; } div.wpcf7 textarea { height: 110px; } .wpcf7-form .singleline ol { list-style: none; margin: 0; } * .wpcf7-form .singleline li{ display: inline-block; float: left; margin-right: 10px; padding-right: 10px; } * Thread Starter [AdonaiCB](https://wordpress.org/support/users/adonaicb/) * (@adonaicb) * [10 years, 7 months ago](https://wordpress.org/support/topic/responsive-fields-is-it-possible/#post-6560878) * And I have to add also the HTML code and where? * [Tim Nash](https://wordpress.org/support/users/tnash/) * (@tnash) * Spam hunter * [10 years, 7 months ago](https://wordpress.org/support/topic/responsive-fields-is-it-possible/#post-6560879) * On the forums make sure you include code within the code tag, and only use the tag for short snippets only, as you can cause some formatting issues. * Thread Starter [AdonaiCB](https://wordpress.org/support/users/adonaicb/) * (@adonaicb) * [10 years, 7 months ago](https://wordpress.org/support/topic/responsive-fields-is-it-possible/#post-6560881) * Sorry, now the code correctly posted * ``` /*-----------------------------------------------------------------------------------*/ /* CONTACT FORM 7 /*-----------------------------------------------------------------------------------*/ div.wpcf7 { padding-top: 20px; } div.wpcf7 .wpcf7-not-valid { border: 2px solid #b54d4d } span.wpcf7-not-valid-tip { display: none !important } div.wpcf7-validation-errors { margin: 0; padding: 10px; background-color: #fcf8e3; color: #c09853; border: 2px solid #faebcc; } div.wpcf7-mail-sent-ok { margin: 0; padding: 10px; border: 2px solid #d6e9c6; background-color: #dff0d8; color: #468847; } div.wpcf7 textarea { height: 110px; } .wpcf7-form .singleline ol { list-style: none; margin: 0; } .wpcf7-form .singleline li{ display: inline-block; float: left; margin-right: 10px; padding-right: 10px; } ``` * [davmerit](https://wordpress.org/support/users/davmerit/) * (@davmerit) * [10 years, 7 months ago](https://wordpress.org/support/topic/responsive-fields-is-it-possible/#post-6560888) * [@adonaicb](https://wordpress.org/support/users/adonaicb/) In my reply above, I provided a link to plugins which allow you to add and make CSS changes to your wordpress site. I have also provided you with a link that teaches you how to use a child theme to make changes to your wordpress site. You may read from those links for guidance on how to make CSS changes to your site. * Thread Starter [AdonaiCB](https://wordpress.org/support/users/adonaicb/) * (@adonaicb) * [10 years, 7 months ago](https://wordpress.org/support/topic/responsive-fields-is-it-possible/#post-6560912) * I’ve applied this with Custom CSS plugin and now dissappear some fields: [http://maria-candela.com/index.php/contact/contact/](http://maria-candela.com/index.php/contact/contact/) * Thread Starter [AdonaiCB](https://wordpress.org/support/users/adonaicb/) * (@adonaicb) * [10 years, 7 months ago](https://wordpress.org/support/topic/responsive-fields-is-it-possible/#post-6560913) * And it looks the same, doesn’t appear multiple fields in a single line * [davmerit](https://wordpress.org/support/users/davmerit/) * (@davmerit) * [10 years, 7 months ago](https://wordpress.org/support/topic/responsive-fields-is-it-possible/#post-6560951) * [@adonaicb](https://wordpress.org/support/users/adonaicb/) You could consider using [Contact Form 7 Skins](https://wordpress.org/plugins/contact-form-7-skins/) to style your Contact Form 7 Forms. * You can now use the add-on [CF7 Skins Ready](http://cf7skins.com/add-ons/ready/) to put form fields together on the same line. Viewing 12 replies - 1 through 12 (of 12 total) The topic ‘Responsive fields is it possible?’ 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/) * 12 replies * 4 participants * Last reply from: [davmerit](https://wordpress.org/support/users/davmerit/) * Last activity: [10 years, 7 months ago](https://wordpress.org/support/topic/responsive-fields-is-it-possible/#post-6560951) * Status: not resolved