[V6] Checkbox Element

About the Checkbox element

The Checkbox element is usually used for a Contact Form to allow the visitors to toggle an answer to a question. Each checkbox has two different states: selected or unselected. You can use it to let visitors agree to a Terms and Conditions section on your website or sign up to receive the newsletter.

From the GemPages Dashboard, open your preferred template to edit. You can quickly find the Checkbox 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 Checkbox functions well. Kindly be noted that this field is required.

Description

Input your preferred content into the Description field.

Required

Toggle on the “Required” option if it is compulsory for the visitors to check the box.

Selected

Enable this option to check the box as default.

Typography

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

• Font Size: Use the slider or input your preferred size in pixels.
• Line Height:  Use the slider to adjust the line height.
• Letter Spacing: Use the slider to adjust the letter spacing.
• Color: Pick a color or enter the hex code for the text color.
• Font: Choose the font for your text label from the drop-down menu. Click on “Font manager” to explore more fonts available on GemPages. Learn how to use custom font here

Checkbox

Use the slider or enter the number into the box to adjust the spacing between the checkbox and the text.

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.