Need to combine inline fields and module fullwidth fields Contact Form de Divi ?
Le Contact form is an important element to include on your website if you want to capture emails and convert your visitors into customers.
The module Contact Form de Divi can be easily customized to create forms attractive and captivating contact cards for all types of websites. This module comes with two display options that can be applied to each form field: online ou full width.
In this tutorial, we will present four unique layout possibilities for your Contact form Divi using inline and full-width fields.
Let's start!
Preview
Here's a preview of what we'll be designing.
First layout
Second layout
Third layout
Fourth layout
What you need to get started
Before we start, install and activate the Divi theme and make sure you have the latest version of Divi on your website.
Now you are ready to start!
4 sample layouts for Divi's Contact Form module using inline and full-width fields
Select the predefined layout
Each of the 4 templates are modified from the Shoe Repair Contact Page layout of Shoe Repair Layout Pack, which you can find in the Divi Library.
Add a new page to your website and give it a title, then select the option Use Divi Builder.
We'll be using a pre-made layout from the Divi Library for this example, so select Browse Layouts.
Find and select the Shoe Repair Contact Page layout.
Select Use This Layout to add the layout to your page.
We are now ready to design our examples.
First layout
First, move the line containing the module Contact Form to the section above, just below the line with Blurb modules. Then you can delete the remaining empty section.
Open line settings and add left and right padding,
- Padding (Left and Right): 15%
Select responsive options and set padding for mobile.
- Padding (Left and Right): 5%
Changed contact form layout with inline and full-width fields
For this layout, we will create two separate fields for first name and last name.
Open the Contact Form module settings and change the ID and Title field for the Last name field to First name.
Add a new field below the First Name field. Set the ID and Title field to Name.
In the name field settings, open the layout settings and set Make Fullwidth to No.
- Make Fullwidth: NO
Then, under the settings of the Contact form, change the order of the subject and phone so that the phone is listed before the subject.
Open the Subject field layout settings and set the field to full width.
- Make Fullwidth: YES
Contact form design customization
Now let's change a few settings to complete the design. Navigate to the Design tab of the Contact Form module settings.
First, change the background color of the button.
- Button Background: #DBC2B3
Add a top margin to the button.
- Button Margin (Top): 10px
Finally, go to border settings and add rounded corners to fields.
- Inputs Rounded Corners: 30px
See also: Divi: How to add a responsive logo to the "Fullwidth Menu" module
Final result of example 1
Here is the final result on desktop and mobile.
Second example
For our second example, we'll move the Blurb modules to the left side of the page and place the contact form on the right side of the page. Move Blurb modules to a column.
Change the row layout.
Open line design settings and turn off Use Custom Gutter Width.
- Use Custom Gutter Width: NO
Add code to the main element's custom CSS to vertically align the Blurb and Contact Form modules.
align-items:center;
Now we need to remove the thin border between the columns. Open row settings, then open column settings 1. Under the Design tab, go to border settings and remove the border.
- Right Border Width: 0px
Next, open column 2 settings and repeat the steps to remove the border.
- Right Border Width: 0px
Set the "Contact Us" text to be centered.
Move the contact form to the right column. Delete the remaining blank section.
Changed contact form layout with inline and full-width fields
This layout will also have two separate fields for first name and last name. Open the Contact Form module settings and change the ID and Title field for the Last name field to First name.
Add a new field below the First Name field. Set the ID and Title field to Name.
In the name field settings, open the layout settings and set Make Fullwidth to No.
- Make Fullwidth: NO
Change the order of the phone and subject fields so that the phone comes before the subject.
Open the field settings for Email, Phone, and Subject, and set the layout to full width.
- Make Fullwidth: YES
Contact form design customization
Open row settings, then open column settings 2. Set the background color.
- Background: #DBC2B3
In column 2 settings, go to the Design tab and add padding.
- Padding (Top, Bottom, Left and Right: 50px
Select the mobile icon to change responsive settings. Set padding for mobile.
- Padding (Top, Bottom, Left and Right): 30px
Then add a box shadow to the column.
Finally, open the Contact Form module settings and change the field text color.
- Fields Text Color: #000000
Final result of example 2
Here is the final result of the second layout.
Third example
For the third layout, we will have the contact form on the left and the Blurb modules on the right. Let's start by changing the column structure of the row containing the Blurb modules.
Move the address module to the right column.
Next, move the “Contact US” Text module to the left column, then delete the remaining blank line.
Move the Contact Form Module to the left column, under the “Contact US” Text module. Delete the remaining blank section.
Open the line settings, under the Design tab and turn off Use Custom Gutter Width
- Use Custom Gutter Width: NO
Add code to the main element's custom CSS to vertically align the Blurb and Contact Form modules.
align-items:center;
Open row settings, then open column settings 1. Under the Design tab, go to border settings and remove the border. Repeat the steps to remove the border from column 2.
- Right Border Width: 0px
Changing the layout of the contact form
We'll leave the field widths as they are for the third design, however, open the contact form settings and change the order of the phone number and subject field so that phone comes first.
Final result of example 3
Here is the final result of the third layout.
Read also: Divi: How to display the Fullwidth Header module in full screen
Fourth example
For the fourth and final layout, the Contact Form module will be on the left and the Blurb modules on the right. Again, we'll start by changing the column structure of the row containing the Blurb modules.
Move the address module to the right column.
Next, move the Contact Form module to the left column. Delete the remaining blank section.
Open the line settings, in the Design tab and disable Use Custom Gutter Width.
- Use Custom Gutter Width: NO
Add code to the main element's custom CSS to vertically align the Blurb and Contact Form modules.
align-items:center;
Open row settings, then open column settings 1. Under the Design tab, go to border settings and remove the border.
- Right Border Width: 0px
Next, open column 2 settings and repeat the steps to remove the border.
- Right Border Width: 0px
Open the Text module settings for the "Contact us" text and center the text.
- Text Alignment: Centered
Changed contact form layout with inline and full-width fields
For this design, all of our fields will be full-width. Open the Contact Form module settings, then open the settings for each field. On the Design tab, select layout and define Make Fullwidth on YES.
Once you've created each full-width field, the form should look like this.
Now change the ID and Title field for the Last Name field to First Name.
Add a new field below the First Name field. Set the ID and Title field to Name.
Change the order of the phone and subject fields so that the phone comes before the subject.
Customizing the Contact Form module design
In the module settings, in the Design tab, set the field text color to black.
- Fields Text Color: #000000
Open the section settings and add a background color.
- Background: #DBC2B3
Finally, add a background mask.
- Background Mask: Arch
- Mask Transform: horizontal
To make the background mask work better on mobile, let's use the responsive settings.
- Mask Transform (Phone): horizontal and rotation
Final result
Here is the final result of the fourth layout.
Final results
Let's take a look at all of our examples one more time.
First example
Second example
Third example
Fourth example
Download DIVI now!!!
Conclusion
Having an attractive contact form can increase your conversions and allow your visitors to connect directly with you.
As we've demonstrated in this article, you can use the inline and fullwidth field options to create different looks and layouts for your form, and Divi's built-in design options allow you to create unique designs and attractive to help the form stand out.
Hopefully this technique will add another useful design skill for future projects.
We hope this tutorial will inspire you for your next Divi projects. If you have any concerns or suggestions, find us in the comments section to talk about it.
You can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites.
Do not hesitate to also consult our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
