Embed an iframe within a page

Embed an iframe within a page

Requirement

Upon successful form submission, display a webpage embedded as an iFrame inside a page.

Use Case

A software company offers multiple products. When users select a product they want to know more about, the page displays the product's website in the same tab instead of redirecting users to different pages for different products.

See how it works

Steps to follow         

1. Create a form with the following details:
Form
Form Link Name
Field Type
Field Name
Field Link Name
Products
Products
Drop Down
(with choices: CRM, Creator, Books)
Product
Product
Phone
Phone
Phone
 
2. Create a page with the Products form.
 
3. Add an HTML snippet to include the iFrame.
 
4. Save the following code in the HTML snippet:
  1. <iframe name="frameName" width="1200px" height="1000px" frameborder="0" scrolling="yes"> </iframe>
The above are the iFrame details. We will use the iFrame name in a workflow to refer to the iFrame.
 
5. Create a workflow with the following details:
 
We are selecting the Form Event as User input of a field because the website should be displayed when the user selects an option in the drop-down field.

6. Click Add New Action, and add the following snippet:
  1. if (Product=="Creator") 
  2.  { 
  3.   openUrl(" https://www.zoho.com/creator", "iframe", "frameName"); 
  4.  } 
  5. else if (Product == "CRM") 
  6.  { 
  7.   openUrl(" https://www.zoho.com/crm", "iframe", "frameName"); 
  8.  }
  9. else
  10.  { 
  11.    openUrl(" https://www.zoho.com/books", "iframe", "frameName"); 
  12.  }

The snippet uses the openURL task to open the respective website based on the selected product. The second param specifies that an iFrame needs to be open, and the third param refers to the iFrame name as specified earlier in the page.

See how it works