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).
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.
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.