Tip #25: How to add background images to forms
Hi everyone,
The world is going through a difficult time right now, and we hope you're all staying safe.
We're here with another Creator tip—this time on how to add background images to your forms. Sometimes, to add some context or make your forms look a little better, you may want to add a background color or an image to your form. Let's go over the three easy steps it takes to get the job done.
Use case
In this example, we have a New Order form, and we'd like to add the company's logo to it, to help establish better brand recall and create an association with our customers.
Application flow
1. Create the New Order form which will help customers place orders.
2. Create a page using HTML snippets to embed the form.
3. Use CSS code to add the background image.
Here are some quick steps to add background images to your form from scratch:
Step 1: Create the New Order form, with all the required fields
Here are the fields on the order form:
Sales Owner (Lookup field)
Customer (Dropdown field)
Order Date (Date field)
Delivery Agency (Dropdown field)
Estimated Delivery date (Date field)
Product (Dropdown field)
Quantity (Number field)
Sub Total (Currency field)
Tax (Percentage field)
Net Total (Currency field)
Step 2: Create a page and add an HTML snippet to it
We need to embed the form into a page, so that we can add the required styling elements we need. All you need to do is
drag and drop the HTML snippet onto the page, then add the following code to it:
- <div elName='zc-component' formLinkName='Order'
- params='zc_Header=false&zc_SuccMsg=Data Added
- Successfully!&zc_SubmitVal=Submit&zc_ResetVal=Reset'>Loading Form...</div>
Here "Order" is the form link name of the form. You could also embed the form into the iframe using iframe HTML tags.
Step 3: Paste the CSS code into the HTML snippet
We need to use CSS to specify aspects like size and typeface for the fonts, colors for the text and backgrounds, alignment of the images, add space between a border to the elements, and more.
You can use the following CSS code to add the background image:
<style>
- .zcform_FormLinkName .formContainer {
- background-image:url(<Image URL>);
- background-size:cover;
- <\style>
In this code:
FormLinkName: Form name as per in the form's URL.
Image URL: A public URL of the image you want to display in the form's background
Note
You can customize the size of the background image with the "background-size" CSS styling.
Use a single white-space character between the form link name and .formContainer—it's important to make this CSS styling work.
Please avoid using this property when there are subforms or any hidden fields in the form, as it increases the form's height based on added subform rows, which results in enlarging the background image automatically.
Given below is how this page will look:
Easy, right? You should give it a try! If you face any difficulties while adding an image to your forms, please comment below and we'll be happy to assist you.
Access your files securely from anywhere
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Sejal Dattani
Roopa
Vignesh G B
Gregory
Krishnaa
Sticky Posts
ANZ In-Person Zoho User Group Meetups: Focusing on Zoho Creator & Zoho Flow (September 2024)
Hello, Zoho Community! Calling all Zoho users in Australia! We're thrilled to announce the next series of Zoho User Group (ZUG) Meetups, continuing the success of our previous sessions. These meetups are a great opportunity to learn, network, and engage[SESSION ENDED] Ask the Experts #07| Live Q&A: Building workflows with Blueprint in Zoho Creator |
Hello, Post the release of Zoho Creator Blueprint last month, we're happy to tell you that we'll be launching a new 'Ask the Experts' session on 16th September (Thursday) this month focussing on creating blueprints in Zoho Creator. The session will beZoho Creator Community Webinars | October - November 2020 [Completed]
Hello everyone, I’m happy to announce that Zoho Creator is hosting a new Community Webinar Series starting this October. This series is a learning initiative aimed at our developer community, where every session will take spotlight use cases focused onCommunity Learning Webinar - Zoho Creator Blueprint & other release updates | July 29, 2021
Dear developers, This June, the Creator team unveiled a slew of updates including UI enhancements to the Detail View of reports, an new capabilities in Data Import and Connections, and most important of all, the release of Blueprint in Creator. CustomizeCommunity Learning Webinar: Delve deep into the core concepts of Zoho Creator | 17th June, 2021
Dear developers, Every customer has unique business needs and unique problems to solve. To be able to give solutions to these problems, to get over any stumbling blocks and to be able to build applications expeditiously that tailor to specific needs,
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho CRM Resources
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Converting Sales Order to Invoice via API; Problem with decimal places tax
We are having problems converting a Sales Order to an Invoice via API Call. The cause of the issue is, that the Tax value in a Sales Order is sometimes calculated with up to 16 decimal places (e.g. 0.8730000000000001). The max decimal places allowed inCreate new Account with contact
Hi I can create a new Account and, as part of that process, add a primary contact (First name, last name) and Email. But THIS contact does NOT appear in Contacts. How can I make sure the Contact added when creating an Account is also listed as a Contact?Transitioning to API Credits in Zoho Desk
At Zoho Desk, we’re always looking for ways to help keep your business operations running smoothly. This includes empowering teams that rely on APIs for essential integrations, functions and extensions. We’ve reimagined how API usage is measured to giveCustom Fonts in Zoho CRM Template Builder
Hi, I am currently creating a new template for our quotes using the Zoho CRM template builder. However, I noticed that there is no option to add custom fonts to the template builder. It would greatly enhance the flexibility and branding capabilities ifSync desktop folders instantly with WorkDrive TrueSync (Beta)
Keeping your important files backed up and accessible has never been easier! With WorkDrive desktop app (TrueSync), you can now automatically sync specific desktop folders to WorkDrive Web, ensuring seamless, real-time updates across devices. Important:How To Insert Data into Zoho CRM Organization
Hi Team I have this organization - https://crm.zoho.com/crm/org83259xxxx/tab/Leads I want to insert data into this Leads module, what is the correct endpoint for doing so ? Also I have using ZohoCRM.modules.ALL scope and generated necessary tokens.How can I get base64 string from filecontent in widget
Hi, I have a react js widget which has the signature pad. Now, I am saving the signature in signature field in zoho creator form. If I open the edit report record in widget then I want to display the Signature back in signature field. I am using readFileEmail Integration - Zoho CRM - OAuth and IMAP
Hello, We are attempting to integrate our Microsoft 365 email with Zoho CRM. We are using the documentation at Email Configuration for IMAP and POP3 (zoho.com) We use Microsoft 365 and per their recommendations (and requirements) for secure email we haveCreator roadmap for the rest of 2022
Hi everyone, Hope you're all good! Thanks for continuing to make this community engaging and informative. Today we'd like to share with you our plans for the near future of Creator. We always strive to strike a good balance of features and enhancementsCRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive
Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage filesFiltering repport for portal users
Salut, I have a weird problem that I just cannot figure out : When I enter information as administrator on behalf of a "supplier" portal user (in his "inventory" in a shared inventory system), I can see it, "customer" portal users can see it, but theGoogle Maps
How can I add google maps to Zoho. I put a new lead in and want to be able to click on a link for google maps and it takes me to that new leads address? ThanksMapping Accounts on Google Maps
Hello, Is there a way to map accounts within Zoho? I have exported to Google maps, but not ideal. Thanks, KeithSales tour mapping
Hi Zoho people and users, Wouldn't be cool if one could import an itinerary say from Gmaps, specify a radius along the line and pop ! show a smattering of droplets on the maps, each representing a customer or lead ? Clicking on a droplet would open theDoes zoho have a feature that can help my sales team create a sales route?
Does zoho have a feature that can help my sales team create a sales route? This will save us time instead of having to use mapquest or google maps.Possible to Turn Off Automatic Notifications for Approvals?
Hello, This is another question regarding the approval process. First a bit of background: Each of our accounts is assigned a rank based on potential sales. In Zoho, the account rank field is a drop-down with the 5 rank levels and is located on the accountZoho Inventory. Preventing Negative Stock in Sales Orders – Best Practices?
Dear Zoho Inventory Community, We’re a small business using Zoho Inventory with a team of sales managers. Unfortunately, some employees occasionally overlook stock levels during order processing, leading to negative inventory issues. Is there a way toImporting data into Assets
So we have a module in Zoho CRM called customers equipments. It links to customers modules, accounts (if needed) and products. I made a sample export and created extra fields in zoho fsm assets module. The import fails. Could not find a matching parentIntegración Books para cumplir la ley Crea y Crece y Ley Antifraude (VeriFactu)
Hola: En principio, en julio de 2025, entra en vigor la ley Crea y Crece y Ley Antifraude (VeriFactu). ¿Sabéis si Zoho va a cumplir con la ley para cumplir con la facturación electrónica conectada a Hacienda? GraciasKaizen #157: Flyouts in Client Script
Hello everyone! Welcome back to another exciting edition of our Kaizen series, where we explore fresh insights and innovative ideas to help you discover more and expand your knowledge!In this post, we'll walk through how to display Flyouts in Client ScriptZoho One - Syncing Merchants and Vendors Between Zoho Expense and Zoho Books
Hi, I'm exploring the features of Zoho One under the trial subscription and have encountered an issue with syncing Merchant information between Zoho Expense and Zoho Books. While utilizing Zoho Expense to capture receipts, I noticed that when I submitTranslation support expanded for Modules, Subforms and Related Lists
Hello Everyone! The translation feature enables organizations to translate certain values in their CRM interface into different languages. Previously, the only values that could be translated were picklist values and field names. However, we have extendedHow get stock name from other column ?
How get stock name from other column ? e.g. =STOCK(C12;"price") where C12 is the code of the stockZoho Sheet for Desktop
Does Zoho plans to develop a Desktop version of Sheet that installs on the computer like was done with Writer?Create static subforms in Zoho CRM: streamline data entry with pre-defined values
Last modified on (9 July, 2025): This feature was available in early access and is currently being rolled out to customers in phases. Currently available for users in the the AU, CA, and SA DCs. It will be enabled for the remaining DCs in the next coupleBUTTONS SHOWN AS AN ICON ON A REPORT
Hi Is there any way to create an action button but show it as an icon on a report please? As per the attached example? So if the user clicks the icon, it triggers an action?ZOHO Creator subform link
Dear Community Support, I am looking for some guidance on how to add a clickable link within a Zoho Creator subform. The goal is for this link to redirect users to another Creator form where they can edit the data related to the specific row they clickedDropshipping Address - Does Not Show on Invoice Correctly
When a dropshipping address is used for a customer, the correct ship-to address does not seem to show on the Invoice. It shows correctly on the Sales Order, Shipment Order, and Package, just not the Invoice. This is a problem, because the company beingRFQ MODEL
A Request for quotation model is used for Purchase Inquiries to multiple vendors. The Item is Created and then selected to send it to various vendors , once the Prices are received , a comparative chart is made for the user. this will help Zoho booksWill zoho thrive be integrated with Zoho Books?
titleProduct Updates in Zoho Workplace applications | August 2025
Hello Workplace Community, Let’s take a look at the new features and enhancements that went live across all Workplace applications this August. Zoho Mail Delegate Email Alias Now you can let other users send emails on your behalf—not just from your primaryNotebook audio recordings disappearing
I have recently been experiencing issues where some of my attached audio recordings are disappearing. I am referring specifically to ones made within a Note card in Notebook on mobile, made by pressing the "+" button and choosing "Record audio" (or similar),Unable to send message; Reason:554 5.1.8 Email Outgoing Blocked
Hi, I sent few emails and got this: Unable to send message; Reason:554 5.1.8 Email Outgoing Blocked And now I have few days since I cant send any email. Is there something wrong I did? Also can someone fix this pleaseWant to use Zoho Books in Switzerland. CHF support planned?
Hi, We're a Swiss company using other Zoho suite software and I discovered Zoho Books and other accounting SaaS when looking for an accounting tool. Do you intend to cover Switzerland and CHF based accounting anytime soon? RoyZoho sheet desktop version
Hi Zoho team Where can I access desktop version of zoho sheets? It is important as web version is slow and requires one to be online all the time to do even basic work. If it is available, please guide me to the same.Cannot Enable Picklist Field Dependency in Products or Custom Modules – Real Estate Setup
Hello Zoho Support, I am configuring Zoho CRM for real estate property management and need picklist field dependency: What I’ve tried: I started by customizing the Products module (Setup > Modules & Fields) to create “Property Type” (Housing, Land, Commercial)Weekly Tips : Teamwork made easy with Multiple Assignees
Let's say you are working on a big project where different parts of a single task need attention from several people at the same time—like reviewing a proposal that requires input from sales, legal, and finance teams. Instead of sending separate remindersCelebrating Connections with Zoho Desk
September 27 is a special day marking two great occasions: World Tourism Day and Google’s birthday. What do these two events have in common (besides the date)? It's something that Zoho Desk celebrates, too: making connections. The connect through tourismWhat is Resolution Time in Business Hours
HI, What is the formula used to find the total time spent by an agent on a particular ticket? How is Resolution Time in Business Hours calculated in Zohodesk? As we need to find out the time spent on the ticket's solution by an agent we seek your assistanceUpload API
I'm trying to use the Upload API to upload some images and attach them to comments (https://desk.zoho.com/DeskAPIDocument#Uploads#Uploads_Uploadfile) - however I can only ever get a 401 or bad request back. I'm using an OAuth token with the Desk.tickets.ALLNext Page