This article covers what Inline Forms are, how to use them, and how to make sure that they work on WordPress sites.
Inline Forms are a Form Type in List Builder. They are popups that are embedded in the actual page with the rest of the main content.
You can see the option for selecting Inline Forms when you are in the Forms Editor in List Builder, under the Form Type tab.
Under the Design tab, in addition to the usual options that are given to most of the Form Types (changing text, background color, etc.), there is a feature specific to Inline Forms called Inline Focus.
Inline Focus, when turned on, is a feature that darkens the site background that surrounds the Inline Form as it comes into view when scrolling up or down the page.
Under the Visibility tab in the Forms Editor, you can allow Sumo to auto-embed your Inline Forms, or, you can decide exactly where you want to put your Inline Forms by using an embed code: simply copy the embed code and paste it in your site's code to where you want it to appear.
Many of our customers have previously run into problems when adding their Inline Form embed code to their WordPress site. This is due to the TinyMCE editor in WordPress.
When switching between Text view (where you place the embed code) and Visual view in the editor, the embed code disappears. To prevent this from happening, follow the following steps:
Find your Inline Form embed code on the Visibility tab in the Forms Editor and copy it.
Go into your WordPress Dashboard.
If you want to add your Inline Form to a specifc Page, select Pages in the left-hand navigation. Look for the page you want to edit, then either click on the title of that page or select the Edit option that appears beneath it when you hover over it with your cursor.
If you want to add your Inline Form to a specific Post, select Posts from the left-hand navigation. Look for the page you want to edit, then either click on the title of that page or select the Edit option that appears beneath it when you hover over it with your cursor.
Make sure you're in the Text tab within the editor, then find where you want to place your Inline Form in your Page or Post and paste in your embed code.
In order for your Inline Form embed code to not disappear when you switch to Visual view, modify the embed code to include style="display: none;" as an attribute in the span tag, then include ADD_THIS_TEXT in-between the opening and closing span tags.
To save, look for the Update button on the far right and select it.