Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #6202

    Hello – Please visit http://thesmarterscienceofslim.com/the-book/ and note the Newsletter widget in the the side bar, and note the email form within it.

    I’d like to use the same HTML within the body of another page, but when I paste that exact same HTML into the body of a page I get something very odd. See: http://thesmarterscienceofslim.com/free-newsletter-sign-up/

    How can I get the HTML to look and work as well as it is in a widget in the main body of a page? Thanks!

    #53304

    The code of your signup form is:

    <div class="textwidget">Research delivered to your inbox. No spam.
    <script type="text/javascript" language="javascript">
    // <![CDATA[

    function txtSFCaptcha_onclick() {

    }

    // ]]>
    </script>
    <!
    - START:Signup form Content:
    - Include this block if you are integrating into an existing page.
    >
    <style text="text/css">
    .eemStyleSFBody
    {
    padding: 0px;
    background-color: #FFFFFF;
    border: ridge 0px gray;
    width: 100%;
    }
    .eemStyleSFMainOuter
    {
    padding: 0px;
    border: ridge 0px gray;
    width: 100%;
    }
    .eemStyleSFMainInner
    {
    padding: 0px;
    }
    .eemStyleSFMain
    {
    color: #000000;
    background-color: #FFFFFF;
    font-family: Arial;
    width: 100%;
    }
    .eemStyleSFCompletion
    {
    color: green;
    font-weight: bold;
    font-family: Arial;
    font-size: small;
    }
    .eemStyleSFCompletion_BGIsRedish
    {
    color: green;
    font-weight: bold;
    filter: glow(color=yellow, strength=3);
    font-family: Arial;
    font-size: small;
    }
    .eemStyleSFLogoDisplay
    {
    }
    .eemStyleSFLogoHide
    {
    display: none;
    }
    .eemStyleSFLogoOuter
    {
    padding: 0px;
    border: solid 0px green;
    text-align: left;
    }
    .eemStyleSFLogoInner
    {
    border: solid 0px green;
    height: 100%;
    background-color: Transparent;
    padding: 0px;
    }
    .eemStyleSFTitleOuter
    {
    border: solid 0px green;
    text-align: left;
    padding: 0px;
    }
    .eemStyleSFTitleInner
    {
    padding: 5px;
    background-color: Transparent;
    border: solid 0px gray;
    }
    .eemStyleSFTitle
    {
    font-weight: bold;
    font-size: larger;
    }
    .eemStyleSFErrorOuter
    {
    border: solid 0px gray;
    text-align: left;
    padding: 0px;
    }
    .eemStyleSFErrorInner
    {
    padding: 5px;
    background-color: Transparent;
    border: solid 0px gray;
    }
    .eemStyleSFError
    {
    color: Red;
    font-size: x-small;
    font-family: Verdana;
    font-weight: bold;
    }
    .eemStyleSFError_BGIsRedish
    {
    color: Red;
    font-size: x-small;
    filter: glow(color=yellow, strength=3);
    font-family: Verdana;
    font-weight: bold;
    }
    .eemStyleSFContentOuter
    {
    padding: 0px;
    }
    .eemStyleSFContentInner
    {
    padding: 0px;
    }
    .eemStyleSFSectionQuestionOuter_Vertical
    {
    float: none;
    padding: 0px;
    margin-bottom: 4px;
    border: solid 0px gray;
    width: auto;
    overflow: auto;
    }
    .eemStyleSFSectionQuestionOuter_Horizontal
    {
    float: left;
    padding: 0px;
    margin-bottom: 0px;
    border: solid 0px gray;
    width: 48%;
    overflow: auto;
    }
    .eemStyleSFSectionIntGrpOuter_Vertical
    {
    padding: 0px;
    border: solid 0px gray;
    float: none;
    overflow: auto;
    width: auto;
    }
    .eemStyleSFSectionIntGrpOuter_Horizontal
    {
    padding: 0px;
    border: solid 0px gray;
    float: right;
    overflow: auto;
    width: 48%;
    }
    .eemStyleSFSectionHeadingInner
    {
    padding: 2px;
    height: 100%;
    border: solid 0px gray;
    }
    .eemStyleSFSectionHeading
    {
    font-weight: bold;
    padding: 5px;
    font-size: small;
    background-color: #FFFFFF;
    color: #000000;
    }
    .eemStyleSFSectionContent
    {
    padding: 5px;
    }
    .eemStyleSFIntGrpContent
    {
    border: 1px solid #D9E1E8;
    padding: 5px;
    }
    .eemStyleSFText
    {
    color: #000000;
    font-size: x-small;
    }
    .eemStyleSFTextDisabled
    {
    color: Gray;
    font-weight: bold;
    font-size: x-small;
    }
    .eemStyleSFReq
    {
    color: Red;
    font-size: x-small;
    font-style: italic;
    vertical-align: baseline;
    font-weight: bold;
    }
    .eemStyleSFReq_BGIsRedish
    {
    font-weight: bold;
    font-style: italic;
    vertical-align: baseline;
    font-size: x-small;
    filter: glow(color=yellow, strength=3);
    color: Red;
    }
    .eemStyleSFReqError
    {
    background-color: Red;
    }
    </style>
    <form eemaction="https://app.expressemailmarketing.com/SignupForm.handler?SFAction=ProcessSubmit&SFID=101456&SFCustomerID=101699" action="https://app.expressemailmarketing.com/SignupForm.handler?SFAction=ProcessSubmit&SFID=101456&SFCustomerID=101699" class="eemStyleSFForm" autocomplete="on" method="post" name="frmEEMSignupForm" id="frmEEMSignupForm">
    <input type="hidden" id="hidSFContext" name="SFContext">
    <input type="hidden" id="hidSFStage" name="SFStage">
    <input type="hidden" id="hidDebug" name="SFDebug">
    <!
    >
    <!-- Main Page -->
    <!
    >
    <!-- divMainOuter: Use to apply styles to outer border of main page -->
    <div class="eemStyleSFMainOuter" id="divMainOuter">
    <!-- divMainInner: Use to apply styles to inner border of main page -->
    <div class="eemStyleSFMainInner" id="divMainInner">
    <!
    >
    <!-- Signup Form Content -->
    <!
    >
    <table width="100%" class="eemStyleSFMain" id="tblSFMain">
    <tbody><tr>
    <td>
    <!
    >
    <!-- Content -->
    <!
    >
    <!-- divContentOuter: Used to apply styles to outer border of the Content -->
    <div class="eemStyleSFContentOuter" id="divContentOuter">
    <!-- divContentInner: Used to apply styles to inner border of the Content -->
    <div class="eemStyleSFContentInner" id="divContentInner">
    <!
    >
    <!-- Question Heading -->
    <!
    >
    <!-- divSectionQuestionOuter: Used to apply styles to outer border of the Question Heading -->
    <div class="eemStyleSFSectionQuestionOuter_Vertical" id="divSectionQuestionOuter">
    <!-- divSectionQuestionInner: Used to apply styles to inner border of the Question Heading -->
    <div class="eemStyleSFSectionHeadingInner" id="divSectionQuestionInner">
    <table width="100%" cellspacing="0" cellpadding="1">
    <tbody><tr>
    <td align="left">
    <label>
    email address</label>
    </td>
    <td align="left">
    <input type="text" class="eemStyleSFValue" value="" maxlength="255" style="width:150px;" name="txtSFEmail" id="txtSFEmail">
    </td>
    </tr>
    <tr>
    <td align="left">
    <label>
    code</label>
    </td>
    <td align="left">
    <img id="img1" src="https://app.expressemailmarketing.com/SignupForm.handler?SFAction=GenerateCaptcha&SFID=101456&SFCustomerID=101699&Width=100&Height=30&MinTextLen=2&MaxTextLen=4">
    </td>
    </tr>
    <tr>
    <td align="left">
    <label>
    enter code</label>
    </td>
    <td align="left">
    <input type="text" onclick="return txtSFCaptcha_onclick()" style="width: 150px" name="txtSFCaptcha" id="txtSFCaptcha">
    </td>
    </tr>
    <tr>
    <td align="center" colspan="2">
    <input type="submit" class="eemStyleSFButton" value="Subscribe" onclick="return (SFValidateFields());" name="btnSFSubmit" id="btnSFSubmit">
    </td>
    </tr>
    </tbody></table>
    </div>
    <!-- divSectionQuestionInner: End -->
    </div>
    <!-- divSectionQuestionOuter: End -->
    <!
    >
    <!-- Interest Group Heading -->
    <!
    >
    <!-- divSectionIntGrpOuter: Used to apply styles to outer border of the Interest Group Heading -->
    <!-- divSectionIntGrpOuter: End -->
    </div>
    <!-- divContentInner: End -->
    </div>
    <!-- divContentOuter: End -->
    </td>
    </tr>
    <tr>
    <td>
    <!
    >
    <!-- Form Submission -->
    <!
    >
    <!-- divSubmitOuter: Used to apply styles to outer border of the submit button -->
    <div class="eemStyleSFSubmitOuter" id="divSubmitOuter">
    <!-- divSubmitInner: Used to apply styles to inner border of the submit button -->
    <div class="eemStyleSFSubmitInner" id="divSubmitInner">

    </div>
    <!-- divSubmitInner: End -->
    </div>
    <!-- divSubmitOuter: End -->
    <input type="hidden" value="http://thesmarterscienceofslim.com/email-subscription-confirmed/" name="FormMailerRedirect" id="FormMailerRedirect">
    <input type="hidden" value="http://thesmarterscienceofslim.com/oops/" name="FormMailerRedirectOnError" id="FormMailerRedirectOnError">
    </td>
    </tr>
    <tr height="20px">
    <td>
    </td>
    </tr>
    </tbody></table>
    </div>
    <!-- divMainInner: End -->
    </div>
    <!-- divMainOuter: End -->
    </form>
    <!
    Please do not remove the below script statements.
    They are used to handle errors and process the signup form.
    >
    <script src="https://app.expressemailmarketing.com/images/gallery/Templates/SignupForm/EEMQueryString.js" language="javascript"></script>
    <script src="https://app.expressemailmarketing.com/images/gallery/Templates/SignupForm/EEMSignupForm.js" language="javascript"></script>
    <!
    - END:Signup form Content:
    - Include this block if you are integrating into an existing page.
    ></div>

    You should be able to use it like this directly in HTML ..be sure to create your page/post in HTML (at least put this code in while in HTML view). I can’t guarantee this will work since I’m not going to go through all your custom files.

    #53305

    perfect! Thanks so much Chris

    #53306

    Glad that Chris could help you :)

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘email submission form not laying out correctly’ is closed to new replies.