Dynamic Forms

Introduction

Dynamic forms differ from embedded forms in that they use tokens to generate the form markup directly from mrm rather than relying on static form markup. Dynamic forms mimic the functionality of MRM-Generated Forms. The advantage to this is:

1. New form fields can be added/removed by any user with access to marketing forms through the MRM interface.
2. Mismatches between an embedded form’s markup and the corresponding marketing form would be eliminated, as the form is generated on each page load according to what is configured through MRM. This means that dynamic forms will automatically update themselves when a change is made in MRM, without the need to edit the form code in the page template.

Setup Overview

To set up a dynamic forms follow these steps:

1. Create a marketing form or identify an existing form that you would like to use
   • Go to MRM > Marketing Forms and locate or create a marketing form. Any form can be presented as an embedded or dynamic form, so there isn’t anything different you need to do when creating a form for it to be presented dynamically.
2. Assign your form to the appropriate nav section
   • To display a dynamic form, you need to assign it to a specific nav section. You can add a dynamic form to as many nav sections as you want, but each nav section can only display one dynamic form. To assign a form, go to MRM > Nav Section Maintenance and click on the desired nav section.
   • Go to the “Settings” tab and find your form under the “Select Contact Form To Display” dropdown.
     
3. Add your form code to the page template. The tokens and script for dynamic forms can be found in the Components Library in any local site repo. It can also be found here for those unable to access a site repo.
4. That’s It! Your form should populate on your page.

Dynamic Form Formatting

Since dynamic forms are designed to arrange and format form fields to adapt to varying field counts and screen widths a JavaScript function is run any time a page containing a dynamic form is loaded. This function:

1. Consolidates form sections (groups of form inputs within a given category) to avoid formatting issues resulting from form sections having only one input
2. Counts the number of inputs within each form section and assigns classes to the form section, giving the section optimal styling relative the form’s width
3. Any time the form width changes, the function above is triggered again to reassess the form and change classes accordingly based on the new form width
4. Runs selectric.js on any dropdown menus within the forms

Form Styling

Dynamic form styling comes primarily from the stylesheet custom-forms.scss (/custom/design/scss/assets/components/_custom-form.scss). This form provides default styling for both dynamic and embedded/static forms on the site.

The custom-forms stylesheet heavily relies on the mixin “@form-field()” (/custom/design/scss/assets/mixins/_mixins.scss), which provides all styles for a variety of form inputs and labels. Many of the values for this mixin reference variables are based on the $default-font-size variable (found in /custom/design/scss/assets/variables/_typography.scss).

Before adding custom styles to individual forms, I highly recommend reviewing form variables (found in /custom/design/scss/assets/variables/_variables.scss), the @form-field() mixin, and custom-forms.scss. These assets apply to most forms within a site, and so it will save a lot of time by establishing global/default form styling. If these assets are properly configured, most sites will require very little custom formatting and styling for its forms.