[V6] Text Field Element

What Is A Text Field Element?

Text Field is a child-element of the Contact Form and can be found in the left sidebar dashboard on the GemPages editor page. This element allows you to create a field for customers’ messages. Besides Contact Form, this can be placed in other modules for different purposes, for example, letting customers customize their products or leaving some notes or messages for orders

Settings Tab’s Parameters

Name

This needs to be filled out in order to be recognized by Shopify when the message is sent. The format of Name will change depending on which module the Text Field is located. Ex: within a Contact Form, the format is contact […], meanwhile, properties[…] for Product module.

The below demonstration will give you a better understanding of this parameter.

The Text Field was dropped into a Product module, which gives customers a chance to leave a note to the seller.

When the note is submitted, this will go along with the product on the Checkout page.

Placeholder

This parameter allows us to change the hint which is displayed inside the input field.

Required

Enabling this feature to make this field required, which means you can not leave it blank and submit the request.

Dimension

This feature allows you to manually adjust the image’s width and height by entering the specific values into the box(es).

We can switch the dimension unit between Pixel and Percentage by hitting the small icon .

Typography

GemPages provides powerful styling options for the Text Field element

• • Font Weight: Select your preferred font weight from the drop-down menu.
  • Font Size (in pixel): For this parameter, you just simply slide the adjustment bar from left to right and vice versa to configure the text’s size.
  • Font: You can choose between any fonts available in the Font Manager or you can add any custom font from external sources. For better page loading and graphic design, the maximum font displayed on a page is three fonts. However, there are no limits when configuring fonts in your store. Check out how to add a custom font to your site.
  • Text Color: This parameter allows you to choose the color for the text.

As you can see, this parameter contains a symbol  on the top right corner, which means we are able to adjust the setting for one or more specific devices without affecting the rest. Also, please be well-noted that all changes should be made on the Desktop version first.

Alignment

This parameter allows you to determine how the text is positioned within the description box. The three primary types of text alignment include left-aligned, centered, right-aligned.

Extra Class

If you wish to style a particular content element differently, then use this field to add a class name and then refer to it in your CSS file.