Responsive Image Landing Page With Email Form On Top Of Image

The Ultimate Landing Page Advanced plugin does some amazing things out of the box. But sometimes you want to accomplish something that requires a little bit of coding.

In this tutorial, I will show you how to place an image in the center of your landing page and position an email form on top of the image. The image will be responsive so it will look correct when resized and placed on mobile devices.

First, we need to turn off the default email form. Select Custom from the Email Management drop down.

customEmailManagement

Next, place your custom email form code in the Custom Email Form for Shortcode box.

shortcodeEmailForm

Next, put the html in the Content Area 1 editor. Edit the img tags src to contain your images url.

contentArea1EmailFormOnImag

Finally, place the custom css in the Custom Code box.

customCodeCss

And here is what it will look like.

emailFormOnImageFinal

Posted in Landing Pages, Tutorial