Reorder Constant Contact Forms Fields With CSS

Sometimes you inherit web things that you don’t have access to. Today’s instance is a Constant Contact account form, which usually always sets the EMAIL field first. Luckily Constant Contacts embedded forms have nice output code with clear ID’s and CLASSES. Here is a simple way with pure CSS to re-order the fields.

/* Form DIV ID */
#ctct_form_0 { display: flex; flex-direction: column; }

/* Each Field ID */
#first_name_field_0 { order: 1; }
#last_name_field_0 { order: 2; }
#email_address_field_0 { order: 3; }
#company_field_0 { order: 4; }
#phone_field_0 { order: 5; }
#gdpr_text { order: 6; }

/* Button Class */
.ctct-form-button { order: 7; }