Inline Forms
This article covers what Inline Forms are, how to use them, and how to make sure that they work on WordPress sites.
Creating Inline Forms
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.
1 To create an Inline form, click the Form Type tab within your desired form, and select the Inline Form option.
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. When turned on, this feature that darkens the site background that surrounds the Inline Form as it comes into view when scrolling up or down the page.
2 Click the Visibility tab in the Forms Editor and make sure Manual mode is enabled.
3 You will see that 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.
Auto-embed option
Embed code
How to Embed an Inline Form in Wordpress
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.
How to test if the Inline form is working correctly?
Many of our customers have previously run into problems when the Inline form is simply not showing up on their site, so here are some steps you should take if you're not seeing the form on your site.
1 First thing you should check is that Sumo is installed on the site where you wish to show the Inline form on.
2 Next you should check if your form is Published and Active.
3 Please make sure that you're not using any AdBlocking software and that you cleared your browser cache.
4 Check that the code provided matches the one you have on the live site. You can test that by navigating to the page where you inserted the Inline form and inspecting the form element. It should have the same code provided from Sumo Inline form:
5 If you're using WordPress text editor, and the form is not showing up, check if the form code disappears in the editor after making any changes, if it does, please refer to this guide - How to Embed an Inline Form in WordPress