[Resolved] How do I control a form in a hook like I do in a hero element?

Home Forums Support How do I control a form in a hook like I do in a hero element?

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1027222
    Janet Davis

    Hello,
    On the home page https://goodlivingacres.com
    I put the code for a form into the hero element. It works great I can control how it looks.

    I am trying to put the same code for a form at the bottom of every page except for the home page so I am using an element hook for before footer. It’s currently on the contact page: https://goodlivingacres.com/contact/

    The location is perfect, but I do not have the ability to set where it is on the page like I can in a hero element.

    Is there a way I can make it look like I did on the home page by using the hero element or put the hero element at the bottom of the pages as well?

    Or another solution?

    Thank you
    Janet

    #1027246
    David
    Staff
    Customer Support

    Hi there,

    so the hook you have added is full width. If you want to contain it like in the hero then wrap it inside this HTML:

    <div class="grid-container">
    <!-- add code here -->
    </div>
    #1027886
    Janet Davis

    I put the html on the outside of the code, and it didn’t change anything.

    This is the full code.
    Thank you!

    <style id=”formCSS”>.awbr-grid .awbr-row{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;width:100%;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:0 5px}.awbr-grid .awbr-row [class^=awbr-c-]{box-sizing:border-box;padding:5px}.awbr-grid .awbr-row [class*=”-1″]{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.awbr-grid .awbr-row [class*=”-2″]{-webkit-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2}.awbr-grid .awbr-row [class*=”-3″]{-webkit-box-flex:3;-webkit-flex:3;-ms-flex:3;flex:3}.awbr-grid .awbr-row [class*=”-4″]{-webkit-box-flex:4;-webkit-flex:4;-ms-flex:4;flex:4}.awbr-grid .awbr-row [class*=”-5″]{-webkit-box-flex:5;-webkit-flex:5;-ms-flex:5;flex:5}.awbr-grid .awbr-row [class*=”-6″]{-webkit-box-flex:6;-webkit-flex:6;-ms-flex:6;flex:6}.awbr-grid .awbr-row [class*=”-7″]{-webkit-box-flex:7;-webkit-flex:7;-ms-flex:7;flex:7}.awbr-grid .awbr-row [class*=”-8″]{-webkit-box-flex:8;-webkit-flex:8;-ms-flex:8;flex:8}.awbr-grid .awbr-row [class*=”-9″]{-webkit-box-flex:9;-webkit-flex:9;-ms-flex:9;flex:9}.awbr-grid .awbr-row [class*=”-10″]{-webkit-box-flex:10;-webkit-flex:10;-ms-flex:10;flex:10}.awbr-grid .awbr-row [class*=”-11″]{-webkit-box-flex:11;-webkit-flex:11;-ms-flex:11;flex:11}.awbr-grid .awbr-row [class*=”-12″]{-webkit-box-flex:12;-webkit-flex:12;-ms-flex:12;flex:12}@media screen and (max-width:720px){.awbr-grid .awbr-row{display:block}.awbr-grid .awbr-row div[class^=awbr-c-]{display:block;min-width:100%;width:100%}}.awbr-grid{font-family:helvetica,arial,sans-serif;font-size:12px;color:#333;max-width:100%;background:#EEE;padding:10px 5px;box-sizing:border-box}.awbr-grid h2{font-size:24px;margin:5px 0;padding:0}.awbr-grid p{font-size:16px;margin-bottom:5px;white-space:pre-wrap}.awbr-grid input{border:0;box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;font-size:14px;margin:0}.awbr-grid input[type=submit]{background-position:center!important;width:100%;padding:10px;margin-bottom:10px;white-space:normal;background:#AAA;color:#FFF;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.awbr-grid input[type=email],.awbr-grid input[type=text]{background-position:center!important;border:none;margin-bottom:10px;padding:10px;width:100%}.awbr-grid #awbr-footer p{text-align:center;font-size:12px}.awbr-grid .awbr-pulse{-webkit-animation:pulse 1.3s ease infinite;animation:pulse 1.3s ease infinite;-webkit-backface-visibility:hidden;backface-visibility:hidden}@-webkit-keyframes pulse{0%,100%{-webkit-transform:perspective(1px) scale(1,1);transform:perspective(1px) scale(1,1)}50%{-webkit-transform:perspective(1px) scale(1.02,1.02);transform:perspective(1px) scale(1.02,1.02)}}@keyframes pulse{0%,100%{-webkit-transform:perspective(1px) scale(1,1);transform:perspective(1px) scale(1,1)}50%{-webkit-transform:perspective(1px) scale(1.02,1.02);transform:perspective(1px) scale(1.02,1.02)}}@media (max-width:600px){[class*=aweberHFormCol-]{padding:0;width:100%}}</style>

    <form class=”af-form-wrapper” accept-charset=”UTF-8″ action=”https://www.aweber.com/scripts/addlead.pl&#8221; method=”post”>

    <input name=”meta_web_form_id” type=”hidden” /> <input name=”meta_split_id” type=”hidden” /> <input id=”aweberListId” name=”listname” type=”hidden” value=”awlist5444726″ /> <input id=”aweberRedirect” name=”redirect” type=”hidden” value=”https://goodlivingacres.com/thanks-for-joining-us/&#8221; /> <input id=”aweberAdTracking” name=”meta_adtracking” type=”hidden” value=”” /> <input name=”meta_message” type=”hidden” value=”1″ /> <input name=”meta_required” type=”hidden” value=”name,email” /> <input name=”meta_tooltip” type=”hidden” />
    <h3 id=”aweberHeadlineTextValue” align=”center”>Get Hemp Industry Information & Farm Progress
    <p id=”aweberSubheaderTextValue” style=”display: block;” align=”center”>No Charge – No Spam – Unsubscribe Anytime</p>

    <input id=”awf_field-78323082″ class=”text” style=”background-color: #f1f1f1; background-image: url(‘http://aweber.design/webforms/beta/&#8217;); color: #4a4a4a;” tabindex=”500″ name=”name” type=”text” placeholder=”Name” />
    <input id=”awf_field-78323083″ class=”text” style=”background-color: #f1f1f1; background-image: url(‘http://aweber.design/webforms/beta/&#8217;); color: #4a4a4a;” tabindex=”501″ name=”email” type=”email” placeholder=”Email Address” />

    <input id=”submitButton” class=”submit awbr-pulse” style=”background-color: #d16100; background-image: url(‘http://aweber.design/webforms/beta/&#8217;); color: #ffffff;” tabindex=”502″ name=”submit” type=”submit” value=”Sign Me Up” />

    </form>

    #1027998
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    It doesn’t look like the code is inside the grid container.

    Try this:

    <div class="grid-container">
        <form stuff..>
    
        </form>
    </div>
    #1028345
    Janet Davis

    I am not sure what I am doing wrong.
    It didn’t change anything in the element.

    Here is the code:

    <div class="grid-container">
    <form>
    	
    	
    </div><style id="formCSS">.awbr-grid .awbr-row{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;width:100%;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:0 5px}.awbr-grid .awbr-row [class^=awbr-c-]{box-sizing:border-box;padding:5px}.awbr-grid .awbr-row [class*="-1"]{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.awbr-grid .awbr-row [class*="-2"]{-webkit-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2}.awbr-grid .awbr-row [class*="-3"]{-webkit-box-flex:3;-webkit-flex:3;-ms-flex:3;flex:3}.awbr-grid .awbr-row [class*="-4"]{-webkit-box-flex:4;-webkit-flex:4;-ms-flex:4;flex:4}.awbr-grid .awbr-row [class*="-5"]{-webkit-box-flex:5;-webkit-flex:5;-ms-flex:5;flex:5}.awbr-grid .awbr-row [class*="-6"]{-webkit-box-flex:6;-webkit-flex:6;-ms-flex:6;flex:6}.awbr-grid .awbr-row [class*="-7"]{-webkit-box-flex:7;-webkit-flex:7;-ms-flex:7;flex:7}.awbr-grid .awbr-row [class*="-8"]{-webkit-box-flex:8;-webkit-flex:8;-ms-flex:8;flex:8}.awbr-grid .awbr-row [class*="-9"]{-webkit-box-flex:9;-webkit-flex:9;-ms-flex:9;flex:9}.awbr-grid .awbr-row [class*="-10"]{-webkit-box-flex:10;-webkit-flex:10;-ms-flex:10;flex:10}.awbr-grid .awbr-row [class*="-11"]{-webkit-box-flex:11;-webkit-flex:11;-ms-flex:11;flex:11}.awbr-grid .awbr-row [class*="-12"]{-webkit-box-flex:12;-webkit-flex:12;-ms-flex:12;flex:12}@media screen and (max-width:720px){.awbr-grid .awbr-row{display:block}.awbr-grid .awbr-row div[class^=awbr-c-]{display:block;min-width:100%;width:100%}}.awbr-grid{font-family:helvetica,arial,sans-serif;font-size:12px;color:#333;max-width:100%;background:#EEE;padding:10px 5px;box-sizing:border-box}.awbr-grid h2{font-size:24px;margin:5px 0;padding:0}.awbr-grid p{font-size:16px;margin-bottom:5px;white-space:pre-wrap}.awbr-grid input{border:0;box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;font-size:14px;margin:0}.awbr-grid input[type=submit]{background-position:center!important;width:100%;padding:10px;margin-bottom:10px;white-space:normal;background:#AAA;color:#FFF;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.awbr-grid input[type=email],.awbr-grid input[type=text]{background-position:center!important;border:none;margin-bottom:10px;padding:10px;width:100%}.awbr-grid #awbr-footer p{text-align:center;font-size:12px}.awbr-grid .awbr-pulse{-webkit-animation:pulse 1.3s ease infinite;animation:pulse 1.3s ease infinite;-webkit-backface-visibility:hidden;backface-visibility:hidden}@-webkit-keyframes pulse{0%,100%{-webkit-transform:perspective(1px) scale(1,1);transform:perspective(1px) scale(1,1)}50%{-webkit-transform:perspective(1px) scale(1.02,1.02);transform:perspective(1px) scale(1.02,1.02)}}@keyframes pulse{0%,100%{-webkit-transform:perspective(1px) scale(1,1);transform:perspective(1px) scale(1,1)}50%{-webkit-transform:perspective(1px) scale(1.02,1.02);transform:perspective(1px) scale(1.02,1.02)}}@media (max-width:600px){[class*=aweberHFormCol-]{padding:0;width:100%}}</style>
    <div><form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
    <div><input name="meta_web_form_id" type="hidden" /> <input name="meta_split_id" type="hidden" /> <input id="aweberListId" name="listname" type="hidden" value="awlist5444726" /> <input id="aweberRedirect" name="redirect" type="hidden" value="https://goodlivingacres.com/thanks-for-joining-us/" /> <input id="aweberAdTracking" name="meta_adtracking" type="hidden" value="" /> <input name="meta_message" type="hidden" value="1" /> <input name="meta_required" type="hidden" value="name,email" /> <input name="meta_tooltip" type="hidden" /></div>
    <div class="awbr-grid">
    <div class="awbr-row">
    <div class="aweberHFormCol-1-1">
    <h3 id="aweberHeadlineTextValue" align="center">Get Hemp Industry Information & Farm Progress
    <p id="aweberSubheaderTextValue" style="display: block;" align="center">No Charge - No Spam - Unsubscribe Anytime</p>
    
    </div>
    </div>
    <div class="awbr-row">
    <div class="awbr-c-5">
    <div class="af-textWrap"><input id="awf_field-78323082" class="text" style="background-color: #f1f1f1; background-image: url('http://aweber.design/webforms/beta/'); color: #4a4a4a;" tabindex="500" name="name" type="text" placeholder="Name" /></div>
    <div class="af-clear"></div>
    </div>
    <div class="awbr-c-5">
    <div class="af-textWrap"><input id="awf_field-78323083" class="text" style="background-color: #f1f1f1; background-image: url('http://aweber.design/webforms/beta/'); color: #4a4a4a;" tabindex="501" name="email" type="email" placeholder="Email Address" /></div>
    <div class="af-clear"></div>
    </div>
    <div class="awbr-c-3">
    
    <input id="submitButton" class="submit awbr-pulse" style="background-color: #d16100; background-image: url('http://aweber.design/webforms/beta/'); color: #ffffff;" tabindex="502" name="submit" type="submit" value="Sign Me Up" />
    <div class="af-clear"></div>
    </div>
    </div>
    <div class="awbr-row">
    <div class="awbr-c-12">
    
    We respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow noopener noreferrer">email privacy</a> | <a title="AWeber Email Marketing" href="https://www.aweber.com" target="_blank" rel="nofollow noopener noreferrer">Powered by AWeber Email Marketing</a>
    <div class="af-clear"></div>
    </div>
    </div>
    </div>
    <div><img src="https://forms.aweber.com/form/displays.htm?id=jMxMzCxsbEzMzA==" alt="" /></div>
    </form></div>
    </div>
    
    </form>
    </div>
    #1028346
    David
    Staff
    Customer Support

    Can you re-send us the code again and before submitting the topic, highlight the code and hit the Code button. This will preserve the formatting so we can see what the issue is

    #1028350
    Janet Davis

    code again. Did this help? Thank you

    <div class="grid-container">
    <form>
    	
    	
    </div><style id="formCSS">.awbr-grid .awbr-row{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;width:100%;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:0 5px}.awbr-grid .awbr-row [class^=awbr-c-]{box-sizing:border-box;padding:5px}.awbr-grid .awbr-row [class*="-1"]{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.awbr-grid .awbr-row [class*="-2"]{-webkit-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2}.awbr-grid .awbr-row [class*="-3"]{-webkit-box-flex:3;-webkit-flex:3;-ms-flex:3;flex:3}.awbr-grid .awbr-row [class*="-4"]{-webkit-box-flex:4;-webkit-flex:4;-ms-flex:4;flex:4}.awbr-grid .awbr-row [class*="-5"]{-webkit-box-flex:5;-webkit-flex:5;-ms-flex:5;flex:5}.awbr-grid .awbr-row [class*="-6"]{-webkit-box-flex:6;-webkit-flex:6;-ms-flex:6;flex:6}.awbr-grid .awbr-row [class*="-7"]{-webkit-box-flex:7;-webkit-flex:7;-ms-flex:7;flex:7}.awbr-grid .awbr-row [class*="-8"]{-webkit-box-flex:8;-webkit-flex:8;-ms-flex:8;flex:8}.awbr-grid .awbr-row [class*="-9"]{-webkit-box-flex:9;-webkit-flex:9;-ms-flex:9;flex:9}.awbr-grid .awbr-row [class*="-10"]{-webkit-box-flex:10;-webkit-flex:10;-ms-flex:10;flex:10}.awbr-grid .awbr-row [class*="-11"]{-webkit-box-flex:11;-webkit-flex:11;-ms-flex:11;flex:11}.awbr-grid .awbr-row [class*="-12"]{-webkit-box-flex:12;-webkit-flex:12;-ms-flex:12;flex:12}@media screen and (max-width:720px){.awbr-grid .awbr-row{display:block}.awbr-grid .awbr-row div[class^=awbr-c-]{display:block;min-width:100%;width:100%}}.awbr-grid{font-family:helvetica,arial,sans-serif;font-size:12px;color:#333;max-width:100%;background:#EEE;padding:10px 5px;box-sizing:border-box}.awbr-grid h2{font-size:24px;margin:5px 0;padding:0}.awbr-grid p{font-size:16px;margin-bottom:5px;white-space:pre-wrap}.awbr-grid input{border:0;box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;font-size:14px;margin:0}.awbr-grid input[type=submit]{background-position:center!important;width:100%;padding:10px;margin-bottom:10px;white-space:normal;background:#AAA;color:#FFF;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.awbr-grid input[type=email],.awbr-grid input[type=text]{background-position:center!important;border:none;margin-bottom:10px;padding:10px;width:100%}.awbr-grid #awbr-footer p{text-align:center;font-size:12px}.awbr-grid .awbr-pulse{-webkit-animation:pulse 1.3s ease infinite;animation:pulse 1.3s ease infinite;-webkit-backface-visibility:hidden;backface-visibility:hidden}@-webkit-keyframes pulse{0%,100%{-webkit-transform:perspective(1px) scale(1,1);transform:perspective(1px) scale(1,1)}50%{-webkit-transform:perspective(1px) scale(1.02,1.02);transform:perspective(1px) scale(1.02,1.02)}}@keyframes pulse{0%,100%{-webkit-transform:perspective(1px) scale(1,1);transform:perspective(1px) scale(1,1)}50%{-webkit-transform:perspective(1px) scale(1.02,1.02);transform:perspective(1px) scale(1.02,1.02)}}@media (max-width:600px){[class*=aweberHFormCol-]{padding:0;width:100%}}</style>
    <div id="formHTML"><form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
    <div style="display: none;"><input name="meta_web_form_id" type="hidden" /> <input name="meta_split_id" type="hidden" /> <input id="aweberListId" name="listname" type="hidden" value="awlist5444726" /> <input id="aweberRedirect" name="redirect" type="hidden" value="https://goodlivingacres.com/thanks-for-joining-us/" /> <input id="aweberAdTracking" name="meta_adtracking" type="hidden" value="" /> <input name="meta_message" type="hidden" value="1" /> <input name="meta_required" type="hidden" value="name,email" /> <input name="meta_tooltip" type="hidden" /></div>
    <div class="awbr-grid" style="background-color: #ffffff; background-image: url('http://aweber.design/webforms/beta/'); color: #4a4a4a;">
    <div class="awbr-row">
    <div class="aweberHFormCol-1-1">
    <h3 id="aweberHeadlineTextValue" align="center">Get Hemp Industry Information & Farm Progress
    <p id="aweberSubheaderTextValue" style="display: block;" align="center">No Charge - No Spam - Unsubscribe Anytime</p>
    
    </div>
    </div>
    <div class="awbr-row">
    <div class="awbr-c-5">
    <div class="af-textWrap"><input id="awf_field-78323082" class="text" style="background-color: #f1f1f1; background-image: url('http://aweber.design/webforms/beta/'); color: #4a4a4a;" tabindex="500" name="name" type="text" placeholder="Name" /></div>
    <div class="af-clear"></div>
    </div>
    <div class="awbr-c-5">
    <div class="af-textWrap"><input id="awf_field-78323083" class="text" style="background-color: #f1f1f1; background-image: url('http://aweber.design/webforms/beta/'); color: #4a4a4a;" tabindex="501" name="email" type="email" placeholder="Email Address" /></div>
    <div class="af-clear"></div>
    </div>
    <div class="awbr-c-3">
    
    <input id="submitButton" class="submit awbr-pulse" style="background-color: #d16100; background-image: url('http://aweber.design/webforms/beta/'); color: #ffffff;" tabindex="502" name="submit" type="submit" value="Sign Me Up" />
    <div class="af-clear"></div>
    </div>
    </div>
    <div class="awbr-row">
    <div id="awbr-footer" class="awbr-c-12" style="display: block;">
    
    We respect your <a class="aweberFooterLink" style="color: #d16100;" title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow noopener">email privacy</a> | <a class="aweberFooterLink" style="color: #d16100;" title="AWeber Email Marketing" href="https://www.aweber.com" target="_blank" rel="nofollow noopener">Powered by AWeber Email Marketing</a>
    <div class="af-clear"></div>
    </div>
    </div>
    </div>
    <div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=jMxMzCxsbEzMzA==" alt="" /></div>
    </form></div>
    </div>
    
    </form>
    </div>
    #1028367
    David
    Staff
    Customer Support

    You have a few extra div and form elements that are not required and is breaking the grid-container. Try this:

    <div class="grid-container">
        <style id="formCSS">
            .awbr-grid .awbr-row {
                -webkit-box-align: center;
                -webkit-align-items: center;
                -ms-flex-align: center;
                align-items: center;
                box-sizing: border-box;
                width: 100%;
                max-width: 100%;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-wrap: wrap;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                padding: 0 5px
            }
    
            .awbr-grid .awbr-row [class^=awbr-c-] {
                box-sizing: border-box;
                padding: 5px
            }
    
            .awbr-grid .awbr-row [class*="-1"] {
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1
            }
    
            .awbr-grid .awbr-row [class*="-2"] {
                -webkit-box-flex: 2;
                -webkit-flex: 2;
                -ms-flex: 2;
                flex: 2
            }
    
            .awbr-grid .awbr-row [class*="-3"] {
                -webkit-box-flex: 3;
                -webkit-flex: 3;
                -ms-flex: 3;
                flex: 3
            }
    
            .awbr-grid .awbr-row [class*="-4"] {
                -webkit-box-flex: 4;
                -webkit-flex: 4;
                -ms-flex: 4;
                flex: 4
            }
    
            .awbr-grid .awbr-row [class*="-5"] {
                -webkit-box-flex: 5;
                -webkit-flex: 5;
                -ms-flex: 5;
                flex: 5
            }
    
            .awbr-grid .awbr-row [class*="-6"] {
                -webkit-box-flex: 6;
                -webkit-flex: 6;
                -ms-flex: 6;
                flex: 6
            }
    
            .awbr-grid .awbr-row [class*="-7"] {
                -webkit-box-flex: 7;
                -webkit-flex: 7;
                -ms-flex: 7;
                flex: 7
            }
    
            .awbr-grid .awbr-row [class*="-8"] {
                -webkit-box-flex: 8;
                -webkit-flex: 8;
                -ms-flex: 8;
                flex: 8
            }
    
            .awbr-grid .awbr-row [class*="-9"] {
                -webkit-box-flex: 9;
                -webkit-flex: 9;
                -ms-flex: 9;
                flex: 9
            }
    
            .awbr-grid .awbr-row [class*="-10"] {
                -webkit-box-flex: 10;
                -webkit-flex: 10;
                -ms-flex: 10;
                flex: 10
            }
    
            .awbr-grid .awbr-row [class*="-11"] {
                -webkit-box-flex: 11;
                -webkit-flex: 11;
                -ms-flex: 11;
                flex: 11
            }
    
            .awbr-grid .awbr-row [class*="-12"] {
                -webkit-box-flex: 12;
                -webkit-flex: 12;
                -ms-flex: 12;
                flex: 12
            }
    
            @media screen and (max-width:720px) {
                .awbr-grid .awbr-row {
                    display: block
                }
    
                .awbr-grid .awbr-row div[class^=awbr-c-] {
                    display: block;
                    min-width: 100%;
                    width: 100%
                }
            }
    
            .awbr-grid {
                font-family: helvetica, arial, sans-serif;
                font-size: 12px;
                color: #333;
                max-width: 100%;
                background: #EEE;
                padding: 10px 5px;
                box-sizing: border-box
            }
    
            .awbr-grid h2 {
                font-size: 24px;
                margin: 5px 0;
                padding: 0
            }
    
            .awbr-grid p {
                font-size: 16px;
                margin-bottom: 5px;
                white-space: pre-wrap
            }
    
            .awbr-grid input {
                border: 0;
                box-shadow: none;
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                font-size: 14px;
                margin: 0
            }
    
            .awbr-grid input[type=submit] {
                background-position: center !important;
                width: 100%;
                padding: 10px;
                margin-bottom: 10px;
                white-space: normal;
                background: #AAA;
                color: #FFF;
                border-radius: 3px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px
            }
    
            .awbr-grid input[type=email],
            .awbr-grid input[type=text] {
                background-position: center !important;
                border: none;
                margin-bottom: 10px;
                padding: 10px;
                width: 100%
            }
    
            .awbr-grid #awbr-footer p {
                text-align: center;
                font-size: 12px
            }
    
            .awbr-grid .awbr-pulse {
                -webkit-animation: pulse 1.3s ease infinite;
                animation: pulse 1.3s ease infinite;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden
            }
    
            @-webkit-keyframes pulse {
    
                0%,
                100% {
                    -webkit-transform: perspective(1px) scale(1, 1);
                    transform: perspective(1px) scale(1, 1)
                }
    
                50% {
                    -webkit-transform: perspective(1px) scale(1.02, 1.02);
                    transform: perspective(1px) scale(1.02, 1.02)
                }
            }
    
            @keyframes pulse {
    
                0%,
                100% {
                    -webkit-transform: perspective(1px) scale(1, 1);
                    transform: perspective(1px) scale(1, 1)
                }
    
                50% {
                    -webkit-transform: perspective(1px) scale(1.02, 1.02);
                    transform: perspective(1px) scale(1.02, 1.02)
                }
            }
    
            @media (max-width:600px) {
                [class*=aweberHFormCol-] {
                    padding: 0;
                    width: 100%
                }
            }
        </style>
        <div id="formHTML">
            <form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl"
                method="post">
                <div style="display: none;"><input name="meta_web_form_id" type="hidden" /> <input name="meta_split_id"
                        type="hidden" /> <input id="aweberListId" name="listname" type="hidden" value="awlist5444726" />
                    <input id="aweberRedirect" name="redirect" type="hidden"
                        value="https://goodlivingacres.com/thanks-for-joining-us/" /> <input id="aweberAdTracking"
                        name="meta_adtracking" type="hidden" value="" /> <input name="meta_message" type="hidden"
                        value="1" />
                    <input name="meta_required" type="hidden" value="name,email" /> <input name="meta_tooltip"
                        type="hidden" />
                </div>
                <div class="awbr-grid"
                    style="background-color: #ffffff; background-image: url('http://aweber.design/webforms/beta/'); color: #4a4a4a;">
                    <div class="awbr-row">
                        <div class="aweberHFormCol-1-1">
                            <h3 id="aweberHeadlineTextValue" align="center">Get Hemp Industry Information & Farm
                                Progress
                                <p id="aweberSubheaderTextValue" style="display: block;" align="center">No Charge - No
                                    Spam -
                                    Unsubscribe Anytime</p>
    
                        </div>
                    </div>
                    <div class="awbr-row">
                        <div class="awbr-c-5">
                            <div class="af-textWrap"><input id="awf_field-78323082" class="text"
                                    style="background-color: #f1f1f1; background-image: url('http://aweber.design/webforms/beta/'); color: #4a4a4a;"
                                    tabindex="500" name="name" type="text" placeholder="Name" /></div>
                            <div class="af-clear"></div>
                        </div>
                        <div class="awbr-c-5">
                            <div class="af-textWrap"><input id="awf_field-78323083" class="text"
                                    style="background-color: #f1f1f1; background-image: url('http://aweber.design/webforms/beta/'); color: #4a4a4a;"
                                    tabindex="501" name="email" type="email" placeholder="Email Address" /></div>
                            <div class="af-clear"></div>
                        </div>
                        <div class="awbr-c-3">
    
                            <input id="submitButton" class="submit awbr-pulse"
                                style="background-color: #d16100; background-image: url('http://aweber.design/webforms/beta/'); color: #ffffff;"
                                tabindex="502" name="submit" type="submit" value="Sign Me Up" />
                            <div class="af-clear"></div>
                        </div>
                    </div>
                    <div class="awbr-row">
                        <div id="awbr-footer" class="awbr-c-12" style="display: block;">
    
                            We respect your <a class="aweberFooterLink" style="color: #d16100;" title="Privacy Policy"
                                href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow noopener">email
                                privacy</a> | <a class="aweberFooterLink" style="color: #d16100;"
                                title="AWeber Email Marketing" href="https://www.aweber.com" target="_blank"
                                rel="nofollow noopener">Powered by AWeber Email
                                Marketing</a>
                            <div class="af-clear"></div>
                        </div>
                    </div>
                </div>
                <div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=jMxMzCxsbEzMzA=="
                        alt="" />
                </div>
            </form>
        </div>
    </div>
    #1028483
    Janet Davis

    Thank you but that didn’t help sorry. I am including the original code below that I had from Aweber before I thought I was changing code correctly per help. Obviously I’ve messed up. I am using this exact code in the hero element which is on the home page at https://hempcontentmarketing.com

    This code is for the other pages, but I wanted it to look the same as the home page, but in the bottom element before-footer. Thank you so much for helping me with this.

    ` <style id=”formCSS”>.awbr-grid .awbr-row{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;width:100%;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:0 5px}.awbr-grid .awbr-row [class^=awbr-c-]{box-sizing:border-box;padding:5px}.awbr-grid .awbr-row [class*=”-1″]{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.awbr-grid .awbr-row [class*=”-2″]{-webkit-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2}.awbr-grid .awbr-row [class*=”-3″]{-webkit-box-flex:3;-webkit-flex:3;-ms-flex:3;flex:3}.awbr-grid .awbr-row [class*=”-4″]{-webkit-box-flex:4;-webkit-flex:4;-ms-flex:4;flex:4}.awbr-grid .awbr-row [class*=”-5″]{-webkit-box-flex:5;-webkit-flex:5;-ms-flex:5;flex:5}.awbr-grid .awbr-row [class*=”-6″]{-webkit-box-flex:6;-webkit-flex:6;-ms-flex:6;flex:6}.awbr-grid .awbr-row [class*=”-7″]{-webkit-box-flex:7;-webkit-flex:7;-ms-flex:7;flex:7}.awbr-grid .awbr-row [class*=”-8″]{-webkit-box-flex:8;-webkit-flex:8;-ms-flex:8;flex:8}.awbr-grid .awbr-row [class*=”-9″]{-webkit-box-flex:9;-webkit-flex:9;-ms-flex:9;flex:9}.awbr-grid .awbr-row [class*=”-10″]{-webkit-box-flex:10;-webkit-flex:10;-ms-flex:10;flex:10}.awbr-grid .awbr-row [class*=”-11″]{-webkit-box-flex:11;-webkit-flex:11;-ms-flex:11;flex:11}.awbr-grid .awbr-row [class*=”-12″]{-webkit-box-flex:12;-webkit-flex:12;-ms-flex:12;flex:12}@media screen and (max-width:720px){.awbr-grid .awbr-row{display:block}.awbr-grid .awbr-row div[class^=awbr-c-]{display:block;min-width:100%;width:100%}}.awbr-grid{font-family:helvetica,arial,sans-serif;font-size:12px;color:#333;max-width:100%;background:#EEE;padding:10px 5px;box-sizing:border-box}.awbr-grid h2{font-size:24px;margin:5px 0;padding:0}.awbr-grid p{font-size:16px;margin-bottom:5px;white-space:pre-wrap}.awbr-grid input{border:0;box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;font-size:14px;margin:0}.awbr-grid input[type=submit]{background-position:center!important;width:100%;padding:10px;margin-bottom:10px;white-space:normal;background:#AAA;color:#FFF;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.awbr-grid input[type=email],.awbr-grid input[type=text]{background-position:center!important;border:none;margin-bottom:10px;padding:10px;width:100%}.awbr-grid #awbr-footer p{text-align:center;font-size:12px}.awbr-grid .awbr-pulse{-webkit-animation:pulse 1.3s ease infinite;animation:pulse 1.3s ease infinite;-webkit-backface-visibility:hidden;backface-visibility:hidden}@-webkit-keyframes pulse{0%,100%{-webkit-transform:perspective(1px) scale(1,1);transform:perspective(1px) scale(1,1)}50%{-webkit-transform:perspective(1px) scale(1.02,1.02);transform:perspective(1px) scale(1.02,1.02)}}@keyframes pulse{0%,100%{-webkit-transform:perspective(1px) scale(1,1);transform:perspective(1px) scale(1,1)}50%{-webkit-transform:perspective(1px) scale(1.02,1.02);transform:perspective(1px) scale(1.02,1.02)}}@media (max-width:600px){[class*=aweberHFormCol-]{padding:0;width:100%}}</style>
    <div id=”formHTML”><form class=”af-form-wrapper” accept-charset=”UTF-8″ action=”https://www.aweber.com/scripts/addlead.pl&#8221; method=”post”>
    <div style=”display: none;”><input name=”meta_web_form_id” type=”hidden” /> <input name=”meta_split_id” type=”hidden” /> <input id=”aweberListId” name=”listname” type=”hidden” value=”awlist5444726″ /> <input id=”aweberRedirect” name=”redirect” type=”hidden” value=”https://goodlivingacres.com/thanks-for-joining-us/&#8221; /> <input id=”aweberAdTracking” name=”meta_adtracking” type=”hidden” value=”” /> <input name=”meta_message” type=”hidden” value=”1″ /> <input name=”meta_required” type=”hidden” value=”name,email” /> <input name=”meta_tooltip” type=”hidden” /></div>
    <div class=”awbr-grid” style=”background-color: #ffffff; background-image: url(‘http://aweber.design/webforms/beta/&#8217;); color: #4a4a4a;”>
    <div class=”awbr-row”>
    <div class=”aweberHFormCol-1-1″>
    <h3 id=”aweberHeadlineTextValue” align=”center”>Get Hemp Industry Information & Farm Progress
    <p id=”aweberSubheaderTextValue” style=”display: block;” align=”center”>No Charge – No Spam – Unsubscribe Anytime</p>

    </div>
    </div>
    <div class=”awbr-row”>
    <div class=”awbr-c-5″>
    <div class=”af-textWrap”><input id=”awf_field-78323082″ class=”text” style=”background-color: #f1f1f1; background-image: url(‘http://aweber.design/webforms/beta/&#8217;); color: #4a4a4a;” tabindex=”500″ name=”name” type=”text” placeholder=”Name” /></div>
    <div class=”af-clear”></div>
    </div>
    <div class=”awbr-c-5″>
    <div class=”af-textWrap”><input id=”awf_field-78323083″ class=”text” style=”background-color: #f1f1f1; background-image: url(‘http://aweber.design/webforms/beta/&#8217;); color: #4a4a4a;” tabindex=”501″ name=”email” type=”email” placeholder=”Email Address” /></div>
    <div class=”af-clear”></div>
    </div>
    <div class=”awbr-c-3″>

    <input id=”submitButton” class=”submit awbr-pulse” style=”background-color: #d16100; background-image: url(‘http://aweber.design/webforms/beta/&#8217;); color: #ffffff;” tabindex=”502″ name=”submit” type=”submit” value=”Sign Me Up” />
    <div class=”af-clear”></div>
    </div>
    </div>
    <div class=”awbr-row”>
    <div id=”awbr-footer” class=”awbr-c-12″ style=”display: block;”>

    We respect your <a class=”aweberFooterLink” style=”color: #d16100;” title=”Privacy Policy” href=”https://www.aweber.com/permission.htm&#8221; target=”_blank” rel=”nofollow noopener”>email privacy</a> | <a class=”aweberFooterLink” style=”color: #d16100;” title=”AWeber Email Marketing” href=”https://www.aweber.com&#8221; target=”_blank” rel=”nofollow noopener”>Powered by AWeber Email Marketing</a>
    <div class=”af-clear”></div>
    </div>
    </div>
    </div>
    <div style=”display: none;”><img src=”https://forms.aweber.com/form/displays.htm?id=jMxMzCxsbEzMzA==&#8221; alt=”” /></div>
    </form></div>`

    #1028545
    David
    Staff
    Customer Support

    What happens if you add that code directly to a Hook and select the after_main_content hook?

    #1028563
    Janet Davis

    I made a brand new element to a hook and this worked perfectly.

    Thank you for your patience.

    Janet

    #1028567
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.