Form Sections

Layout Demo URL: https://diviwp.com/ui/sections/form-sections/

Forms Sections contain forms. These can configured to act like newsletter sign-up forms or for full contact forms for your product, business, services or landing page. 

They contain a combination of Text Modules with Gravity Forms Shortcodes as well as Divi's built-in Contact Form Module. 

Beautiful form design increases conversions so each form element is carefully designed to produce elegant and clear input fields. 

We've grouped the sections below starting with the Contact Form Sections. 

Editing the demo content

Each DiviWP Section can be edited using the Visual Builder. 

You can make your changes to various module settings, upload new images, change colors, toggle between the desktop, tablet and mobile views and publish your page to achieve the look in the demo.

In some sections outlined below, Custom CSS is necessary to achieve a desired affect or an optimal responsive user experience and where the Divi Builder was unable to do it with it's Module settings alone. 

Why Custom CSS is used in Sections

Divi is an incredible builder and you can certainly do a ton of things with its built-in settings. 

We're sure we'll see the introduction of even more new settings in time, but for now, we believe it does not (yet) have the ability to configure  the necessary settings to create a particular interface design or effects. 

So by including Custom CSS in a seperate Code Module or labeled within the Row, Column or Module, you can learn how we've used various CSS properties to achieve a desired effect. 

How to view Custom CSS

When you are editing in the Visual Mode and building on the front-end of your website, Custom CSS Code Modules or Custom CSS configured within a Row, Column or Module is not visible.

Accessing the Layer View or Wireframe mode gives you access to your page and section structure, displaying all elements in an organized, nested hierarchy list that clearly showcases your page structure. Learn more about Layer View and Wireframe mode.

Contact Form Custom CSS in use in sections (scroll down for in-depth documentation)

  • Form Section 3 - Contact Form Module
  • Form Section 4 - Contact Form Module
  • Form Section 6 - Contact Form Module
  • Form Section 8 - Contact Form Module
  • Form Section 10 - Contact Form Module
  • Form Section 11 - Contact Form Module

Gravity Forms Custom CSS in use in sections (scroll down for in-depth documentation)

  • Gravity Forms Form Section 1 - Custom CSS Code Module
  • Gravity Forms Form Section 2 - Custom CSS Code Module
  • Gravity Forms Form Section 5 - Custom CSS Code Module
  • Gravity Forms Form Section 7 - Custom CSS Code Module
  • Gravity Forms Form Section 9 - Custom CSS Code Module

Related documentation:

Support is always on hand

You can rest assured that support is always on-hand and we'll be able to guide you as far as possible should you require assistance with any custom CSS we have included in our layouts, templates or sections. 

Form Sections 3, 4, 6 and 8 - Contact Form Module

In the layers view below, you can see the Custom CSS module is targeting the Contact Form Module with a custom class of .diviwp-contact-form-gray-input. (Custom Classes are applied in Module Settings → Advanced → CSS ID and Classes) 

This CSS enables the unique design of the Contact Form Module that is not possible to achieve using only the Contact Form Module settings. 

The CSS enables the form to format beautifully across tablet and mobile views:

Tablet view

Mobile view

Note:

  • Contact Form Sections 3, 4 and 8 use the same custom class name and custom CSS: diviwp-contact-form-gray-input
  • Contact Form Sections 6 uses a different custom class name and custom CSS: diviwp-contact-form-white-input however the properties are identical besides the input field color.

Form Sections 10 and11 - Contact Form Modules

These forms include a range of input field types such as radio buttons, drop-down fields and input texts. 

In the layers view below, you can see the Custom CSS module is targeting the Contact Form Module with a custom class of .diviwp-contact-form-gray-input. (Custom Classes are applied in Module Settings → Advanced → CSS ID and Classes) 

This CSS enables the unique design of the Contact Form Module that is not possible to achieve using only the Contact Form Module settings. 

The CSS enables the form to format beautifully across tablet and mobile views:

Tablet view 


Mobile view

Note:

  • Contact Form Sections 10 and 11 use the same custom class name and custom CSS: diviwp-multi-contact-form-gray-input

Gravity Forms Documentation

Gravity Forms Form Sections 1,2,5, and 7 - Custom CSS

Desktop view

Tablet view

Mobile view

Configuration

In order for your Gravity Forms to work with the correct custom CSS within each section, you'll need to identify which classnames to apply to each of your Gravity Forms. 

In Newsletter Section 1, we can examine the wireframe view:

The module labeled "Gravity Forms CSS Code for .diviwp-gf-form-gray-input" is describing the classname it is targeting. 

In this instance, you would head to your Gravity Form individual form settings and add the custom class name diviwp-gf-form-gray-input and gf_simple_horizontal.

Here's an example of that:

The additional classname of gf_simple_horizontal are helper classes to achieve the side-by-side input-with-button design in the various sections.

You'll also need to add the Custom CSS Class gf_inline to the email field within your individual Gravity Form for Sections 1,3,5,7,9:

All of the CSS properties for these classes are within the Module labeled "Gravity Forms CSS Code for .diviwp-gf-form-gray-input" 

You can edit the CSS and customise it to match your own look and feel. 

Note:

Form Sections 5,7 and 9, the custom classnames and custom code modules being used: 

  • Section 1 and 2 - diviwp-gf-form-gray-input
  • Section 5 -           diviwp-gf-form-white-input
  • Section 7-            diviwp-gf-form-gray-input

Gravity Forms Section 9 - Custom CSS 

This form includes a range of input field types such as radio buttons, checkboxes, drop-down fields and input texts. 

We can examine the wireframe view:

Just as the other Gravity Forms, all the CSS is housed in the Custom CSS Code module which is referencing the class .diviwp-gf-multi-contact-gray-input

You would then update your form settings with this classname. Here's an example:

You do not need to make any further changes to your form as all the CSS is housed in the "Gravity Forms CSS Code for .diviwp-gf-multi-contact-gray-input" code module. 

Support is always on hand

You can rest assured that support is always on-hand and we'll be able to guide you as far as possible should you require assistance with any custom CSS we have included in our layouts, templates or sections.