AUDIENCE: Administrators, Marketing Users, Web Designers
For example, the iPhone 5 has a screen width of 320 pixels. If your form has adaptive form fields, when a person loads your web page (with the form on it) onto their iPhone 5, the form elements will scale down to 320px wide and display properly. If that same person then views that same web page and form on a desktop, the form elements will scale up to 600px wide (this is the defaujlt setting, and it can be changed).
For Act-On customers using responsive design for their websites, adaptive width is useful option. It removes the need to manually ensure that your form is built as a narrow model before placing it on a mobile-friendly website.
Frequently asked questions:
What does "adaptive" mean?
It means the width of the form fields stretch and compress based on the size of the window the form is displayed in. If you load your form on an iPhone 5, it will be 320px wide. On an iPhone 6 Plus it would be 414px wide; in a 550px-wide iframe the form will be 550px wide; and so on.
Is it "responsive"?
In some instances of responsive design, a web page’s layout can change depending on the device and other circumstances. We aren’t calling this feature responsive because the layout doesn’t actually change in the mobilewidth version vs. the desktop-width version; rather it simply stretches and compresses based on percentage-based widths. These adaptive elements will work perfectly on a mobile-friendly, responsive website.
Can I update existing forms to use adaptive-width fields?
Yes. Look for this option in the form layout editor onall new and existing forms. Simply edit your form, then choose “Use adaptive-width fields” from the drop-down at the top of the window, and save your form. Please note that “adaptive-width” is off by default in order to avoid making unintended visual changes to the many Act-On forms currently deployed and distributed online.
What are the best practices when designing for adaptive-width forms?
The best practices are the same as those for designing mobile-friendly, responsive websites. Avoid using inflexible, pixel-based widths in containing elements, and try to think in terms of relative-widths instead. Avoid using HTML tables unless your tables use relative-widths (where the width is “100%” instead of “600px” for instance).
Are field sizes adaptive, or should I still set the field widths to "small", "medium", or "large"?
Small, medium, and large field sizes are still offered. Large will scale up to 600px, medium to 300px, and small scales up to 150px. This means that if you load your form on a browser that is 320px wide (iPhone 5 size), your large-width form elements will be almost the same size as your medium-width form elements. Note that these maximum widths can also be changed by clicking the “Edit CSS” button in the form composer’s design page.
Can using this feature cause any issues?
If you are deploying Act-On forms within iframes, please test your web page throughly after updating the form. The adaptive width behavior causes the form to become longer as the width of the form compresses, so you will want to ensure the bottom of your form (where the submit button is) does not get cut off. Also, web page elements become larger when website visitors increase the font size on their browsers, so make sure your iframes provide some extra height to account for this.
I have my form set to "adaptive-width" and it isn't scaling on mobile-devices and small screens. Why?
First, check to see if it is inside an iframe. If it is, make sure your iframe does not have a fixed width. You want your iframe to have a width of 100% instead of a pixel-based number. Or, if you use CSS breakpoints, have the pixel-based width be overwritten to be an appropriate mobile width on mobile screens. If the issue persists, verify that your stationery is not blocking the adaptive scaling.
Why are many of the stock stationeries disabled when this is enabled?
Many of our older stock stationeries (such as Clouds) are disabled when adaptive width is enabled because these older stationeries utilize HTML that is not compatible with variable-width and mobile-friendly designs.
Can I use my custom stationery with this new feature?
Yes, all custom stationery can be used with adaptive-width forms. However: if your custom stationery uses fixedwidth HTML (or other elements that would interfere with the form’s ability to scale down), the adaptive nature of the form can be blocked. In this case, check your custom stationery HTML for fixed-width elements such as anything with “width:600px” and so on, and replace those with equivalent percentage-based widths.
Does enabling "adaptive-width" make any other visual updates to the forms?
Yes, the default form field height is increased from 19px to 24px. The default font size also increases from 11px to 12px. This is designed to give the forms a slightly more modern, different appearance and to visually show the switch to this mode when older forms have “adaptive” enabled.
Can I use this feature with the "Get Code" functionality?
Yes, the adaptive-width feature will also ensure that the form code that’s output via “Get Code” is adaptive and mobile-friendly. Please note that having adaptive width on is strongly encouraged if you directly embed our form HTML/CSS/JS via Get Code onto your website. The adaptive-width stylesheet is much less likely to cause CSS conflicts. Get Code is accessible by going to Content > Forms, clicking the More button while hovering your mouse over a form, going to “Get Public URL”, and then hovering your mouse over the “Default URL” title.