Give your form text 'style' using simple HTML in QuickbaseNov 27, 2018
FREE Download: HTML/CSS Cheat Sheet for Quickbase Forms
Use simple HTML text formatting to alert, inform, or organize information on your forms. In this tutorial, I walk you through 6 different style options, 7 examples using combinations of these styles, and two additional ways to use formatted text on a form.
If you've ever wanted to do any of the following, now you can!
- Change the font size
- Add color to the font
- Highlight important text
- Underline a key point
- Place a box around the form instructions
- Format headers for columns of information
- Change the font used for field labels
With this tutorial, learn how to easily add style to your Quickbase forms. There are three steps to adding HTML text formatting to your forms:
- Add a text element to your form
- Enter the HTML code using the Cheat Sheet below
- Check the HTML checkbox
Time to bring your forms alive with formatted text. Get the HTML Cheat Sheet to do all this and more!
See the video transcript
FROM THE TUTORIAL: "I walk you through six different style options, seven different examples using combinations of these styles and two additional ways to use formatted text on a form. Let's start with the 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 and 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. 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. To see how these examples show up on the form let's go into the form settings. I've added multiple text elements to my form in order to demonstrate this for you and when I check on the HTML box it interprets the code as HTML and renders it on the form with the formatting I defined…back to our form to change the color of the text. You can use color followed by either the name of a color or it's hex value. The text can have a value of underlined line, through or over…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 as well. 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…so far we've gone through formatting of lines of text but what if you want to format a whole block of text? In that case you'll want to include display with a value of block along with your other formatting…I'll show you a few more examples but I also want you to…here I have two different pieces of text that may display on an expense report with the version without HTML on the left and with it on the right…Next is some text from various employee surveys. …The text on these checklists really benefits from calling out the important notes on formatting text such as immediately notify management of all deficiencies and it is not intended to be comprehensive. There are a few additional uses of HTML text on your forms that I want to share. The first is to create column headers like these. I really like the way these look on a form. Last, we have field labels. Here on the right I've hidden the default field value and added a text element in front of the field. With the formatted label you'll notice the spacing is a little bit wider but the labels are much more dramatic. I just shared numerous ways to format the text on your forms to easily recall these options and more download that HTML cheat sheet now…"
Feeling like a Junkie? Subscribe Now!