Follow

Inline Forms

This article covers what Inline Forms are, how to use them, and how to make sure that they work on WordPress sites.

 



What are 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.

You can see the option for selecting Inline Forms when you are in the Forms Editor in List Builder, under the Form Type tab.

formtype_inline_forms.png

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.

inlinefocus.png

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.



How to Embed an Inline Form

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.

embedcode.png

Auto-embed option

autoembedoption.png

Embed code

copyembedcode.png 



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.

wpdashboard.png

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.

pagesnav.png

pageedit.png

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.

postsnav.png

postsedit.png

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.

texteditor.png

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.

wpfix.png

To save, look for the Update button on the far right and select it.

updatebutton.png



Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.