Divi’s contact form is an overly versatile module that allows you to collect wisdom and correspondence from your internet web page visitors. By way of the use of the conditional commonplace sense settings built into Divi’s contact form module, you’ll merely create difficult and dynamic paperwork to your internet web page. This selection means that you can reveal additional fields depending on the answers given for the previous fields for your contact form to be able to collect additional information or supply follow-up questions that may very best be comparable depending on a prior answer. For example, you’ll have a checkbox to indicate interest inside the services you provide. If the checkbox is selected, you’ll reveal a dropdown for purchasers to choose the type of supplier they would really like, or to give you additional information. By way of the use of conditional commonplace sense, you’re moreover hiding fields that might not be associated with each individual, making the form more effective and further approachable, and extending the potential for someone completing the form.
There are such a large amount of use circumstances for together with conditional commonplace sense to the form, it doesn’t topic what type of internet web page you’ll have, and it may be able to be in agreement fortify the whole individual enjoy to your internet web site. In this tutorial, we will show you simple tips on how to reveal an alternatives dropdown after checking a box for your Divi contact form. Let’s get started!
Right here’s a preview of what we will design
What You Wish to Get Started
Previous than we begin, set up and turn on the Divi Theme and keep in mind to have the newest fashion of Divi to your internet web page.
Now, you’re able to start!
One of the simplest ways to Disclose an Alternatives Dropdown After Checking a Box in Your Divi Contact Form
Create a New Internet web page with a Premade Structure
Let’s get began thru the use of a premade structure from the Divi library. For this design, we will use the Space Baker Landing Internet web page from the House Baker Format Pack.
Add a brand spanking new internet web page on your internet web page and offers it a reputation, then select the technique to Use Divi Builder.
We can use a premade structure from the Divi library for this example, so select Browse Layouts.
Next, search for and select the Space Baker Landing Internet web page structure.
Select Use This Structure with the intention to upload the structure on your internet web page.
Now we’re able to build our design.
Add the Contact Form
Scroll to the “I Take Custom designed Orders!” section of the home baker structure. We can be together with a slightly form to this section. First, delete the “Contact Me” button situated underneath the heading text.
Next, insert a slightly form module underneath the heading text.
We wish to keep an eye on our structure so that all of the fields take in the entire width of the form. Open the contact form module settings, then open the settings for the Establish field.
Navigate to the Design tab and open the Structure settings. Make the Establish field fullwidth.
- Make Fullwidth: Positive
We’ll repeat the identical steps for the Email Deal with field. Open the Email field settings, then open the Structure settings beneath the Design tab and set the sector to fullwidth.
- Make Fullwidth: Positive
Next, let’s keep an eye on our Unsolicited mail Protection settings beneath the Content material subject material tab of the contact form settings. For this kind, I’m going to use the ReCaptcha protection supplier.
- Use A Unsolicited mail Protection Supplier: Positive
- Supplier Provider: ReCaptcha
Add a Revealing Chance Dropdown to the Form
Now we will add our revealing risk dropdown. For this example, we will add a checkbox to the form that can ask if shoppers are occupied with a custom designed order for baked pieces. Within the match that they take a look at the sphere, a dropdown field will appear where the individual will select the type of baked good they’re occupied with ordering. Let’s get started.
First, add a brand spanking new field to the form.
Open the new field settings and add the following content material subject material beneath the Text settings.
- Field ID:
- Establish: Thinking about a custom designed order?
Next, beneath field alternatives, set the following:
- Type: Checkboxes
- Alternatives: Positive
- Required Field: No
Go back to touch form settings and add every other new field. This could be our revealed alternatives dropdown where customers select the type of baked good they need to order.
Open the new field alternatives and add the following field ID and identify:
- Field ID: What Type
- Establish: What Type of Baked Pieces?
Next, open the Field Alternatives and set the sector type to Select Dropdown. Then, add the decisions.
- Type: Select Dropdown
- Required Field: No
Now switch to the Conditional Just right judgment section and allow the conditional commonplace sense settings. Then, organize the rule of thumb to turn the sector depending on the checkbox above.
- Permit: Positive
- Regulations: Equals Positive
This rule gadgets up the form so that if the “Positive” checkbox above is selected, then the “What Type of Baked Pieces” field will appear. If the checkbox isn’t made up our minds on, the sort field will stay hidden.
Customize the Contact Form Design
Now that our contact form and the conditional commonplace sense is all organize, we will customize the design of the form to higher have compatibility the structure of the internet web page.
Open the contact form settings and navigate to the design tab. Underneath the sector alternatives, customize the settings as follows.
- Fields Background Color: #FFFFFF
- Fields Text Color: #906d5e
Next, set the sector padding and customize the font settings.
- Fields Padding Very best: 16px
- Fields Padding Bottom: 16px
- Fields Padding Left: 20px
- Fields Padding Right kind: 20px
- Fields Font: Lato
- Fields Font Weight: Bold
- Fields Font Style: Capitalized (TT)
- Fields Letter Spacing: 0.1em
Now switch to the button settings and customize the button varieties as follows:
- Use Custom designed Sorts for Button: Positive
- Button Text Color: #3b261e
- Button Background: #dcc087
Next, customize the button border and font settings.
- Button Border Color: #dcc087
- Button Border Radius: 0px
- Button Letter Spacing: 0.1em
- Button Font: Lato
- Button Font Weight: Heavy
- Button Font Style: Capitalized (TT)
Then, modify the button margin and padding as follows:
- Button Margin Very best: 10px
- Button Padding Very best: 16px
- Button Padding Bottom: 16px
- Button Padding Left: 32px
- Button Padding Right kind: 32px
In any case, we’ll modify the border settings with the intention to upload borders around the form inputs.
- Imputs Border Width: 1px
- Inputs Border Color: #3b261e
That completes the entire design of the contact form. Let’s take a look at the form in movement with the revealing alternatives dropdown.
Conditional commonplace sense is simple to put into effect in Divi’s contact form module and allows you to create dynamic paperwork that supply comparable fields to the individual in line with their previous answers. While the example in this tutorial is moderately simple, you’ll use conditional commonplace sense to create difficult paperwork with a couple of circumstances of conditional commonplace sense. To learn additional about what you’ll do with Divi’s contact form and conditional commonplace sense, check out this newsletter on The best way to Create a Flexible Divi Touch Shape with Conditional Good judgment. Have you ever ever used the conditional commonplace sense alternatives to your internet web page’s contact form? We’d love to hear from you inside the comments!
The submit The best way to Divulge an Choices Dropdown After Checking a Field in Your Divi Touch Shape appeared first on Chic Topics Weblog.