Wpdaily

Daily WordPress News

How to Set a Minimum Length for Divi Contact Form Fields

One particular field, the Input Field, allows you to set the minimum character length for the field inside Divi’s Contact Form Module. This is a great way to control the field’s content. In this post, we’ll see how to set a minimum length for the contact form fields to help you get the exact information you need. We’ll also see a few examples of how it can be used, and we’ll see an example of adding the contact form to a Divi layout.

Let’s get started.

Preview

Desktop Minimum Length for Contact Form Fields Example

Desktop Minimum Length for Contact Form Fields Example

Phone Minimum Length for Contact Form Fields Example

Phone Minimum Length for Contact Form Fields Example

How to Set a Minimum Length for Contact Form Fields

First, open the Contact Form’s settings as normal by hovering over the Contact Form Module and clicking the dark gray gear icon.

How to Set a Minimum Length for Contact Form Fields

Next, add a new field or open the settings for the field you want to limit by clicking its gear icon. For this example, I’ll set the Minimum Length for the Message field.

How to Set a Minimum Length for Contact Form Fields

Field Options

Next, scroll down to Field Options. Select the Type dropdown box to see the options.

How to Set a Minimum Length for Contact Form Fields

Choose Input Field from your choices. The Input Field allows users to enter letters, numbers, or symbols, and you can control this.

How to Set a Minimum Length for Contact Form Fields

This changes the field type and opens a new set of options, including Minimum Length, Maximum Length, and Allowed Symbols.

How to Set a Minimum Length for Contact Form Fields

To adjust the Minimum Length, enter the number of characters you want to use as the required minimum. Use the slider or enter the number into the field.

How to Set a Minimum Length for Contact Form Fields

Why Set a Minimum Length for Contact Form Fields?

Limiting the minimum and maximum characters for the Input Field helps ensure you get the data you need. This can keep users from entering the wrong number of characters, such as a phone number or zip code, limit the amount of information they can provide, etc.

The Input Field’s Allowed Symbols option lets you choose how to use the field. Choose between letters only, numbers only, or both. With these options, you can determine the types of data the users can input into the field.

Generally, 100 characters are around 16 words. So, if you wanted around 100 words, you’d set the Minimum Length to 1600. The typical paragraph is around 50 words (of course, this varies depending on the type of writing). If you wanted a typical paragraph of text, you could set the Minimum to 800 characters. Don’t require too many words, as this can cause users to abandon your contact form. Set the limit as low as possible to get the information you need.

How to Set a Minimum Length for Contact Form Fields

Zip Code Example

For example, if the field is used to get a five-digit zip code, you can set the field to allow numbers only and limit both the minimum and maximum to 5. In the example below, I’ve changed the Field ID and Field Title to identify the purpose of the field. I’ve set both the Minimum and Maximum Lengths to 5. For Allowed Symbols, I’ve selected Numbers Only.

Why Set a Minimum Length for Contact Form Fields

Users can only input numbers; they see an error message if they’ve added letters or didn’t meet the minimum and maximum character count.

Why Set a Minimum Length for Contact Form Fields

How to Set a Minimum Length for Contact Form Fields

Detailed Description Example

As another example, if we wanted to ensure that we got a detailed description from the user, we could set a Minimum Length limit for the Input Field. This is ideal for any type of detailed information to decide or provide the help needed. Examples include providing information for a job application, a detailed description of work the user is requesting to have done, etc.

For example, if you published stories, you’d want as much information as possible for the story submission. Set the Minimum Length to help ensure you get the details you need. In this example, I’ve set the Field ID and Title to describe the field. For the Field Options, I’ve set the Minimum Length to 1000 characters and Allowed Symbols to show Alphanumeric Only.

Why Set a Minimum Length for Contact Form Fields

If the user doesn’t input enough characters, they’ll see an error telling them they haven’t reached the minimum character length.

How to Set a Minimum Length for Contact Form Fields

Minimum Length for Contact Form Fields Example

Now, let’s add a contact form to a Divi layout. For our example, I’ll add a Divi Contact Form Module to the landing page of the free Device Repair Layout Pack available within Divi. We’ll change the Message Textarea Field to an Input Field to limit the number of characters. This will encourage users to provide more information about the problem they need to solve rather than un-useful descriptions such as “it won’t work.”

For reference, here’s a look at the section before adding the Contact Form Module. I’ll replace the button with a contact form. As always, I’ll use design elements from the layout and integrate the new module.

Minimum Length for Contact Form Fields Example

Add Contact Form Module

First, delete the Button Module under the Section’s Title Text Module.

Minimum Length for Contact Form Fields Example

Next, add a Contact Form Module in its place.

Minimum Length for Contact Form Fields Example

Field Settings

Next, open the Field Settings for the Message field by clicking its gear icon.

Minimum Length for Contact Form Fields Example

Title

I’ll use the same Field ID because it makes sense for this field. Change the Title to a message that informs the user of the field’s purpose. In this case, I’ll use a description that gives them instructions. This description will be too long for phones so that it will have a shorter version.

  • Title (desktop and tablet): Thoroughly describe the problem
  • Title (phone): Describe the problem

Minimum Length for Contact Form Fields Example

Field Options

Change the Type to Input Field. I’ve set the Minimum Length to 800. This sets the minimum amount of text to around a paragraph of 50 words. We don’t want to overwhelm the user, which should be enough to get a good idea of the problem. For reference, this paragraph is 57 words. Close the submodule.

  • Type: Input Field
  • Minimum Length: 800

Minimum Length for Contact Form Fields Example

Text

Next, we’ll adjust the Text settings in the Contact Form Module’s Content tab. Change the Submit Button text to Make an appointment. This matches the button that we replaced. We’ll recreate that button within the contact form.

  • Submit Button: Make an appointment

Minimum Length for Contact Form Fields Example

Fields

Next, go to the Design tab. For the Fields settings, change the Fields Background Color to white and the Fields Text Color to black.

  • Background Color: #ffffff
  • Text Color: #000000

Minimum Length for Contact Form Fields Example

Next, add 15px to the Top and Bottom Margin. This brings the fields closer together vertically. Also, add 20px to the Top and Bottom Padding. This increases the vertical size of the fields. Both settings make the contact form’s fields match the email optin form in the footer. This doesn’t affect the Captcha field or the submit button, so we’ll adjust them with CSS.

  • Fields Margin: 15px Top and Bottom
  • Fields Padding: 20px Top and Bottom

Minimum Length for Contact Form Fields Example

Next, change the Font to Inter, set the Weight to Bold, the Style to TT, and the Letter Spacing to 1px. This makes the text match the email form in the footer.

  • Font: Inter
  • Weight: Bold
  • Style: TT
  • Letter Spacing: 1px

Minimum Length for Contact Form Fields Example

Captcha Text

Next, scroll down to Captcha Text. Set the Font to Inter, the Weight to Bold, and the Color to #f26440. This matches the phone number provided in the footer but with a smaller font.

  • Font: Inter
  • Weight: Bold
  • Color: #f26440

Minimum Length for Contact Form Fields Example

Button

Next, scroll down to Button and enable Use Custom Styles for Button. We’ll style the button to match the original that we deleted. Change the Size to 14px, the Color to black, and the Background Color to #edbf48.

  • Text Size: 14px
  • Font Color: #000000
  • Background Color: #edbf48

Minimum Length for Contact Form Fields Example

Set the Border Width and Border Radius to 0px.

  • Border Width: 0px
  • Border Radius: 0px

Minimum Length for Contact Form Fields Example

Change the Font to Inter, the Weight to Bold, and the Style to TT.

  • Font: Inter
  • Weight: Bold
  • Style: TT

Minimum Length for Contact Form Fields Example

Next, add 14px to the Top and Bottom and 20px to the Left and Right Button Padding. The button should now look the same as the original.

  • Padding: 14px Top and Bottom, 20px Left and Right

Minimum Length for Contact Form Fields Example

Sizing

Next, scroll down to Sizing. Change the Width to 80% and the Module Alignment to Center. This gives the contact form a more natural look for its location in the layout.

  • Width: 80%
  • Module Alignment: Center

Minimum Length for Contact Form Fields Example

CSS

Finally, go to the Advanced tab. Here, we’ll add some simple CSS to remove the Captcha field and button from the form field above them. Scroll down to the Contact Button and add the following CSS to the field.

  • Contact Button:
    margin-top: 15px

Minimum Length for Contact Form Fields Example

Lastly, scroll down to Captcha Field and enter the following CSS into the field. Close the module and save your settings.

  • Captcha Field: margin-top: 15px

Minimum Length for Contact Form Fields Example

Results

Desktop Minimum Length for Contact Form Fields Example

Desktop Minimum Length for Contact Form Fields Example

Phone Minimum Length for Contact Form Fields Example

Phone Minimum Length for Contact Form Fields Example

Ending Thoughts

That’s our look at how to set a minimum length for contact form fields. Setting the minimum, and by extension, the maximum, field length is both simple and beneficial. The Input field is a great way to limit or specify the number of characters the user can enter, helping to ensure you get the correct information or the details you need from your contact form.

We want to hear from you. Do you set a minimum length for your contact form fields? Let us know about your experience in the comments.

The post How to Set a Minimum Length for Divi Contact Form Fields appeared first on Elegant Themes Blog.

Source