[V6] Dropdown element

About the Dropdown element

The Dropdown element is usually used for a Contact Form to allow the visitors to select an option from a dropdown menu. Besides, you can drop it inside a Product Module to enable the customers to send you their selection along with the order.

From the GemPages Dashboard, open your preferred template to edit. You can quickly find the Dropdown element on the left sidebar of the editor page, under the “Form field” section.

When clicking on the element, you will find its configuration options in the left sidebar, including the Settings and Design tabs.

Configure the Settings Tab

Name

The name field will be filled in by default to ensure that the dropdown can function correctly. Kindly be noted that this field is required.

Click on each option to customize further.

• Label: The option labels will be displayed on the drop-down menu for your customers to choose.

• Value: Normally, you will receive valid contact form submissions by email. The option value will be attached to the form.

In case the Dropdown element is dropped inside a Product Module, the option value will be attached to the order as below:

Required

Toggle on the “Required” option if it is compulsory for the visitors to select an option from the Dropdown.

Typography

You can determine the display of the message inside the input field.

• Font Weight: Select your preferred font-weight from the dropdown.
• Font Size: Use the slider or input your preferred size in pixels.
• Font: Choose the font for your text label from the drop-down menu. Click on “Font manager” to explore more fonts available on GemPages. In case you want to use a custom font, kindly take a look at this article.
• Text Color: Pick a colour or enter the hex code for the text colour.

Alignment

This parameter allows you to determine how the element is positioned on your page. There are three options to choose from left-aligned, centered, and right-aligned.

Extra Class

If you wish to further customize the element with coding, please use this field to add a class name and refer to it in the CSS file.

Configure the Design tab

To style how the element looks, please navigate to the Design tab and follow the instructions in this article.