Zoho Creator Tutorial : How to set up transparent form (embedded via iframe) on my website

Homepreneur-ZohoCreatortutorialTime and again we have come face-to-face with the situation, where we want to embed Zoho Creator forms on our website, but the end-result is a patchy looking form-space, especially when you have a custom background with image/gradient.This tutorial will tell you how to resolve this issue.

The default iFrame code results in a form that looks like this, especially if your website uses custom colors/ images.

ZohoCreator-embedded form-patchy

This is unacceptable because,

  • Patchy to look at
  • Unprofessional, especially for a client facing form
  • Makes visitors wonder if this is part of your website or someone trying to hijack sensitive information
  • Makes people feel insecure to browse your website, or want to do business with you.
  • Defnite NO-NO, this kind of a presentation will not do (however exceptionally you have coded to make the form to work the way it is supposed to work).

The Geeky part

  • I have not changed the form background color
  • Should the client decide to change his website background to a different color,gradient, or image, then I am back to square 1, client form will end up looking patchy all over again

That said, how to arrive at a form that looks like this on the website



How is this for making the Zoho Creator forms to look like it is actually part of your website

Assuming you know how to publish a zoho creator form and generate an embed code:

Original iframe code will look something like this

<iframe height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://creator.zohopublic.com/sampleapps/sales-database/form-embed/Sales/gjbKGZF/'></iframe>

Now, add this to your iframe’s src-url


 Final code will look like this

<iframe height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://creator.zohopublic.com/sampleapps/sales-database/form-embed/Sales/gjbKGZF/zc_BgClr=transparent&zc_FtrClr=transparent&zc_HdrClr=transparent&zc_BdrClr=transparent'></iframe>

Now, you can blend zoho creator forms with your website, without having to worry about "patch-work" if you decide to redesign the website in future

Leave a Reply

Your email address will not be published. Required fields are marked *