How to embed a Zoho Form in your guide

4 min. readlast update: 03.26.2024

Drop a Zoho Form into any section of your Touch Stay guidebook to to capture info, offer services and upsell.

Video: How to add a Zoho Form to your Touch Stay guidebook

 

Step by step: How to add a Zoho Form to your Touch Stayguidebook

 

New Custom Elements can be created from the "Custom Elements" tab of the Account page. Use the New Custom Element option.

undefined

Next, select Zoho Form as the Third Party Service. This will prepopulate a Custom element code name but you can change this to something more descriptive if you prefer. This is the short code that you will ultimately insert into your topic content where you want the form to show.

You now need to copy the embed code for your Zoho Form. This can be found in your Zoho account under the sharing options for your form. Copy the embed code then paste into the Zoho embed code box in your Touch Stay Custom Element and click Save.

undefined

Your Custom Element is now ready and the final step is to insert the code into your topic content where you want the form to be displayed.

Head to Content Hub and find/add the topic you wish to include your Zoho Form within. In the text entry box toolbar for the topic there is an option for Custom Elements. Place your cursor where you would like the form to be present in the topic, it can be used standalone or have regular topic content (regular text or images) before or after. Click the Custom Elements option in the toolbar and then select your custom element code name from the dropdown and click Insert.

undefined

 

undefined

This will place your custom element field code into your topic content and when you preview the guide it will be replaced by your chosen form.

Trouble Shooting FAQs

My embed code isn't being accepted when creating my custom element, what should I do?

If your embed code isn't being accepted then the most likely reason is that it's the wrong embed code. Double check you are using the standard embed code for your form. If this still doesn't work, or you can't find it in your Zoho Form account, then please contact support and send us a ascreenshot of the Zoho Form share options that are available to you.

My form doesn't display fully or has lots of empty space beneath it, what should I do?

The Zoho Form wil be added to your guide using what's known in web development as an iframe. This technique creates a window in your guide to the Zoho Form. However, the window isn't able to detect the size of the source Zoho Form and you may wish to adjust the height of the window to better match your form. This can be done by editing the custom element from the Custom Elements tab of the Account page. Use the 3 dots menu and select View/Edit, then adjust the height value accordingly. You may find it useful to have your guide preview open in a spearate tab so you can refresh the page after changing the height in case it needs further adjustment.

undefined

 

undefined

Can I have a different variation of the form for each of my guides?

Yes, you can set a different value for the embed code for each guide in your account. This could be useful if you have a Zoho Form with parameters to prefill values such as your property name or id. The guide specific value of any custom element can be added from the Guide Details tab for each guide. Towards the bottom of the tab is a Guide Custom Elements section, use the Edit button and within here any value for the embed code and height that you set will apply to this guide only. Note this option is only available if you have more than 1 guide in your account.

 

  

Was this article helpful?