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

ZohoCreator-embedded-form-mergedd

 

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

zc_BgClr=transparent&zc_FtrClr=transparent&zc_HdrClr=transparent&zc_BdrClr=transparent

 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 *

*