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
WhatsApp Channels in Zoho Campaigns
Now that Meta has opened WhatsApp Channels globally, will you add it to Zoho Campaigns? It's another top channel for marketing communications as email and SMS. Thanks.Is it possible to customize ZC Themes?
I understand you can choose a layout and customize Brand Color, App Header, Menu, and Sub-Menu components, but can you override some of the default theme settings with CSS or a config file? For example, - Table highlight color - Listview auto filter highlighterror : Object code : 6500
b3 = map(); b3.put("name", "Test Project Name"); updateprojects2 = invokeurl [ url :"https://projectsapi.zoho.eu/restapi/portal/era0130/projects/169495000000928007/" type :PUT parameters: b3 connection:"in2" ]; info b3 ; info updateprojects2; ------------Tracking KPIs, Goals etc in People
How are Zoho People users tracking employee targets in People? For example, my marketing assistant has a target of "Collect 10 new customer testimonials every month". I want to record attainment for this target on a monthly basis, then add it to theirText snippet
There is a nice feature in Zoho Desk called Text Snippet. It allows you to insert a bit of text anywhere in a reply that you are typing. That would be nice to have that option in Zoho CRM as well when we compose an email. Moderation Update: We agree thatIs it possible to create Custom function-based Lookup field in Zoho CRM
Is it possible to create a custom function-based lookup field in Zoho CRM? If so, how? Use case: Need to fetch users from Zoho Projects into a dropdown field in Zoho CRM.Zoho Projects app update: Voice notes for Tasks and Bugs module
Hello everyone! In the latest version(v3.9.37) of the Zoho Projects Android app update, we have introduced voice notes for the Tasks and Bugs module. The voice notes can be added as an attachment or can be transcribed into text. Recording and attachingCreate a list of customers who participated in specific Zoho Backstage events and send them an email via Zoho CRM
How to create a list of customers who participated in specific Zoho Backstage events and send them an email via Zoho CRM? I was able to do a view in CRM based on customer that registered to an event, but I don't seems to be able to include the filterHow can I see content of system generated mails from zBooks?
System generated mails for offers or invices appear in the mail tab of the designated customer. How can I view the content? It also doesn't appear in zMail sent folder.How to conditionally embed an own internal widget with parameters in an html snippet?
Hello everyone, I'm trying to create a dynamic view in a page using an HTML snippet. The goal is to display different content based on a URL parameter (input.step). I have successfully managed to conditionally display different forms using the followingZadarma + Zoho CRM Integration – Missed Calls Saved as Contacts Instead of Leads
Hello everyone, I’m looking for input from anyone with experience using the Zadarma + Zoho CRM integration. Currently, I’m seeing that missed calls are automatically being created as Contacts instead of Leads. From a CRM perspective, this doesn’t makeCustom Button Disappearing in mobile view | Zoho CRM Canvas
I'm working in Zoho CRM Canvas to create a custom view for our sales team. One of the features I'm adding is a custom button that opens the leads address in another tab. I've had no issue with this in the desktop view, but in the mobile view the buttonSearch Records returning different values than actually present
Hey! I have this following line in my deluge script: accountSearch = zoho.crm.searchRecords("Accounts","(RS_Enroll_ID:equals:" + rsid + ")",1,200,{"cvid":864868001088693817}); info "Account search size: " + accountSearch.size(); listOfAccounts = zoho.crm.searchRecords("Accounts","(RS_Enroll_ID:equals:"Windows Desktop App - request to add minimization/startup options
Support Team, Can you submit the following request to your development team? Here is what would be optimal in my opinion from UX perspective: 1) In the "Application Menu", add a menu item to Exit the app, as well as an alt-key shortcut for these menusFunction 56: Automatically enable the option for customers to pay via bank account
Hello everyone and welcome back to our series! One of the key features of Zoho Books is its integration with multiple payment gateways, allowing you to receive online payments for your invoices. This ensures faster payments, automates payment trackingAttach Files to Your Notecards and share them on the go!
Hey everyone! We’re excited to share a feature many of you have been asking for — you can now attach files directly to your text notecards and share with ease! 🙌 This update was built with your feedback in mind, especially for those who wanted a simpleCan i connect 2 instagram accounts to 1 brand?
Can i connect 2 instagram accounts to 1 brand? Or Do i need to create 2 brands for that? also under what subscription package will this apply?Workdrive on Android - Gallery Photo Backups
Hello, Is there any way of backing up the photos on my android phone directly to a specific folder on Workdrive? Assuming i have the workdrive app installed on the phone in question. EmmaIntegració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? GraciasYouTube Live #1: AI-powered agreement management with Zia and Zoho Sign
Hi there! We're excited to announce Zoho Sign’s first YouTube live series, where you can catch the latest updates and interact with our Zoho Sign experts, pose questions, and discover lesser-known features. We're starting off by riding the AI wave inMass Mail Statistics - Number of unsent emails
How do I find out which emails were not sent?How to add a % Growth column for year-over-year comparison (2024 vs 2025)
Hello, I am trying to build a monthly revenue comparison between 2024 and 2025 in Zoho CRM Analytics. My current setup is: Module: Deals (Affaires) Filter: Stage = Closed Won Date field: Closing Date Grouping: By Month Metrics: Sum of Amount for 2024,How to searchByCriteria records that are under approval?
I need to search for both approved and pending approval records Is that possible with this method? Or I need to a different method? var priceReqID = $Page.record_id; log(priceReqID); var records = ZDK.Apps.CRM.Price_List_Item.searchByCriteria("Price_Request:equals:"Power of Automation::Streamline log hours to work hours upon task completion.
Hello Everyone, A Custom Function is a user-written set of code to achieve a specific requirement. Set the required conditions needed as to when to trigger using the Workflow rules (be it Tasks / Project) and associate the custom function to it. Requirement:-How to add Simple Analytics to Zoho Pages?
I have a website with Zoho Pages, how do I add Simple Analytics on it? They seem to have code they need to be embedded https://docs.simpleanalytics.com/scriptProduct details removed during update from other system
We maintain our product details in an other system. These details are synchronized with Zoho at the end of each day, through an API. This has worked perfectly sofar. But last Monday, all product codes and some other product data have been wiped duringEnd Date in Zoho Bookings
When I give my appointments a 30 minutes time I would expect the software not to even show the End Time. But it actually makes the user pick an End Time. Did I just miss a setting?I hate the new user UI with the bar on the left
How can I reverse this?Cant seem to delete an email account
Hello, I have researching for 4 days how to delete an email account and I am absolutely without a clue. The email account I am trying to delete is support<AT>fyshoes<dot>com. It's the first email account I made and it (is???) was associated with the super user (me). I have since changed it to adming<AT>fychoes<dot>com and I see the support email in my list but I just cant seem to get rid of it. Ultimately I want to associate that email account with another user that I want to add. This is reallyCommerce Order as Invoice instead of Sales Order?
I need a purchase made on my Commerce Site to result in an Invoice for services instead of a Sales Order that will be pushed to Books. My customers don't pay until I after I add some details to their transaction. Can I change the settings to make thisSync 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:Script that deletes a record?
We're using WP Plugin "Integration for WooCommerce and Zoho Pro", and have created a couple of Feeds to send data to Zoho. We are trying to create Contact records, but only based upon condition. Tried to make it with small Deluge function and Workflow,Introducing Profile Summary: Faster Candidate Insights with Zia
We’re excited to launch Profile Summary, a powerful new feature in Zoho Recruit that transforms how you review candidate profiles. What used to take minutes of resume scanning can now be assessed in seconds—thanks to Zia. A Quick Example Say you’re hiringImport data into Multi-Select lookup field from CSV/Excel
How to import data into a multi-select lookup field from the CSV/Excel Sheet? Let's say I have an Accounts multi-select lookup field in the Deals module and I want to import the Deals with Accounts field. Steps:- 1. Create/edit a multi-select lookup fieldAuto Capitalize First Letter of Words
Hi I am completely new to ZOHO and am trying to build a database. How can i make it when a address is entered into a form field like this: main st it automatically changes is to show: Main St Thank YouA formula that capitalises the first letter of each word
Hi all, is there a zoho formula that can capitalise the first letter of each word in a string? INITCAP only capitalises the first letter of the first word.Add Analytics function for Title case (capitalising each word in a string)
At present, you can only capitalise each word in a string in Analytics during data import. It would be really useful to be able to do this with a formula column, but there is no Title Case function.Office 365 and CRM mail integration: permission required
Has anyone run into this weird problem? My email server is Office 365. When I try to configure Zoho CRM to use this server, a Microsoft popup window opens requesting user and password. After entering that, I get a message in the Microsoft window sayingUpdating Subform Record from other Form
Just wanted to ask how to properly approach this. I have 2 forms and would like to trigger an auto update on the subform once record submitted. block below only updates 1 row for each recordRow in input.AV_System { AssetRecord = Site_Asset_Services[SOR_NoReverse payment on accidentally closed invoice.
An invoice was closed accidentally with the full payment added. However, only partial payment was paid. How can I reopen the invoice and reverse this to update it to show partial payment?Next Page