The right way to Mix Inline & Fullwidth Fields in Divi’s Touch Shape Module

by | Oct 4, 2022 | Etcetera | 0 comments

The contact form is crucial section to include on your internet website online if you want to clutch emails and convert your visitors into shoppers. The Divi Contact Form Module can also be merely customized to create sexy and interesting contact forms for every type of internet websites. The module comes with two width alternatives that can be applied to each and every field inside the form: inline or full-width. In this educational, we will be able to supply 4 unique construction possibilities for your Divi contact form the usage of inline and full-width fields.

Let’s get started!

Sneak Peek

Right here’s a preview of what we will be able to design.

First Construction

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Final Design Mobile

second Construction

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Final Design Mobile

third Construction

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Final Design Mobile

Fourth Construction

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Final Design Mobile

What You Need to Get Started

Previous than we begin, set up and turn on the Divi Theme and also you’ll need to have the latest fashion of Divi on your internet website online.

Now, you’re able to start out!

4 Construction Chances for Your Divi Contact Form The usage of Inline & Fullwidth Fields

Choose the Premade Construction

Each of the 4 designs are modified from the Shoe Repair Contact Internet web page construction from the Shoe Restore Structure Pack, which you’ll find inside the Divi library.

Add a brand spanking new internet web page on your internet website online and gives it a reputation, then select Use Divi Builder.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout Use Builder

We will use a premade construction from the Divi library for this situation, so select Browse Layouts.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout Browse Layout

Search for and select the Shoe Repair Contact Internet web page construction.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout Find Layout

Choose Use This Construction so that you could upload the construction on your internet web page.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout Use Layout

Now we’re ready to build our designs.

First Construction

First, switch the row containing the contact form module to the section above, proper underneath the row with the blurb modules. You then’ll delete the remaining empty section.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Move Row

Open the row settings and add padding to the left and proper,

  • Padding-left: 15%
  • Padding-right: 15%

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Padding

Choose the responsive alternatives and set the cellular padding.

  • Padding-left: 5%
  • Padding-right: 5%

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Responsive Spacing

Bettering the Contact Form Construction with Inline and Fullwidth Fields

For this construction, we will be able to create two separate fields for first identify and shutting identify. Open the contact form module settings and change the sphere ID and Establish for the Establish field to First Establish.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Rename Field

Add a brand spanking new field underneath the First Establish field. Set the sphere ID and Establish to Final Establish.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Add Field

Inside the final identify field settings, open the Construction settings and set Make Fullwidth to No.

  • Fullwidth: No

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Make Inline

Next, beneath the contact form settings switch the order of Subject and Phone so that Phone is listed forward of Subject.

See also  How To Repair The “Error Organising a Database Connection” in WordPress

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Field Order

Open the subject field construction settings and make the sphere fullwidth.

  • Make Fullwidth: Positive

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Make Fullwidth

Customizing the Contact Form Design

Now let’s keep watch over a few settings to complete the design. Navigate to the design tab of the contact form settings.

First, alternate the button background color.

  • Button Background: #DBC2B3

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Button Background

Add a height margin to the button.

  • Button margin- height: 10px

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Button Margin

Finally, navigate to the Border settings and add rounded corners to the inputs.

  • Inputs rounded corners: 30px

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Rounded Corners

Final Design

Right here’s the whole design on desktop and cellular.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Final Design Mobile

second Construction

For our second design, we will be able to switch the blurb modules to the left side of the internet web page and have the contact form at the proper side of the internet web page. Switch the blurb modules to at least one column.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2

Alternate the row construction.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Row Layout

Open the row design settings and turn off Use Custom designed Gutter Width.

  • Use Custom designed Gutter Width: No

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Custom Gutter Width

Add some code to the Number one Part Custom designed CSS so that you could vertically align the blurb modules and the contact form.

align-items:center;

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Main Element CSS

Now we want to remove the thin border between the columns. Open the row settings, then open the settings for column 1. Beneath the Design tab, navigate to the border settings and remove the border.

  • Correct border width: 0px

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Right Border

Next, open the settings for column 2 and repeat the steps to remove the border.

  • Correct border width: 0px

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Right Border Width

Set the “Contact Us” text to be centered.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Text Alignment

Switch the contact form to the correct column. Delete the empty final section.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Move Contact Form

Bettering the Contact Form Construction with Inline and Fullwidth Fields

This construction will also have two separate fields for first identify and shutting identify. Open the contact form module settings and change the sphere ID and Establish for the Establish field to First Establish.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Field ID and Title

Add a brand spanking new field underneath the First Establish field. Set the sphere ID and Establish to Final Establish.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Field ID

Inside the final identify field settings, open the Construction settings and set Make Fullwidth to No.

  • Fullwidth: No

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 No Fullwidth

Alternate the order of the phone and subject fields so that phone comes forward of subject.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Reorder Fields

Open the sphere settings for Electronic mail, Phone, and Subject, and set the construction to fullwidth.

  • Make Fullwidth: Positive

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Make Fullwidth

Customizing the Contact Form Design

Open the row settings, then open the column 2 settings. Set the background color.

  • Background: #DBC2B3

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Add Background

All over the column 2 settings, navigate to the design tab and add some padding.

  • Padding-top: 50px
  • Padding-bottom: 50px
  • Padding-left: 50px
  • Padding-right: 50px

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Add Padding

Choose the cellular icon to change the responsive settings. Set the padding for cellular.

  • Padding-top: 30px
  • Padding-bottom: 30px
  • Padding-left: 30px
  • Padding-right: 30px
See also  Get a Unfastened Architect Structure Pack for Divi

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Add Responsive Padding

Then add a box shadow to the column.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Box Shadow

Finally, open the contact form settings and change the sphere text color.

  • Fields text color: #000000

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Field Text Color

Final Design

Right here’s the whole design for the second construction.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Final Design Mobile

third Construction

For the third construction, we will be able to have the contact form on the left and the blurb modules at the proper. Let’s get started by means of changing the column development of the row containing the blurb modules.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Choose Layout

Switch the care for module to the correct column.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Move Address

Next, switch the Contact Us text module to the left column, then delete the remaining empty row.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Move Text

Switch the contact form to the left column, underneath the Contact Us text module. Delete the remaining empty section.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Move Module

Open the row design settings and turn off Use Custom designed Gutter Width.

  • Use Custom designed Gutter Width: No

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 No Custom Gutter Width

Add some code to the Number one Part Custom designed CSS so that you could vertically align the blurb modules and the contact form.

align-items:center;

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Custom CSS

Open the row settings, then open the settings for column 1. Beneath the Design tab, navigate to the border settings and remove the border. Repeat the steps to remove the border from column 2.

  • Correct border width: 0px

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Border Width

Bettering the Contact Form Construction

We will cross away the sphere widths as-is for the third design, alternatively, open the contact form settings and switch the order of the phone amount and subject field so that the phone comes first.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Reorder Fields

Final Design

Right here’s the whole design for the third construction.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Final Design Mobile

Fourth Construction

For the fourth and supreme construction, the contact form it is going to be on the left and the blurb modules at the proper. Once over again, we will be able to get began by means of changing the column development of the row containing the blurb modules.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Choose Layout

Switch the care for module to the correct column.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Move Module

Switch the contact form to the left column. Delete the remaining empty section.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Move Form

Open the row design settings and turn off Use Custom designed Gutter Width.

  • Use Custom designed Gutter Width: No

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Custom Gutter

Add some code to the Number one Part Custom designed CSS so that you could vertically align the blurb modules and the contact form.

align-items:center;

Open the row settings, then open the settings for column 1. Beneath the Design tab, navigate to the border settings and remove the border.

  • Correct border width: 0px

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Border Width

Next, open the settings for column 2 and repeat the steps to remove the border.

  • Correct border width: 0px
See also  An Final Information to SaaS Pricing Fashions and Methods

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Border Width 2

Open the text module settings for the Contact Us text and center the text.

  • Text Alignment: Center

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Text Alignment

Bettering the Contact Form Construction with Inline and Fullwidth Fields

For this design, all of our fields it is going to be fullwidth. Open the contact form settings, then open the settings for each and every field. Beneath the design tab, select Construction and set Make Fullwidth to Positive.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Make Fullwidth

Once you make each and every field fullwidth, the form should look something like this.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Fullwidth

Now, alternate the sphere ID and Establish for the Establish field to First Establish.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Field ID

Add a brand spanking new field underneath the First Establish field. Set the sphere ID and Establish to Final Establish.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Last Name Field

Alternate the order of the phone and subject fields so that phone comes forward of the subject.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Field Order

Customizing the Contact Form Design

Inside the contact form design settings, set the Fields Text Color to black.

  • Fields Text Color: #000000

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Text Color

Open the section settings and add a background color.

  • Background: #DBC2B3

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Add Background

Finally, add a background mask.

  • Background Mask: Arch
  • Mask Turn into: Horizontal

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Add Background Mask

To make the background mask art work upper on cellular, let’s use the responsive settings.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Responsive Background Mask

  • Mask Turn into on Cellular: Horizontal and Rotate

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Responsive Mask Transform

Final Design

Right here’s the whole design for the fourth construction.

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Final Design Mobile

Final Finish consequence

Let’s take a look at all of our final designs once over again.

First Construction

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 1 Final Design Mobile

second Construction

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 2 Final Design Mobile

third Construction

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 3 Final Design Mobile

Fourth Construction

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Final Design

Divi Contact Form Layouts With Inline and Fullwidth Fields Layout 4 Final Design Mobile

Final Concepts

Having a great-looking contact form can increase your conversions and we could on your visitors to glue straight away with you. As we’ve demonstrated through this newsletter, you’ll use the inline and fullwidth field alternatives to create different appears to be and layouts for your form, and Divi’s built-in design alternatives mean you can create unique and engaging designs to help the form stand out. To be informed further regarding the different ways you’ll style the contact form module, check out this educational for making a full-screen responsive shape with zoom-in scroll animation, and this educational for 5 extra distinctive styling choices. How have you ever ever styled your contact form module? We might in reality like to hear from you inside the comments!

The put up The right way to Mix Inline & Fullwidth Fields in Divi’s Touch Shape Module gave the impression first on Sublime Subject matters Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *