How to Reveal an Options Dropdown After Checking a Box in Your Divi Contact Form

by | Aug 27, 2022 | Etcetera | 0 comments

Divi’s touch shape is an excessively flexible module that lets you gather knowledge and correspondence out of your web page guests. By way of the use of the conditional good judgment settings constructed into Divi’s touch shape module, you’ll be able to simply create advanced and dynamic bureaucracy on your web page. This option means that you can divulge further fields relying at the solutions given for the former fields to your touch shape to be able to gather more information or provide follow-up questions that can most effective be related relying on a previous solution. As an example, you will have a checkbox to suggest pastime within the services and products you supply. If the checkbox is chosen, you’ll be able to divulge a dropdown for customers to make a choice the kind of carrier they would like, or to come up with more information. By way of the use of conditional good judgment, you might be additionally hiding fields that might not be related to each consumer, making the shape more practical and extra approachable, and extending the chance of any person finishing the shape.

There are such a lot of use circumstances for including conditional good judgment to the shape, it doesn’t matter what form of web page you have got, and it may lend a hand enhance the full consumer enjoy in your web page. On this educational, we can display you how you can divulge an choices dropdown after checking a field to your Divi touch shape. Let’s get began!

Sneak Peek

Here’s a preview of what we can design

Divi Reveal Options Dropdown Contact Form Final Design Mobile

What You Want to Get Began

Earlier than we start, install and activate the Divi Theme and you’ll want to have the newest model of Divi in your web page.

Now, you’re ready to begin!

Learn how to Divulge an Choices Dropdown After Checking a Field in Your Divi Touch Shape

Create a New Web page with a Premade Format

Let’s get started by way of the use of a premade structure from the Divi library. For this design, we can use the House Baker Touchdown Web page from the Home Baker Layout Pack.

See also  Download a FREE Blog Post Template for Divi’s Home Baker Layout Pack

Upload a brand new web page for your web page and provides it a name, then choose the approach to Use Divi Builder.

Divi Reveal Options Dropdown Contact Form Use Builder

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

Divi Reveal Options Dropdown Contact Form Browse Layouts

Subsequent, seek for and choose the House Baker Touchdown Web page structure.

Divi Reveal Options Dropdown Contact Form Find Layout

Choose Use This Format so as to add the structure for your web page.

Divi Reveal Options Dropdown Contact Form Use Layout

Now we’re able to construct our design.

Upload the Touch Shape

Scroll to the “I Take Customized Orders!” phase of the house baker structure. We can be including a touch shape to this phase. First, delete the “Touch Me” button situated underneath the heading textual content.

Divi Reveal Options Dropdown Contact Form Delete Button

Subsequent, insert a touch shape module underneath the heading textual content.

Divi Reveal Options Dropdown Contact Form Add Form

We want to regulate our structure in order that the entire fields take in the total width of the shape. Open the touch shape module settings, then open the settings for the Identify box.

Divi Reveal Options Dropdown Contact Form Modify Field

Navigate to the Design tab and open the Format settings. Make the Identify box fullwidth.

  • Make Fullwidth: Sure

Divi Reveal Options Dropdown Contact Form Fullwidth

We’ll repeat the similar steps for the E mail Cope with box. Open the E mail box settings, then open the Format settings below the Design tab and set the sphere to fullwidth.

  • Make Fullwidth: Sure

Divi Reveal Options Dropdown Contact Form Fullwidth 2

Subsequent, let’s regulate our Junk mail Coverage settings below the Content material tab of the touch shape settings. For this manner, I’m going to make use of the ReCaptcha coverage carrier.

  • Use A Junk mail Coverage Provider: Sure
  • Provider Supplier: ReCaptcha

Divi Reveal Options Dropdown Contact Form Spam

Upload a Revealing Possibility Dropdown to the Shape

Now we will be able to upload our revealing choice dropdown. For this situation, we can upload a checkbox to the shape that can ask if customers are concerned about a customized order for baked items. In the event that they take a look at the field, a dropdown box will seem the place the consumer will choose the kind of baked excellent they’re concerned about ordering. Let’s get began.

See also  WordPress vs Laravel PHP Framework

First, upload a brand new box to the shape.

Divi Reveal Options Dropdown Contact Form Add Field

Open the brand new box settings and upload the next content material below the Textual content settings.

  • Box ID:
  • Name: Eager about a customized order?

Divi Reveal Options Dropdown Contact Form Field Title

Subsequent, below box choices, set the next:

  • Sort: Checkboxes
  • Choices: Sure
  • Required Box: No

Divi Reveal Options Dropdown Contact Form Field Options

Return to the touch shape settings and upload some other new box. This can be our printed choices dropdown the place consumers choose the kind of baked excellent they need to order.

Divi Reveal Options Dropdown Contact Form Add New Field

Open the brand new box choices and upload the next box ID and name:

  • Box ID: What Sort
  • Name: What Form of Baked Items?

Divi Reveal Options Dropdown Contact Form Field ID Title

Subsequent, open the Box Choices and set the sphere sort to Choose Dropdown. Then, upload the choices.

  • Sort: Choose Dropdown
  • Choices:
    • Breads
    • Muffins
    • Cakes
    • Pastries
    • Different
  • Required Box: No

Divi Reveal Options Dropdown Contact Form Field Options Dropdown

Now transfer to the Conditional Good judgment phase and allow the conditional good judgment settings. Then, arrange the guideline to show the sphere relying at the checkbox above.

  • Allow: Sure
  • Regulations: Equals Sure

This rule units up the shape in order that if the “Sure” checkbox above is chosen, then the “What Form of Baked Items” box will seem. If the checkbox isn’t decided on, the sort box will keep hidden.

Divi Reveal Options Dropdown Contact Form Conditional Logic

Customise the Touch Shape Design

Now that our touch shape and the conditional good judgment is all arrange, we will be able to customise the design of the shape to raised are compatible the structure of the web page.

Open the touch shape settings and navigate to the design tab. Beneath the sphere choices, customise the settings as follows.

  • Fields Background Colour: #FFFFFF
  • Fields Textual content Colour: #906d5e

Divi Reveal Options Dropdown Contact Form Fields Background Text

Subsequent, set the sphere padding and customise the font settings.

  • Fields Padding Most sensible: 16px
  • Fields Padding Backside: 16px
  • Fields Padding Left: 20px
  • Fields Padding Proper: 20px
  • Fields Font: Lato
  • Fields Font Weight: Daring
  • Fields Font Taste: Capitalized (TT)
  • Fields Letter Spacing: 0.1em
See also  An Overview of the New WooCommerce Blocks Plugin

Divi Reveal Options Dropdown Contact Form Fields Padding Font

Now transfer to the button settings and customise the button kinds as follows:

  • Use Customized Kinds for Button: Sure
  • Button Textual content Colour: #3b261e
  • Button Background: #dcc087

Divi Reveal Options Dropdown Contact Form Button Styles

Subsequent, customise the button border and font settings.

  • Button Border Colour: #dcc087
  • Button Border Radius: 0px
  • Button Letter Spacing: 0.1em
  • Button Font: Lato
  • Button Font Weight: Heavy
  • Button Font Taste: Capitalized (TT)

Divi Reveal Options Dropdown Contact Form Button Border Font

Then, adjust the button margin and padding as follows:

  • Button Margin Most sensible: 10px
  • Button Padding Most sensible: 16px
  • Button Padding Backside: 16px
  • Button Padding Left: 32px
  • Button Padding Proper: 32px

Divi Reveal Options Dropdown Contact Form Padding Margin

In any case, we’ll adjust the border settings so as to add borders across the shape inputs.

  • Imputs Border Width: 1px
  • Inputs Border Colour: #3b261e

Divi Reveal Options Dropdown Contact Form Inputs Border

Ultimate End result

That completes the total design of the touch shape. Let’s check out the shape in motion with the disclosing choices dropdown.

Divi Reveal Options Dropdown Contact Form Final Design Mobile

Ultimate Ideas

Conditional good judgment is simple to put in force in Divi’s touch shape module and lets you create dynamic bureaucracy that provide related fields to the consumer in response to their earlier solutions. Whilst the instance on this educational is quite easy, you’ll be able to use conditional good judgment to create advanced bureaucracy with more than one circumstances of conditional good judgment. To be told extra about what you’ll be able to do with Divi’s touch shape and conditional good judgment, take a look at this newsletter on How to Create a Versatile Divi Contact Form with Conditional Logic. Have you ever used the conditional good judgment choices in your web page’s touch shape? We’d love to listen to from you within the feedback!

The publish How to Reveal an Options Dropdown After Checking a Box in Your Divi Contact Form seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

Your email address will not be published.