Add Hidden Fields: Zoho Forms
This guide explains how to create forms using Zoho Forms, add hidden fields for passing data like UTM parameters, connect submissions directly to Zoho CRM, and embed the form via an iFrame on any website.
Step 1: What is Zoho Forms?
Zoho Forms is an online form builder designed for capturing leads, customer feedback, registrations, and more. It integrates tightly with Zoho CRM and other Zoho apps, automating data flow and enabling advanced workflows.
- Use it if you’re already in the Zoho ecosystem or want native CRM integration.
- Offers drag-and-drop form creation, conditional logic, approvals, and reporting.
Step 2: Where Can Zoho Forms Be Created?
Zoho Forms are created on the Zoho Forms web platform:
- Log in to your Zoho account at Zoho.
- From the dashboard, click Create Form.
- Choose a blank form or template.
- Drag and drop fields to customize your form.
Step 3: How to Create a Zoho Form
- Click Create Form.
- Select Blank Form or pick a template.
- Use the drag-and-drop editor to add fields like:
- Single Line (Text), Email, Phone, Paragraph
- Dropdown, Radio, Checkboxes
- File uploads and more
Set field properties (required, default value, validation). Save the form.
Step 4: How to Add Hidden Fields in Zoho Forms
Hidden fields allow you to capture extra data (like UTM parameters) without showing them to users.
Step-by-Step
- In the Zoho Forms editor, drag a Hidden Field onto the form.
- Name it (e.g.,
channel,channeldrilldown1,channeldrilldown2,channeldrilldown3,channeldrilldown4,landing_page,landing_page_group). - Go to Form Settings → Field Alias.
- Enable URL Parameters prefill.
When the form URL is accessed with parameters, e.g.:
https://yourdomain.zohopublic.com/formname?utm_source=facebook&utm_campaign=spring_saleYour hidden fields (e.g., channel, channeldrilldown1, channeldrilldown2, channeldrilldown3, channeldrilldown4, landing_page, landing_page_group) will auto-fill with these values.
Video: Hidden Fields Walkthrough
Step 5: Embed Your Form as an iFrame
To embed your form, you need to use an <iframe> tag on your site.
Basic iFrame Example
<iframe
src="https://form.com"
width="100%"
height="400"
frameborder="0">
</iframe>Enable Attry Tracking
To allow Attry to track this iFrame, add the attribute data-attry-iframe:
<iframe
src="https://form.com"
data-attry-iframe
width="100%"
height="400"
frameborder="0">
</iframe>The data-attry-iframe attribute signals our script to automatically populate and track form data inside the embedded iFrame.
Step 6: How Zoho Forms Connect to Zoho CRM
Zoho Forms has native integration with Zoho CRM to automatically push form submissions as leads, contacts, or custom modules.
Set up Zoho CRM Integration
- In Zoho Forms, go to your form’s Settings.
- Select Integrations → Zoho CRM.
- Authenticate your Zoho CRM account if you haven’t already.
- Map form fields to CRM fields (e.g., form’s Email → CRM Email).
- Save your integration. All submissions will sync with Zoho CRM.
Video: Zoho CRM Integration Walkthrough
Step 7: Add Attry Code To Your Site
How To Add Code To Your Site
Option 1: Using the WP Admin (no code editor)
- Log into WordPress Admin.
- Go to Appearance → Theme File Editor (or Appearance → Editor if block theme).
- Open
header.php. - Paste the Attry script before the closing
</head>tag. - Save changes.
Important
The Attry code shown below is an example only. Your unique snippet must be copied from your Attry Dashboard and added to your site. Do not use the example script verbatim.
Example <head> block
<head>
<!-- Attry Main Script -->
<script src="https://cdn.attry.app/cdn/snippet/v1.js"></script>
<!-- Attry iFrame Adapter -->
<script src="https://cdn.attry.app/cdn/adapters/iframe-prefill/v1.js"></script>
<!-- Configure Attry -->
<script>
window.Attry.setConfig({
debug: true, // set to false in production
iframeTagging: {
enabled: true,
paramMap: {
channel: "channel",
channeldrilldown1: "channeldrilldown1",
channeldrilldown2: "channeldrilldown2",
channeldrilldown3: "channeldrilldown3",
channeldrilldown4: "channeldrilldown4",
landing_page: "landing_page",
landing_page_group: "landing_page_group"
},
preserveExisting: false
}
});
</script>
</head>