Make it pop! Add a logo or image to a form in QuickbaseNov 15, 2018
FREE Download: HTML/CSS Cheat Sheet for Quickbase Forms
Logos help drive confidence and adding a logo to a form will increase engagement. All you need to add a logo or image is a link to the image and some HTML code, that I'll show you how to write.
In this video, I give you two ways to obtain an image to use on your forms plus the step-by-step on getting it right where you want it.
If you have the following types of forms, you may benefit from adding logos or images to them.
- Forms that customers use?
- Forms that describe something that would benefit from having its picture on the form?
- Forms that are printed and need a letterhead?
To make your forms pop, there are three things you'll need to do.
- Locate the link to your image file
- Add a text element with HTML enabled on your form
- Enter the HTML tags to display the image
With just an image file and a little HTML you can add a logo to your form in no time!
HTML/CSS Cheat Sheet for Quickbase Forms
Code from the video:
<img style="padding-bottom: 25px; margin-left: -50px;" src="https://linktoimage.png" width="250">
See the video transcript
FROM THE TUTORIAL: "...Stop using dull forms! Add logos and images to enhance credibility and increase engagement. The first way I can get an image into Quickbase is by finding its link on the web. Let's head back to that other website and I happen to have a page that contains our logo. If I right-click on that logo you'll notice the option for copy image address - this is exactly what I want to do. Since I want to add the logo at the very top of the form I'll insert a new row and choose text. I'm going to use this text element because I can also include HTML tags. I'll check the box for HTML and begin typing. I'm going to use a left angle bracket followed by IMG - this is the tag for the image; include the source or SRC, followed by the equal sign and now I'll have quotations followed by the link to that image that I copied. I'll end that with the other quotation and close my angle bracket. With just those basics I can see I now have the logo on my form! It's a little larger than I like and it isn't quite in the upper left-hand corner where I'd like it to be. We can do a few more customization options to change the height or width. I'll enter the word width, followed by the equal sign and then the number of pixels that I like that with to be - let's make this 250. I'll click Save; ah that's looking better now. It's just the right height and width but I still want to move it a little to the left and separate it somewhat from that name field. Let's go back into our customization to make these additional changes. I'll need to add another element called style, followed by the equal sign and then a quotation and this time we're going to add some padding to the bottom. We'll set that equal to 25 pixels. I'll save and now I've got that space between the name field and the logo. Let's make that final change to move the logo over to the left. In this case I'll need to add a margin, so add in margin on the left set that equal to a negative amount so here I've got -50 pixels, again followed by that semicolon. I'll click Save and now you can see that logo is shifted over to the left just right. If you'd like more information on how to use the text element in HTML on your forms check out my HTML and CSS cheat sheet for forms. It has lots of information including how to format text, how to add images, how to add links, as well as buttons. The other way we can add a logo to a form is by uploading the image to Quickbase. I recommend this over using an image stored on the internet somewhere because you don't necessarily have control over that image and I really don't recommend just going out and choosing random pictures from the internet at all. Using your own company logos and image files we can upload those to Quickbase, store them there and then access them on our form. I'll jump over to the images table. Here I have a table specifically used for storing images. Let's add our new image of our homecare logo, I'll save the file and now with this image file I can right click on the link and copy the link address..."
Feeling like a Junkie? Subscribe Now!