Form Module

What You'll Learn

What the Form Module Is

How to Add the Form Module

How to Customize the Form Module

What Is The Form Module?

The Form Module allows you to add a Net-Results form to your landing pages that you can then style to match your desired look and feel.

Adding The Form Module

The Form module can be added to a full width, regular, or specialty section. Add a Form to your landing page by clicking the grey (+) button and typing “code” to search for the module.

Once the module has been placed with the text of your choosing, you’ll be met with three customizable option sections:

  • Content
  • Design
  • Advanced

Content Options

The content options of your Form will consist of three categories:

Form

Choose the form you’d like to use from your pool of Net-Results forms. Easily scroll through your list of forms by clicking the dropdown in this section.

Background

Choose from a variety of background options to bring additional life to you forms. These choices can be solid colors, images, and even videos!
Be sure to check out our article on assets to ensure your background is as perfect as can be!

Admin Level

This will change the label of the module in the builder for easy identification.

Design Options

The Design Options will allow you to change the appearance of your form to not only match the appearance and tone being used on your landing page, but to also encourage your visitors to fill out their information in your fun and interactive form. You’ll be able to make changes to the following aspects of your form:

Text

Due to the form populating with its text in place, you won’t need to worry about adding anymore here.
You still have the option to customize the Text Orientation as well as add a Text Shadow for added effect.

Form Design

Scroll beyond the text options to customize the sizing and spacing of your Form to help create the perfect balance on your landing page. Finish changing the appearance of your Form by customizing the surrounding border, shadows, and animations or filters.
This is not the only place you can customize your forms, but we’ll be getting to that a little bit later in this article.

Advanced

Want to make some changes that may require some additional coding? Look to the Advanced tab to make changes to the way your Form is being seen by your visitors.

CSS ID and Classes

Add additional CSS Styling by using IDs or classes. These can also be used to create links to particular sections of your page.

Custom CSS

The Advanced tab also allows you to further design your Form module by adding custom CSS that you can enter based on the field of depth options available to you (Before, Main Element, and After).

Visibility

This option allows you to control which devices can view your Form. You can decide to disable the visibility for phones, tablets, and browser windows by checking the box next to the devices you’d like to exclude.

Additional CSS Styling Options

Want to make some custom changes to the appearance of your form but didn’t see the option above? No worries! Adding CSS Styling to your page level settings will change the appearance of your form in real time so you can be sure your customers are seeing exactly what you had hoped.
To add CSS styling to your form, start by clicking the three dots at the bottom of your page to open up your Page Settings.

Head to the Advanced Tab, open up your Custom CSS section and add any custom CSS that you’d like to use. The Net-Results styling sheet will provide you with a base from which you can begin to customize your forms, but our CS Team is always here to help with any questions you may have!

Updated on May 1, 2019

Was this article helpful?