The best way to Divulge an Choices Dropdown After Checking a Field in Your Divi Touch Shape

by | Aug 27, 2022 | Etcetera | 0 comments

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!

Sneak Peek

Right here’s a preview of what we will design

Divi Reveal Options Dropdown Contact Form Final Design Mobile

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.

See also  The place Nonprofits Spend Their Time On Social Media in 2022

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.

Divi Reveal Options Dropdown Contact Form Use Builder

We can use a premade structure from the Divi library for this example, so select Browse Layouts.

Divi Reveal Options Dropdown Contact Form Browse Layouts

Next, search for and select the Space Baker Landing Internet web page structure.

Divi Reveal Options Dropdown Contact Form Find Layout

Select Use This Structure with the intention to upload the structure on your internet web page.

Divi Reveal Options Dropdown Contact Form Use Layout

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.

Divi Reveal Options Dropdown Contact Form Delete Button

Next, insert a slightly form module underneath the heading text.

Divi Reveal Options Dropdown Contact Form Add Form

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.

Divi Reveal Options Dropdown Contact Form Modify Field

Navigate to the Design tab and open the Structure settings. Make the Establish field fullwidth.

  • Make Fullwidth: Positive

Divi Reveal Options Dropdown Contact Form Fullwidth

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

Divi Reveal Options Dropdown Contact Form Fullwidth 2

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

Divi Reveal Options Dropdown Contact Form Spam

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.

See also  40 Advert Blocker Stats Manufacturers Want to Know in 2021

First, add a brand spanking new field to the form.

Divi Reveal Options Dropdown Contact Form Add Field

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?

Divi Reveal Options Dropdown Contact Form Field Title

Next, beneath field alternatives, set the following:

  • Type: Checkboxes
  • Alternatives: Positive
  • Required Field: No

Divi Reveal Options Dropdown Contact Form Field Options

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.

Divi Reveal Options Dropdown Contact Form Add New Field

Open the new field alternatives and add the following field ID and identify:

  • Field ID: What Type
  • Establish: What Type of Baked Pieces?

Divi Reveal Options Dropdown Contact Form Field ID Title

Next, open the Field Alternatives and set the sector type to Select Dropdown. Then, add the decisions.

  • Type: Select Dropdown
  • Alternatives:
    • Breads
    • Cakes
    • Truffles
    • Pastries
    • Other
  • Required Field: No

Divi Reveal Options Dropdown Contact Form Field Options Dropdown

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.

Divi Reveal Options Dropdown Contact Form Conditional Logic

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

Divi Reveal Options Dropdown Contact Form Fields Background Text

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

Divi Reveal Options Dropdown Contact Form Fields Padding Font

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
See also  It’s Right here! New Forminator Box Grouping and Repeater Choice Is Now To be had

Divi Reveal Options Dropdown Contact Form Button Styles

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)

Divi Reveal Options Dropdown Contact Form Button Border Font

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

Divi Reveal Options Dropdown Contact Form Padding Margin

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

Divi Reveal Options Dropdown Contact Form Inputs Border

Final Outcome

That completes the entire design of the contact form. Let’s take a look at the form in movement with the revealing alternatives dropdown.

Divi Reveal Options Dropdown Contact Form Final Design Mobile

Final Concepts

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.

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 *