CSS tips for online forms

Hi @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.

@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.

@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;
}

We have managed to acquire this layout:

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/complete-guide-grid/

@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!!

Welcome ??

Let us know if you need anything else.