Skip to main content
Carol Miranda Chor
Carol Miranda Chor
New Participant
February 23, 2017
Question

create popout from Direct Mail subscribe form

  • February 23, 2017
  • 2 replies
  • 598 views

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

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Nancy OShea
    Community Expert
    February 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>

    <meta charset="utf-8">

    <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>

    <div id="intro" class="intro">

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

    <figure><img src="http://placehold.it/500x325" alt="placholder"></figure>

    <button>Close</button>

    </div>

    <!--this is demo filler text only-->

    <article>

    <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>

    <!--end of demo filler text-->

    <!--jQuery core library-->

    <script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script>

    <script>

    //jQuery intro button

    $(document).ready(function () {

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

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

        });

    });

    </script>

    </body>

    </html>

    Nancy

    Nancy O'Shea— Product User & Community Expert
    Carol Miranda Chor
    Carol Miranda ChorAuthor
    New Participant
    February 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 ?

    Carol Miranda Chor
    Carol Miranda ChorAuthor
    New Participant
    February 23, 2017

    Here are the 2 forms

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

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

    Carol Miranda Chor
    Carol Miranda ChorAuthor
    New Participant
    February 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 !

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices