Forms

4 field form

Form layout suitable for 4 fields (3 simple fields plus message field). Fields stack on landscape mobile.

Section Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

5 field form

Form layout suitable for 5 fields (4 simple fields plus message field). Fields stack on landscape mobile.

Section Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Text + form

Right-hand-side form. Form stacks below text on mobile.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Form + text

Left-hand-side form. Form stacks below text on mobile.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Form strip

3 fields, horizontal. Stacks vertically on mobile landscape. Ideal for forms with less than or equal to 3 fields.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Campaign Monitor signup form strip

Name and email form fields. When this form is submitted, these fields are subscribed to a Campaign Monitor list.

Implementation tip
This form requires a Campaign Monitor subscriber list to connect to. If there is a Campaign Monitor subscriber list ready to go, you can view the 'Sign up forms' link within the relevant list in Campaign Monitor, select "Copy/paste a form to your site", select the relevant fields (Name and Email), view the code and copy the following code elements:

[action url] - this url is to be pasted into the form element's Action field
[data id] - this string of numbers is to be entered into a new custom form attribute (Name: data-id, Value: [numbers])
[method] - method of the form is to be set to "Post"
[class form element] - add a class of js-cm-form to the form element, can be a combo class without styling
[class email field] - add a class of js-cm-email-input to the form element, can be a combo class without styling
[name field for Name] - give the Name input field a name of cm-name
[name field for Email] - copy and paste the unique name for the email field from Campaign Monitor into the name field for the email input
[required] - Email must be required. Name is optional
[id] - ids can be anything relevant. Consider other form's this may be on the same page with and keep them unique and relevant
[javascript] - there is an HTML embed below the component which is required. Check this Webflow script matches Campaign Monitor
[success redirect url] - set this redirect url in Campaign Monitor (same link as the code above)

NOTE: this Component System example is connected to a Digital360 placeholder list ("Component System Webflow Newsletter") in Campaign Monitor and redirects to a Support Page Thank You page
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

MailChimp signup form strip

Name and email form fields. When this form is submitted, these fields are subscribed to a MailChimp list.

Note that the "first name" and "last name" fields may be deleted; only "email" is required for this form to work.

Implementation tip
This form requires a MailChimp subscriber list to connect to. In MailChimp, go to the List you'd like to link up to the form. Follow this MailChimp form Webflow tutorial for instructions.

The field names of the form should match up with the field names in the MailChimp list.

NOTE: this Component System example is connected to a placeholder list in Chris' MailChimp account and redirects to a Support Page Thank You page
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

4 field form with secondary content

Form layout suitable for 4 fields, with secondary content on the left side, and underneath on mobile.

Primary form header

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Form with upload file field

Form layout suitable for 5 fields (including form upload field). Fields stack on landscape mobile.

Section Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Max file size 10MB.
Uploading...
fileuploaded.jpg
Upload failed. Max size for files is 10 MB.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Form within modal

Button that triggers a modal window containing a form. The form can be replaced with any other form element within the modal wrapper.

Implementation tip
This component has a hidden div below the button (.c-modal) which contains the modal content. There is an interaction on the button which shoes the modal on click/tap. This sibling class must be brought along with the button to allow the modal to work.
Button Text