WordPress Shortcode based Teaser Form

CSS, Divi, WordPress

Shortcuts Ultimate for WordPress is Full of Functions

I recently did a post on Contact Form 7 and a large form. This is a quick and easy addition to that, allowing you to embed large forms in a spoiler/teaser style toggle. Also, a bit of information about the shortcodes plugin I use on a number of sites, Shortcodes Ultimate. It’s ET Divi tested in my case, having been put on at least a dozen sites in the last year.

First you’ll want to install the plugin, it can be found here: Shortcodes Ultimate

You can also go through the admin Plugin installer, searching for Shortcodes Ultimate, the author of this particular plugin is Vladimir Anokhin. Click the install button and then activate the plugin. After you have SU installed you should have a new button on pretty much any text field that has an editor. The button is on top next to your media tab most likely, take a look at the first image to see it on mine.

In this tutorial I’m going to assume you have a form you have created that you have the code for or, have a shortcode for a form you created through a plugin. I’m going to use the job application that I made in a previous tutorial. 

Click the Insert Shortcode button, with your cursor placed where you want to put the spoiler and form. You will get the modal window for the shortcodes that are included with the SU Plugin, see the second picture for the location of the “Spoiler” shortcode…and click on the option. You will get a second modal window, which I have shown in picture 3.

The second modal window will give you several layout options, simple but feature rich, these are the things that make this plugin great to me. You could use the toggles or any similar feature, using nearly any Premium Theme, or any of the great Child Themes that are available to the Elegant Themes users following along….however it’s the base styling and easy style access that make this Plugin above the bar.

After configuring the spoiler, click “insert shortcode”, you should get a line that looks like this:

form

That’s it, you’re done! Final; product is shown below. Unless you want to style your spoiler? Easy access is what I said…look at pictures 4 & 5 to see where to look for this particular easter egg. The CSS styling you add here will not be overwritten by updates, and as well it is a nice little code editor….nice!

Hope this helped, if there are other things you would like to read, let me know!

Our form, with no styling applied:

Click on the Icon:

My Form Title

Pin It on Pinterest

Share This

Share this post with your friends!