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.

New to Zoho LandingPage?

Access Zoho LandingPage

Zoho LandingPage Resources

New to Zoho Survey?

Access Zoho Survey

Latest Feature Updates

Explore our Pricing & Plans

Zoho Survey Resources

Android Mobile Surveys

Insurvey Blogs

Insight Blogs

Tips & Tricks

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Bigin?

Signup Now

Access Bigin

Latest Feature Updates

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Tout forum

France ZUGs

Zoho SalesIQ Resources

Sticky Posts
[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 be
Zoho 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 on
Community 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. Customize
Community 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,
[RECORDING: Community Webinar] | Build complex reports and documents with a Zoho Creator & Zoho Writer integration | March 23, 2021
Dear developers, Report generation is an essential activity to ensure decision makers have the best information available to be able to monitor and improve performance. Enterprises may need to generate and distribute stakeholder specific documents in