Forms
      Back to home
      1. Rock Content Knowledge Base
      2. Ion
      3. Forms

      Support: Externally-Hosted Forms

      Any externally-hosted form can be easily integrated with your Ion console by displaying it inside an iFrame on your Ion page—an iFrame allows an externally-hosted page to be embedded and displayed inside another page.

      This is especially useful for incorporating secure forms, like credit card applications, into your landing experiences. When a respondent views the page, the secure form is seamlessly pulled in and appears to be part of the Ion page. 


      Here's how it's done:

      1. From within the page editor, drag the iFrame icon from the Basics category into any container on your page.
      2. Enter the URL of the form you would like to pull in via iFrame. NOTE: Be sure the page is a stripped down version with only the critical elements (i.e., form fields and action buttons); branding or navigation in the header or on the sides should be removed to avoid any conflict with the branding that's already on the Ion page, outside the iFrame.
      3. Adjust the iFrame specifications, as needed:  
        • Pass along Ion respondent variables in the iFrame's query string' is checked by default—this will ensure that any required parameters are passed through to the external form page for data collection and/or tracking purposes. 
        • Specify the iFrame width and height (up to 1200x1200 pixels). Adjusting the iFrame width and height to accommodate the maximum form page size can also help you prevent the scrollbar from appearing inside the iFrame for a longer form. Just be sure to note the width of the page: if the content area is only 710px wide, for instance, the iFrame specification should match that— anything larger than that will not fit on the page. 
        • Border - select 'yes' to add a thin border line around the iFrame.
        • Scrolling defaults to 'auto' so scrollbars will automatically be included if the embedded form page exceeds the specified width and/or height of the iFrame. Select 'no' to eliminate scrollbars under all circumstances; select 'yes' to include scrollbars under all circumstances. 
        • Align defaults to 'none' so the embedded page or form automatically displays in the center of the iFrame, or you may choose to align left or right in the iFrame. 
        • Add margin width and height if you'd like to include buffer space around the page that's being displayed inside the iFrame. 
        • 'Frame name' is optional, but allows you to name the iFrame in case it needs to be referenced by Javascript, etc.
      4. Click the OK button and then preview the page to see how it looks. If it doesn't look quite right, please contact our Support Team for further assistance.


      To track the steps of a multi-page form, just add Ion's ready-to-use Javascript to each of the pages of the form—by doing this, you’ll be able to tag various steps that occur on the externally-hosted form so the tags and even conversions are logged back into your Ion console. At the end of the process, it’s also possible to automatically send the respondent to another Ion page—this is also accomplished using Javascript provided by Ion.