Newsletters: Modal Dialog

The WordPress Newsletter plugin doesn’t include a dialog/overlay feature but we recommend a 3rd party plugin named Modal Dialog which you can use.

Follow these steps below to set up a dialog/overlay to be shown on your WordPress posts/pages with a subscription form in it. The dialog/overlay automatically opens/displays when users visit your site so it will increase the opt-in conversion in comparison to a sidebar subscription form.

Install and configure the Modal Dialog plugin

Download, install and activate the Modal Dialog plugin on your WordPress website.

Configure Modal Dialog

Activate the modal dialog, choose contents for the content source and then you’ll insert your WordPress Newsletter plugin shortcode (docs) into the “Dialog Contents” box.

Configure the dialog further according to your needs by changing the settings, specifying your dimensions, colours, etc. and then save it.

Please note: The Modal Dialog plugin doesn’t support the parting of shortcodes at the moment so you’ll be instructed in Step 3 how to make a small code change to the plugin so it can convert that shortcode to a subscribe form.

Enable Shortcode Parameter Support

The Modal Dialog plugin applies do_shortcode() to text but it applies stripslashes() after parsing the shortcodes, causing the parameters to go missing because of single- and double-quotes.

Open the “modal-dialog.php” file of the Modal Dialog plugin and on approximately line #940 you’ll switch around the do_shortcode() and stripslashes() like this: http://screencast.com/t/MOkxIHYfUxhL

So line #940 which looks like this:

$output .= stripslashes(do_shortcode($options['dialogtext']));

…should become this:

$output .= do_shortcode(stripslashes($options['dialogtext']));

Turn on Ajax Support

Last thing to do is to turn on “Ajax Features” in the WordPress Newsletter plugin under Newsletters > Configuration > Default Subscription Form Settings.

Dialog/Overlay/Popup Result

And that’s it, your dialog/overlay on your site will now show a fully functional Ajax subscribe form. The result looks something like this: