We're redesigning our preference center and running into some challenges with the landing page and form functionality. I followed this extraordinarily helpful tutorial on restyling the form, which works fantastically for the most part, but am now running into a few additional issues: Form Layout Update (CSS Styling)
A functionality issue I'm having
- I'm using checkbox lists for all of my checkboxes, and have the main options grouped in fieldsets. When a user checks either "subscribe to all" or "unsubscribe from all" I want to check or uncheck all checkbox lists in the fieldset. I'm using the script described in this discussion, which works perfectly when my "subscribe to all/unsubscribe from all" fields are using the checkbox input, but it falls apart when I change them to a checkbox list: Re: Marketo Form: Uncheck other boxes when a certain checkbox gets checked
Moved this to its own question: Use Checkboxes to select all Checkbox List input in a Form
Here are the design issues I'm having difficulty solving
- I want to apply a style to the very top row of the form (where subscribe/unsub all fields are located). I tried applying a class to .mktoFormRow:nth-of-type(1) but this is applying the class to the first row of my fieldset as well. How can I apply a style to a single row of my form?
- I'm using a free-form landing page template. Beneath my form I have that rich text section with logos. I'd like this rich text section (identified with a style called "logos" in my stylesheet) to stick to the footer of the webpage, always below the form itself. Whenever the form resizes (due to visibility rules), that logo section covers the submit button. How can I add content that will always display below the submit button on a form?
Thank you for any guidance you can provide!