Putting Custom HTML as a Form Element | INTERMEDIATE
In some instances, you may need to customize a form that goes beyond the native options presented in Quick Base by implementing simple HTML text formatting to alert, inform, or organize information on your forms.
For example, maybe you need to provide directions for your user to highlight key information by adding text to your form, create column headers to better organize the flow of your form, or add color to show emphasis on certain information to your users.
EDITORS NOTE: For those who are new to HTML, click here: Introduction to HTML to learn more about HTML and best practices. Understanding the HTML elements and tags will be helpful when using HTML as a form element to style your text in Quick Base.
Here are some of things you can do in Quick Base using HTML as a form element:
✓ Change the font size
✓ Add color to the font
✓ Highlight important text
✓ Underline a key point
✓ lace a box around the form instructions
✓ Format headers for columns of information
✓ Change the font used for field labels
Steps to Adding HTML text formatting to your forms:
- To customize a form from your app’s homepage, click on the table in the Table Bar.
- Click Settings.
- Click Forms and select the form you would like to edit.
- In the form settings, you will see three tabs: Elements, Properties, and Dynamic Form Rules. Make sure the Elements tab is selected.
- In one of the form elements titled, Make a Selection, select the text option. This will display a Text Item Properties area for you to input your HTML code.
- Check the HTML (Limited) checkbox. This allows any text in the box above to be interpreted as HTML with the following tags allowed: Adding Instructional text.
Basic Structure of the HTML
It begins with a left angle bracket, followed by the word span, and then the most important part is that style comes next. You set the style equal to the name and value of the styles you want to include. Those are included in quotations with a colon between the name and value. If you have multiple names and values that you want to include in your style you separate those with a semicolon. You close out that initial span with a right angle bracket and then include the text that you want to have formatted. Last you’ll close out the span with a left angle bracket, a forward slash, the word span, and then your final right angle bracket.
Increase Font Size
One of the most common formatting changes is the size. To increase the size of a font we add font-size to our style and give it a value in pixels like 14,18, or 24.
Change The Color Text
You can use color followed by either the name of a color or it’s hex value: Warm Hex Color Codes: Hexadecimal codes for named colors used in HTML page features.
Text Decoration allows you to have either underline, line-through, or overline your text in Quick Base.
The background can help you highlight important text. Its name is background-color and can also have a color value using a color name or a hex code.
Borders can add emphasis. The values here are a little different because you need to define three parts; the thickness of the border and pixels, followed by the style of the border either solid, dashed, or dotted, and then the color.
Instead of formatting a single line of text, in Quick Base, you can format a block of text. In this case, you’ll want to include display with a value of block along with your other formatting.
Once you understand how individual HTML tags work. You can start combining them together to get some unique, creative elements on your forms to make them stand out.
To see other tips and tricks all Quick Base related, click here: Knowledge Base
- Author: Alex Skudrovskis (firstname.lastname@example.org))
- Date Submitted: 5/2/2019