Time 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.
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