Why does Forms look different framed on my website?

Overview

Forms uses a responsive user interface that will shift and move to display an optimal user experience based on both the resolution (e.g. height and width) and orientation (e.g. portrait and landscape) of the device.  This allows Forms to provide the best possible experience across multiple devices like laptops, tablets as well as smartphones.

If Forms is embedded into your website using an iFrame, there is a good chance that your website is restricting the width of the page and adversely affecting the Forms user interface.  To resolve this issue, follow the instructions below.

Resolution

Instruct your website administrator to do one of the following:

1. Remove the iFrame and open Forms in a new window or tab.  This will allow Forms to display the best possible user interface for your users  (Recommended solution).
Example HTML code: <a href=”https://formspipe.ipipeline.com/” target=”_blank”>Click here for Forms</a>

2. Increase the width of the iFrame within your website so that Forms has the maximum amount of space available.   This will allow Forms to use the Medium or Large device user interface for the best customer experience (see examples below).
Example HTML code: <iframe src=”https://formspipe.ipipeline.com” width=”100%” ></iframe>

Forms User Interface Device Sizes

Below are examples of what the Forms user interface will look like depending on the resolution of the device.

Large Devices
Desktops/Laptops (>1200px)
formssearch-lg

formsresults-lg

 

Medium Devices
Desktops/Laptops (>992px)

formssearch-md

formsresults-md

 

Small Devices
Tablets (>768px)

formssearch-sm

formsresults-sm

Small Devices
Phones(<768px)

formssearch-xsm

formsresults-xsm