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
Zoho FSM Video Tutorials
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
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 Billing 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
Zoho Campaigns EU Topics API returns HTTP 200 with empty topicDetails
Hello, Our Zoho Campaigns EU organisation has two custom topics visible in the Campaigns UI, and contacts are subscribed to them. However, an OAuth request with ZohoCampaigns.contact.READ to https://campaigns.zoho.eu/api/v1.1/topics returns HTTP 200 withCaso de Éxito: Cómo Toyota Financial Services unificó la atención al cliente con Zoho
"Después de seis meses con el CRM en producción estamos encantados." Miriam Cárdenas, Responsable Departamento ATC Toyota Financial Services es la división financiera de Toyota encargada de gestionar la financiación de vehículos y, junto con KINTO España,Zoho Books - France
L’équipe de Zoho France reçoit régulièrement des questions sur la conformité de ses applications de finances (Zoho Books/ Zoho Invoice) pour le marché français. Voici quelques points pour clarifier la question : Zoho Books est un logiciel de comptabilitéSending Zoho form link from custom function in Zoho CRM
Hello, We intend to send a Zoho form link to certain Contacts using a custom function. The Zoho Form must be pre-filled with the Deal information and contacts receiving it should be able to modify the values and upon submission, those modifications mustAutomatically remove commas
Team, Please be consistent in Zoho Books. In Payments, you have commas here: But when we copy and paste the amount in the Payments Made field, it does not accept it because the default setting is no commas. Please have Zoho Books remove commas automZoho ERP | Product updates | July 2026
Hello users, We're back with another round of updates to help you streamline your operations. This month's release brings new features and enhancements designed to help you work more efficiently. Read on to discover everything that's new in Zoho ERP thisZoho CRM
Cuándo voy a adjuntar un archivo .pdf en un registro en el campo Archivo obtengo el siguiente error:Can I hide some products from a particular customer
HI I want ot give a customer access to the portal but I need to hide some products from them that are not available for them to buy- is this possible ?Dashboard/Component filter by probability
Hi all Can I request the ability to add a Component or Dashboard filter for Deal Probability? Would be useful to be able to see data of deals more than 60% probable. OllyAdmin Logging in as another User
How can a Super Admin login as another user. For example, I have a sales rep that is having issues with their Accounts and I want to view their Zoho Account with out having to do a GTM and sharing screens. Latest Update (27th April 2026): With the earlyOpenAI Is Moving to the Responses API: Here's What It Means for SalesIQ
OpenAI has deprecated its Assistants API and is moving to the Responses API. If you're using OpenAI Assistants with SalesIQ, you may be wondering if you need to make any changes to your existing setup. You don't. SalesIQ has already taken care of theFree webinar: Zoho Sign for Microsoft apps
Hello, Did you know Zoho Sign works right inside the Microsoft apps you already use? A signature request shouldn't mean leaving Teams for another tab, or downloading an Outlook attachment just to sign it. Zoho Sign integrates with Microsoft 365, Teams,Billing Status and WO Status Field Colors -
Hello Team, I noticed that the colors of the Billing Status and WO Status fields in the WO module have been changed. (Org ID:170000078905) This is not urgent to correct, but I wanted to bring it to your attention so you can check whether this is a systemIntroducing throw statements in Deluge
Hello everyone, We're introducing a powerful addition to Deluge that gives you more precise control over error handling in your scripts. Whether you're calling an external API, validating user input, or enforcing a business rule, there are moments whenZoho Notebook、実はこんなところから使えます
ユーザーの皆様、こんにちは。ゾーホージャパンの田村です。 前回に続き、今回もZoho Notebookをご紹介します。 関連情報 メモの保存場所、見直しませんか？― Zoho Notebookで始める情報管理 仕事中、「この内容、メモに残してあとで見返したいな」と思う瞬間はありませんか？ 会議中の一言、お客様とのやり取り、CRMで見つけた気づき、 ほんの数秒で終わる内容だからこそ、「あとで書こう」と思って、そのまま忘れてしまうこともあります。 そこで今回は、PCやスマートフォンはもちろん、普段お使いのZoho製品からもすぐにアクセスできるノートアプリ「ZohoI have been looking for CVID to get segmate list where & how can fnd it?
I am trying to get segment details from the Zoho API. The API documentation says that the CVID is a mandatory parameter, but I cannot find the CVID in the "getmailinglists" API. Can you tell me where to find the CVID?How do I increase the email attachment size in Zoho CRM ?
It looks like I'm limited to 10MB when sending an attachment using the email widget on a record in Zoho CRM. Is there a way to increase the size? Or can I use some other tool? From what I'm reading online, I'm maxed out at 10MB. Any insight would be greatlyIntroducing Incentives for Zoho CRM: Build, automate, and track sales commissions
Dear Customers, We are here with an amazing news! We built a direct solution to help manage your commission provisioning activity in your business. From creating commission plans to issuing payouts, this application leverages your sales reps’ performanceSubforms and automation
If a user updates a field how do we create an automation etc. We have a field for returned parts and i want to get an email when that field is ticked. How please as Zoho tells me no automation on subforms. The Reason- Why having waited for ever for FSMCannot format "start date" field in Zoho Flow
I am trying to recreate a flow that connects Inventory package creation to Zoho projects (where a task is created in a defined project). I've been able to troubleshoot everything EXCEPT the date fields; specifically the "start date" - which is quite importantDynamic Signature - Record owner
Hi everyone, I’m using Zoho Writer merge templates from Zoho CRM and have two questions: Owner signature: How can I automatically insert the CRM record owner’s signature in the merged document? I’m not sure where this signature is stored or how to referenceGETTING THERE THANKS
So we are still testing thanks to the great Zoho team for firstly getting pricelists working (essential) and writing some code to hide delivery and pickup options. Brilliant. So price lists are a definite mainly because of VAT. We run our Zoho books withTime Zone is incorrect
Time zone is not working properly...I've checked it twice. I'm eastern U.S. time it's currently 12:22 pm EST. CRM shows 3:22 pm EST.CRM wants to access other apps and services on this device (Documents area)
Did anyone else see this today? It only seemed to popup in the Documents area. Blocking it did not stop the ability to upload files there... Why is this coming up and what apps/services is it requesting in the background? Also, is it applicable elsewhereCustom module - change from autonumber to name
I fear I know the answer to this already, but thought I'd ask the question. I created a custom module and instead of having a name as being the primary field, I changed it to an auto-number. I didn't realise that all searches would only show this reference.Zoho Mail outgoing webhooks stopped delivering events to my domain from Aug 28 to Sep 1, 2026 — temporary suppression by destination domain/IP?
Dear Zoho Mail support team, I run an application that receives email notifications from several Zoho Mail accounts via outgoing webhooks (Settings → Developer Space → Outgoing Webhooks), with REST API polling as a backup. What happened: between AugustHow can I populate dropdown data with information from another source or app?
I want to maintain a list of items in another app (say in excel or another database) and sync those as items in a drop down menu, instead of copy pasting to import. Is this kind of a feature available?Dynamic Field Folders in OneDrive
Hi, With the 2 options today we have either a Dynamic Parent Folder and lots of attachments all in that one folder with only the ability to set the file name (Which is also not incremented so if I upload 5 photos to one field they are all named the sameZoho Tables is now available in Zoho One!
Hello Zoho One users, We’re excited to announce that Zoho Tables is now included as a part of Zoho One suite! As teams grow, managing projects, approvals, inventories, campaign trackers, and operational workflows across multiple spreadsheets become difficult.Getting there -thanks
So we are still testing thanks to the great Zoho team for firstly getting pricelists working (essential) and writing some code to hide delivery and pickup options. Brilliant. So price lists are a definite mainly because of VAT. We run our Zoho books withI want to prefill CRM Account information using the GSTIN of the Customer
Currently i need to add account details manually in zoho crm and when it syncs in zoho books manual working needs to be done. Whereas in zoho books i can prefill the customer details using the GSTIN which is great feature. Can the same be enabled for#3 Making it look like my business
Day 3: Meera had created her first invoice. The numbers were right, but something still felt unfinished. Her studio name was there, but the address did not look the way she wanted. Her logo was missing, and the invoice did not really feel like it cameUsing IMAP configuration for shared email inboxes
Our customer service team utilizes shared email boxes to allow multiple people to view and handle incoming customer requests. For example, the customer sends an email to info@xxxx.com and multiple people can view it and handle the request. How can I configureScan & Fill with double quote key/value pairs
Hi, An old Ticket moved to a Topic/Idea: I love the idea of the new Scan & Fill as it nearly covers my previous request for a QR Scanner to read a multi-part QR Code. My QR Codes are hard-coded as below: {"key1":"value1","key2":"value2","key3":"value3"}Increase the "Maximum Saved Entries per User" Options Limit
Hi, You can create lots of saved entries, yet the Limit when you apply one is 25, we may often expect 32 to be in draft, and therefore want to enforce that, can we increase the limit of this field from 25 to 100 (As you can just turn it off and have moreHEIC File Type Viewer
Hi, It would be nice to be able to click on the images in the All Entries/Reports Tables which are HEIC the same as JPG, PNG, etc. so they open in a viewer from Zoho or the Attachment Service, today HEIC requires you to download each image and open itMap Dependency Upgrades in Zoho CRM
Map Dependency Fields enhancements are now available across all DCs. Hello everyone, We’ve introduced a set of enhancements to Map Dependency Fields to make setup simpler, faster, and more intuitive. Map Dependency helps control how values appear acrossZoho Forms Submission URL
Hi Zoho, It would be great to have a URL which can take us to specific form entries. For example: https://forms.zoho.eu/ACCOUNTNAME/report/FORMNAME/records/UNIQUE-REF I currently have a use case where I want to use Zoho Flow to create a module entry inOptional Parameter in Deluge Sendmail function to link email to record
I love sendmail - it offers flexibility (and, with standalone functions, commonality with minimal maintenance) over the years the templates hadn't offered. I understand the templates have come a long way, but I still prefer sendmail most days. That said...Zoho CRM Functions: Redesigned Interface, Rich Analytics, and Multi-Language Support
Hello everyone! We have given Functions in Zoho CRM a major overhaul with a new interface that makes it easier to build, organize, monitor, and troubleshoot your functions throughout their lifecycle. As part of this revamp, we have also introduced a unifiedNext Page