create popout from Direct Mail subscribe form

Report · Feb 23, 2017

Sorry, I left and didn't see answers until now.We need to make pop outs for the (2) Direct Mail subscribe forms below. They will be applied to pages on our DW website.

You asked what I mean by a pop out ? My code for the subscribe form can only be embedded. That means there's a black subscribe on the page that needs to be clicked to get to the form. I want the form to pop out instead of being embedded in the page. I assume that if user doesn't want to subscribe, they can x out of the subscribe and go on from there. I'm a newbie and don't recognize the possible solutions that were offered. Could I pay to have these forms turned into pop outs ?

Basically, I want the form to be in their face before they can proceed, so they can choose whether to fill it or not. Isn't that what a pop out is ? When the form is embedded, they have to click to even look at it. I'll wait o see your answers on line. Please please tell me someone can do this for me. Earth Day is approaching...

Report · Feb 23, 2017

I have seen pages with pop outs. The most important question is, do pop out subscribe forms have to be filled out or can they be eliminated by x-ing out ?

Report · Feb 23, 2017

Here are the 2 forms

https://dm-mailinglist.com/subscribe?f=cf60bdfc

https://dm-mailinglist.com/subscribe?f=4117983b

Report · Feb 23, 2017

Do you need for me to copy the code ? I made html files from the code but couldn't copy or drag them into this box !

Report · Feb 23, 2017

You can copy your <form> inside the <div id="intro">

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 23, 2017

Or to make it simpler for you, put an <iframe> inside <div id="intro">. This create a page inside a page.

<!doctype html>

<html>

<head>

<title>Intro on Page Load</title>

<style>

* {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

img {

vertical-align: baseline;

max-width: 100%

}

body {

width: 80%;

margin: 0 auto;

}

#intro {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1100;

background: rgba(0,0,0,0.8)

}

.intro {

font-size: 18px;

padding: 10px;

background-color: #006;

color: #FFF;

border: 5px solid #4488C3;

text-align: center;

width: 50%; /*exactly half of screen width**/

height: 50%; /*exactly half of screen height**/

position: absolute;

left: 25%; /*half the width of your container*/

top: 25%; /*half the height of your container*/

overflow: auto;/*scrollbars appear when needed*/

}

.intro button {

padding: 0.55em;

font-size: 18px;

}

</style>

</head>

<body>

<iframe src="https://dm-mailinglist.com/subscribe?f=cf60bdfc" style="border:none; width: 55%; height:920px"></iframe><br>

<button>CLOSE</button>

</div>

YOUR MAIN WEB PAGE CONTENT GOES HERE....

//jQuery intro button

$(document).ready(function () {

$("button").click(function () {

$("#intro").hide();

});

</script>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 23, 2017

OK so you want an intro to appear on page load.

Copy & paste this code into a new blank document. Save & Preview in browsers.

<!doctype html>

<html>

<head>

<title>Intro on Page Load</title>

<style>

* {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

img {

vertical-align: baseline;

max-width: 100%

}

body {

width: 80%;

margin: 0 auto;

}

#intro {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1100;

background: rgba(0,0,0,0.8)

}

.intro {

font-size: 18px;

padding: 10px;

background-color: #006;

color: #FFF;

border: 5px solid #4488C3;

text-align: center;

width: 50%; /*exactly half of screen width**/

height: 50%; /*exactly half of screen height**/

position: absolute;

left: 25%; /*half the width of your container*/

top: 25%; /*half the height of your container*/

overflow: auto;/*scrollbars appear when needed*/

}

.intro button {

padding: 0.55em;

font-size: 18px;

}

</style>

</head>

<body>

<h3>Intro content goes here...</h3>

<button>Close</button>

</div>

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>

</article>

//jQuery intro button

$(document).ready(function () {

$("button").click(function () {

$("#intro").hide();

});

</script>

</body>

</html>

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator