Any externally-hosted form can be easily integrated with LiveBall by displaying it inside an iFrame on the LiveBall 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 LiveBall page. 

Here's how it's done... 

1. In your LiveBall path, add a page layout that includes the ability to insert a widget or iFrame—this option is available on virtually all master pages in the LiveBall frameworks.
2. Click on the green '+ Insert Widget or iFrame' section of the page to open the widget editor. You'll have the option to publish HTML/script OR enter  a URL for the iFrame—this is the URL of the form page you'd like to display inside the iFrame of the LiveBall page. 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 LiveBall page, outside the iFrame.
3. Adjust the iFrame specifications, as needed:  
   
   • Pass along LiveBall 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 Save button and then the blue 'show preview' button in the top right corner of the page editor screen to see how it looks. If it doesn't look quite right, please contact your LiveBall account manager for further assistance.

To track the steps of a multi-page form, just add LiveBall’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 in LiveBall. At the end of the process, it’s also possible to automatically send the respondent to another LiveBall page—this is also accomplished using Javascript provided by LiveBall.

IMPORTANT NOTE: Please do not use the iFrame feature to insert one LiveBall page into another. In other words, the iFrame feature does not support LiveBall traffic source or page URLs.