Title: CSS tips for online forms
Last modified: July 3, 2019

---

# CSS tips for online forms

 *  Resolved [lukefive](https://wordpress.org/support/users/lukefive/)
 * (@lukefive)
 * [6 years, 11 months ago](https://wordpress.org/support/topic/css-tips-for-online-forms/)
 * When I was writing CSS to control form layout, I noticed the child numbers for
   each field changed after I logged out of the WP admin. So I logged back in, decreased
   every child number by one, logged out and then checked my results.
 * Any guidelines for CSS with CC forms?
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcss-tips-for-online-forms%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Plugin Author [Constant Contact](https://wordpress.org/support/users/constantcontact/)
 * (@constantcontact)
 * [6 years, 11 months ago](https://wordpress.org/support/topic/css-tips-for-online-forms/#post-11697035)
 * Hi [@lukefive](https://wordpress.org/support/users/lukefive/)
 * You’re referring to the ID attributes like `first_name___7e7a6eef7e0a3734f39d6757b27d474b`
   etc?
 * What sort of form layout are you looking to achieve?
 * I also know that we have this WordPress filter(below) in place that allows for
   customizing the classes applied to each individual field. The first parameter
   is the currently determined classes and the second parameter is the field type
   being rendered. Most likely `text` but I know we have `textarea` possible as 
   well.
 *     ```
       $classes = apply_filters( 'constant_contact_input_classes', $classes, $type );
       ```
   
 * May prove some use. Otherwise, some info on what you’re trying to accomplish 
   could help us provide some pointers of how to approach styling it all.
 *  Thread Starter [lukefive](https://wordpress.org/support/users/lukefive/)
 * (@lukefive)
 * [6 years, 11 months ago](https://wordpress.org/support/topic/css-tips-for-online-forms/#post-11697259)
 * [@constantcontact](https://wordpress.org/support/users/constantcontact/) simply
   being able to place fields side by side was my first goal. I cannot use the ID
   attributes you showed, because the containers for each form field are styled 
   paragraphs.
 * But I am curious about the filter you provided.
 *  Thread Starter [lukefive](https://wordpress.org/support/users/lukefive/)
 * (@lukefive)
 * [6 years, 11 months ago](https://wordpress.org/support/topic/css-tips-for-online-forms/#post-11697392)
 * [@constantcontact](https://wordpress.org/support/users/constantcontact/) This
   is typical of what I’m doing now to make the form easier to use. This is first
   and last name …
 *     ```
       #left-area #post-168 #ctct-form-167  p:nth-child(2) {
       	float:left;
       	width:200px;
       }
       #left-area #post-168 #ctct-form-167 p:nth-child(3) {
       	display:inline-block;
       	width:200px;
       }
       ```
   
 *  Plugin Author [Constant Contact](https://wordpress.org/support/users/constantcontact/)
 * (@constantcontact)
 * [6 years, 11 months ago](https://wordpress.org/support/topic/css-tips-for-online-forms/#post-11697570)
 * We have managed to acquire this layout:
 * [https://cloudup.com/crTdAJdDeol](https://cloudup.com/crTdAJdDeol)
 * using the following basic CSS:
 *     ```
       .ctct-form-wrapper {
           width: 40%;
       }
       .ctct-form-field {
           float: left;
           width: 49%;
       }
       ```
   
 * Alternatively, it may be a good chance to use more advanced CSS layout techniques
   like Flexbox or Grid, if you’re willing to experiment and tinker.
 * [https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
   
   [https://css-tricks.com/snippets/css/complete-guide-grid/](https://css-tricks.com/snippets/css/complete-guide-grid/)
 *  Thread Starter [lukefive](https://wordpress.org/support/users/lukefive/)
 * (@lukefive)
 * [6 years, 11 months ago](https://wordpress.org/support/topic/css-tips-for-online-forms/#post-11697826)
 * [@constantcontact](https://wordpress.org/support/users/constantcontact/) – I 
   see you advocate less code for equal results? I like that.
 * I’m using Flexbox and Grid on other projects; this site owner wants very quick
   turnaround.
 * Thank you for the tips!!
 *  Plugin Author [Constant Contact](https://wordpress.org/support/users/constantcontact/)
 * (@constantcontact)
 * [6 years, 11 months ago](https://wordpress.org/support/topic/css-tips-for-online-forms/#post-11697949)
 * Welcome 🙂
 * Let us know if you need anything else.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘CSS tips for online forms’ is closed to new replies.

 * ![](https://ps.w.org/constant-contact-forms/assets/icon-256x256.png?rev=2951825)
 * [Constant Contact Forms](https://wordpress.org/plugins/constant-contact-forms/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/constant-contact-forms/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/constant-contact-forms/)
 * [Active Topics](https://wordpress.org/support/plugin/constant-contact-forms/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/constant-contact-forms/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/constant-contact-forms/reviews/)

## Tags

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

 * 6 replies
 * 2 participants
 * Last reply from: [Constant Contact](https://wordpress.org/support/users/constantcontact/)
 * Last activity: [6 years, 11 months ago](https://wordpress.org/support/topic/css-tips-for-online-forms/#post-11697949)
 * Status: resolved