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
second Construction
third Construction
Fourth Construction
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.
We will use a premade construction from the Divi library for this situation, so select Browse Layouts.
Search for and select the Shoe Repair Contact Internet web page construction.
Choose Use This Construction so that you could upload the construction on your internet web page.
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.
Open the row settings and add padding to the left and proper,
- Padding-left: 15%
- Padding-right: 15%
Choose the responsive alternatives and set the cellular padding.
- Padding-left: 5%
- Padding-right: 5%
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.
Add a brand spanking new field underneath the First Establish field. Set the sphere ID and Establish to Final Establish.
Inside the final identify field settings, open the Construction settings and set Make Fullwidth to No.
- Fullwidth: No
Next, beneath the contact form settings switch the order of Subject and Phone so that Phone is listed forward of Subject.
Open the subject field construction settings and make the sphere fullwidth.
- Make Fullwidth: Positive
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
Add a height margin to the button.
- Button margin- height: 10px
Finally, navigate to the Border settings and add rounded corners to the inputs.
- Inputs rounded corners: 30px
Final Design
Right here’s the whole design on desktop and cellular.
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.
Alternate the row construction.
Open the row design settings and turn off Use Custom designed Gutter Width.
- Use Custom designed Gutter Width: No
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;
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
Next, open the settings for column 2 and repeat the steps to remove the border.
- Correct border width: 0px
Set the “Contact Us” text to be centered.
Switch the contact form to the correct column. Delete the empty final section.
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.
Add a brand spanking new field underneath the First Establish field. Set the sphere ID and Establish to Final Establish.
Inside the final identify field settings, open the Construction settings and set Make Fullwidth to No.
- Fullwidth: No
Alternate the order of the phone and subject fields so that phone comes forward of subject.
Open the sphere settings for Electronic mail, Phone, and Subject, and set the construction to fullwidth.
- Make Fullwidth: Positive
Customizing the Contact Form Design
Open the row settings, then open the column 2 settings. Set the background color.
- Background: #DBC2B3
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
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
Then add a box shadow to the column.
Finally, open the contact form settings and change the sphere text color.
- Fields text color: #000000
Final Design
Right here’s the whole design for the second construction.
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.
Switch the care for module to the correct column.
Next, switch the Contact Us text module to the left column, then delete the remaining empty row.
Switch the contact form to the left column, underneath the Contact Us text module. Delete the remaining empty section.
Open the row design settings and turn off Use Custom designed Gutter Width.
- Use Custom designed Gutter Width: No
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. Repeat the steps to remove the border from column 2.
- Correct border width: 0px
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.
Final Design
Right here’s the whole design for the third construction.
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.
Switch the care for module to the correct column.
Switch the contact form to the left column. Delete the remaining empty section.
Open the row design settings and turn off Use Custom designed Gutter Width.
- Use Custom designed Gutter Width: No
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
Next, open the settings for column 2 and repeat the steps to remove the border.
- Correct border width: 0px
Open the text module settings for the Contact Us text and center the text.
- Text Alignment: Center
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.
Once you make each and every field fullwidth, the form should look something like this.
Now, alternate the sphere ID and Establish for the Establish field to First Establish.
Add a brand spanking new field underneath the First Establish field. Set the sphere ID and Establish to Final Establish.
Alternate the order of the phone and subject fields so that phone comes forward of the subject.
Customizing the Contact Form Design
Inside the contact form design settings, set the Fields 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 Turn into: Horizontal
To make the background mask art work upper on cellular, let’s use the responsive settings.
- Mask Turn into on Cellular: Horizontal and Rotate
Final Design
Right here’s the whole design for the fourth construction.
Final Finish consequence
Let’s take a look at all of our final designs once over again.
First Construction
second Construction
third Construction
Fourth Construction
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.
Contents
- 1 Sneak Peek
- 2 What You Need to Get Started
- 3 4 Construction Chances for Your Divi Contact Form The usage of Inline & Fullwidth Fields
- 4 Final Finish consequence
- 5 Final Concepts
- 6 How To Get Internet Design Purchasers: 7 Professional Guidelines
- 7 The way to Get Siri to Learn an Article (iOS and iPadOS)
- 8 The Seven Sins of Visitor Running a blog: Actual Tales
0 Comments