[Resolved] Infusionsoft Sidebar Widget

Home Forums Support [Resolved] Infusionsoft Sidebar Widget

Home Forums Support Infusionsoft Sidebar Widget

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #291010
    Joe

    Hi, I am trying to install my Infusionsoft lead capture to the side bar. I am using the text widget and copying in the HTML code from infusionsoft but the picture isn’t appearing and the text box is too big. I currently have the side bar set at 25%. What is the correct pixel width for the sidebar at 25%? Also, why is my infusionsoft image not appearing?? Thank you

    GP Premium 1.2.94
    #291012
    Leo
    Staff
    Customer Support

    Hi Joe,

    Sorry not familiar with Infusionsoft.
    Can you provide the code you’ve added and maybe a link to your site if it’s live?

    Thanks!

    #291050
    Joe

    The site is http://www.joepetri.com/blog

    here’s the code: <style type=”text/css”>
    .beta-base .preheader, .beta-base .header, .beta-base .sidebar, .beta-base .body, .beta-base .footer, #mainContent {
    text-align: left;
    }
    .beta-base .preheader, .beta-base .header, .beta-base .body, .beta-base .sidebar, .beta-base .leftSidebar, .beta-base .rightSidebar, .beta-base .footer {
    margin: 0;
    padding: 0;
    border: none;
    white-space: normal;
    line-height: normal;
    }
    .beta-base .title, .beta-base .subtitle, .beta-base .text, .beta-base img {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    white-space: normal;
    line-height: normal;
    }
    .beta-base .bodyContainer td.preheader{
    padding: 10px 0;
    }
    .beta-base .bodyContainer td.header {
    padding: 0;
    height: 30px;
    }
    .beta-base .bodyContainer td.body, .beta-base .bodyContainer td.footer,
    .beta-base .bodyContainer td.sidebar, .beta-base .bodyContainer td.leftSidebar, .beta-base .bodyContainer td.rightSidebar {
    padding: 20px;
    }
    .beta-base .bodyContainer td.header p, .beta-base .bodyContainer td.preheader p, .beta-base .bodyContainer td.body p,
    .beta-base .bodyContainer td.footer p, .beta-base .bodyContainer td.sidebar p,
    .beta-base .bodyContainer td.leftSidebar p, .beta-base .bodyContainer td.rightSidebar p {
    margin: 0;
    color: inherit;
    }
    .beta-base .bodyContainer td.header div.title, .beta-base .bodyContainer td.preheader div.title, .beta-base .bodyContainer td.body div.title,
    .beta-base .bodyContainer td.footer div.title, .beta-base .bodyContainer td.sidebar div.title,
    .beta-base .bodyContainer td.leftSidebar div.title, .beta-base .bodyContainer td.rightSidebar div.title,
    .beta-base .bodyContainer td.header div.subtitle, .beta-base .bodyContainer td.preheader div.subtitle, .beta-base .bodyContainer td.body div.subtitle,
    .beta-base .bodyContainer td.footer div.subtitle, .beta-base .bodyContainer td.sidebar div.subtitle,
    .beta-base .bodyContainer td.leftSidebar div.subtitle, .beta-base .bodyContainer td.rightSidebar div.subtitle,
    .beta-base .bodyContainer td.header div.text, .beta-base .bodyContainer td.preheader div.text, .beta-base .bodyContainer td.body div.text, .beta-base .bodyContainer td.body div.text div,
    .beta-base .bodyContainer td.footer div.text, .beta-base .bodyContainer td.sidebar div.text,
    .beta-base .bodyContainer td.leftSidebar div.text, .beta-base .bodyContainer td.rightSidebar div.text {
    overflow: auto;
    }
    .beta-base .optout {
    margin-bottom: 10px;
    margin-top: 10px;
    }
    div.infusion-captcha {
    width: 220px;
    padding: 10px;
    }
    div.infusion-captcha input, div.infusion-captcha select, div.infusion-captcha textarea {
    width: 95%;
    display: inline-block;
    vertical-align: middle;
    }
    table.infusion-field-container td.infusion-field-input-container input[type=’text’],
    table.infusion-field-container td.infusion-field-input-container input[type=’password’],
    table.infusion-field-container td.infusion-field-input-container textarea {
    width: 98%; /* must be 98% to make the snippet-menu line up due to border width */
    margin: 0;
    }
    table.infusion-field-container td.infusion-field-input-container select {
    width: 101%;
    *width: 102%; /* this one for IE */
    margin: 0;
    }
    table.infusion-field-container td.infusion-field-label-container {
    padding-right: 5px;
    }
    td.header .image-snippet img {
    vertical-align: bottom;
    }
    #webformErrors {
    color: #990000;
    font-size: 14px;
    }
    html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    }
    .infusion-form {
    margin: 0;
    height: 100%;
    }
    .infusion-option {
    display: block;
    text-align: left;
    }
    </style>
    <style type=”text/css”>
    .beta-font-b h1, .beta-font-b h2, .beta-font-b h3, .beta-font-b h4, .beta-font-b h5, .beta-font-b h6 {
    font-family: arial,sans-serif;
    }
    .beta-font-b h1 {font-size: 24px;}
    .beta-font-b h2 {font-size: 20px;}
    .beta-font-b h3 {font-size: 14px;}
    .beta-font-b h4 {font-size: 12px;}
    .beta-font-b h5 {font-size: 10px;}
    .beta-font-b h6 {font-size: 8px;}
    .beta-font-b address {font-style: italic;}
    .beta-font-b pre {font-family: Courier New, monospace;}
    .beta-font-b .title, .beta-font-b .title p {
    font-size: 20px;
    font-weight: bold;
    font-family: arial,sans-serif;
    }
    .beta-font-b .subtitle, .beta-font-b .subtitle p {
    font-size: 11px;
    font-weight: normal;
    font-family: arial,sans-serif;
    }
    .beta-font-b .text, .beta-font-b p {
    font-size: 12px;
    font-family: arial,sans-serif;
    }
    .beta-font-b .preheader .text, .beta-font-b .preheader .text p {
    font-size: 11px;
    font-family: arial,sans-serif;
    }
    .beta-font-b .footer a {
    font-size: 11px;
    font-family: arial,sans-serif;
    }
    .beta-font-b .footer .text {
    font-size: 10px;
    font-family: verdana,sans-serif;
    }
    .beta-font-b .sidebar .title, .beta-font-b .leftSidebar .title, .beta-font-b .rightSidebar .title {
    font-size: 15px;
    font-weight: bold;
    font-family: arial,sans-serif;
    }
    .beta-font-b .sidebar .subtitle, .beta-font-b .leftSidebar .subtitle, .beta-font-b .rightSidebar .subtitle {
    font-size: 12px;
    font-family: arial, sans-serif;
    }
    .beta-font-b .sidebar .text, .beta-font-b .sidebar .text p, .beta-font-b .leftSidebar .text, .beta-font-b .rightSidebar .text {
    font-size: 11px;
    font-family: arial, sans-serif;
    }
    .infusion-field-label-container {
    font-size: 14px;
    font-family: arial,sans-serif;
    }
    .infusion-field-input-container {
    color: #000000;
    font-size: 12px;
    }
    .infusion-option label {
    color: #000000;
    font-size: 14px;
    font-family: arial,sans-serif;
    }
    </style>
    <style type=”text/css”>
    .custom-37 .background{
    background-color:#0C2440;
    ;
    }
    .custom-37 .title{
    color:#000000;
    ;
    }
    .custom-37 .subtitle{
    color:#FFFFFF;
    ;
    }
    .custom-37 .text{
    color:#FFFFFF;
    ;
    }
    .custom-37 a{
    color:#0645AD;
    ;
    }
    .custom-37 .background .preheader .text{
    color:#1a242e;
    ;
    }
    .custom-37 .background .preheader a{
    color:#0645ad;
    ;
    }
    .custom-37 .header{
    background-color:#FFFFFF;
    ;
    }
    .custom-37 .header .title{
    color:#000000;
    ;
    }
    .custom-37 .header .subtitle{
    color:#000000;
    ;
    }
    .custom-37 .header .text{
    color:#000000;
    ;
    }
    .custom-37 .header .a{
    color:#157db8;
    ;
    }
    .custom-37 .hero{
    background-color:#025c8d;
    ;
    }
    .custom-37 .hero .title{
    color:#ffffff;
    ;
    }
    .custom-37 .hero .subtitle{
    color:#ffffff;
    ;
    }
    .custom-37 .hero .text{
    color:#ffffff;
    ;
    }
    .custom-37 .hero .a{
    color:#157db8;
    ;
    }
    .custom-37 .quote{
    background-color:#013b5a;
    ;
    }
    .custom-37 .quote:after{
    border-color:#013b5a transparent transparent transparent;
    ;
    }
    .custom-37 .quote .title{
    color:#ffffff;
    ;
    }
    .custom-37 .quote .subtitle{
    color:#ffffff;
    ;
    }
    .custom-37 .quote .text{
    color:#ffffff;
    ;
    }
    .custom-37 .quote .a{
    color:#157db8;
    ;
    }
    .custom-37 .body{
    background-color:#0C2440;
    ;
    }
    .custom-37 .main{
    background-color:#ffffff;
    ;
    }
    .custom-37 .main .title{
    color:#000000;
    ;
    }
    .custom-37 .main .subtitle{
    color:#000000;
    ;
    }
    .custom-37 .main .text{
    color:#000000;
    ;
    }
    .custom-37 .main .a{
    color:#157db8;
    ;
    }
    .custom-37 .sidebar{
    background-color:#ffffff;
    ;
    }
    .custom-37 .sidebar .title{
    color:#000000;
    ;
    }
    .custom-37 .sidebar .subtitle{
    color:#000000;
    ;
    }
    .custom-37 .sidebar .text{
    color:#000000;
    ;
    }
    .custom-37 .sidebar .a{
    color:#157db8;
    ;
    }
    .custom-37 .leftSidebar{
    background-color:#ffffff;
    ;
    }
    .custom-37 .leftSidebar .title{
    color:#f15c25;
    ;
    }
    .custom-37 .leftSidebar .subtitle{
    color:#669940;
    ;
    }
    .custom-37 .rightSidebar{
    background-color:#ffffff;
    ;
    }
    .custom-37 .rightSidebar .title{
    color:#f15c25;
    ;
    }
    .custom-37 .rightSidebar .subtitle{
    color:#669940;
    ;
    }
    .custom-37 .footer{
    background-color:#FFFFFF;
    ;
    }
    .custom-37 .footer .text{
    color:#0D0D0D;
    ;
    }
    .custom-37 .footer .title{
    color:#000000;
    ;
    }
    .custom-37 .footer a{
    color:#1B3BDE;
    ;
    }
    .custom-37 .footer .subtitle{
    color:#000000;
    ;
    }
    .custom-37 .infusion-field-label-container{
    font-size:14px;
    ;
    }
    .custom-37 .infusion-field-label-container{
    font-family:Arial;
    ;
    }
    .custom-37 .infusion-field-label-container{
    color:#FFFFFF;
    ;
    }
    .custom-37 .infusion-field-input{
    font-size:14px;
    ;
    }
    .custom-37 .infusion-option label{
    font-size:14px;
    ;
    }
    .custom-37 .infusion-option label{
    font-family:Arial;
    ;
    }
    .custom-37 .infusion-option label{
    color:#FFFFFF;
    ;
    }
    .custom-37 .webFormBodyContainer{
    border-width:0px;
    ;
    }
    .custom-37 .webFormBodyContainer{
    border-style:Hidden;
    ;
    }
    .custom-37 .webFormBodyContainer{
    border-color:#000000;
    ;
    }
    </style>
    <style type=”text/css”>
    .infusion-field-label-container {
    text-align:Left;
    }
    .infusion-field-input-container {
    width:200px;
    }
    .infusion-field-label-container {
    vertical-align:Middle;
    }
    .bodyContainer {
    width:338px;
    }
    </style>

    <table cellpadding=”10″ cellspacing=”0″ class=”background” style=”width: 100%; height: 100%”>
    <tbody>
    <tr>
    <td align=”center” valign=”top”>
    <table bgcolor=”#FFFFFF” cellpadding=”20″ cellspacing=”0″ class=”bodyContainer webFormBodyContainer” width=”100%”>
    <tbody>
    <tr>
    <td bgcolor=”#FFFFFF” class=”body” sectionid=”body” valign=”top”>
    <form accept-charset=”UTF-8″ action=”https://ng320.infusionsoft.com/app/form/process/f1196e9f0450b03d512ce4c4c45864d5&#8243; class=”infusion-form” method=”POST”>
    <input name=”inf_form_xid” type=”hidden” value=”f1196e9f0450b03d512ce4c4c45864d5″ />
    <input name=”inf_form_name” type=”hidden” value=”Meal Plan Opt-In” />
    <input name=”infusionsoft_version” type=”hidden” value=”1.63.0.47″ />

    <table class=”infusion-field-container” style=”width:100%;”>
    <tbody>
    <tr>
    <td class=”infusion-field-label-container”>
    <label for=”inf_field_FirstName”>First Name *</label>
    </td><td class=”infusion-field-input-container” style=”width:200px;”>
    <input class=”infusion-field-input-container” id=”inf_field_FirstName” name=”inf_field_FirstName” type=”text” />
    </td>
    </tr>
    </tbody>
    </table>
    <table class=”infusion-field-container” style=”width:100%;”>
    <tbody>
    <tr>
    <td class=”infusion-field-label-container”>
    <label for=”inf_field_Email”>Email *</label>
    </td><td class=”infusion-field-input-container” style=”width:200px;”>
    <input class=”infusion-field-input-container” id=”inf_field_Email” name=”inf_field_Email” type=”text” />
    </td>
    </tr>
    </tbody>
    </table>
    <input type=”submit” value=”Send me this FREE gift!” />

    </form>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>

    <script type=”text/javascript” src=”https://ng320.infusionsoft.com/app/webTracking/getTrackingCode”&gt;
    </script>

    #291061
    Leo
    Staff
    Customer Support

    How were you adding these codes before?

    I see CSS, HTML and little bit of javascript and they need to be added separately and you might not need all of them.

    Did they provide any instructions?

    #291065
    Tom
    Lead Developer
    Lead Developer

    There is no one pixel width of the 25% sidebar – it depends on your container width you have set in Customize > Layout > Container.

    Best to just alter the container width and sidebar width until you find a width that works best for you ๐Ÿ™‚

    #291368
    Joe

    Leo,
    I was adding these codes the exact same way as before. Using a text widget for the side bar. Only difference that changed is the theme when I switch to generate press.

    The instructions provided by infusionsoft is to use the Text widget and copy the HTML code as you see above. This is what the lead capture box is supposed to look like:

    https://ng320.infusionsoft.com/app/form/coaching-opt-in

    Instead if you go to the http://www.joepetri.com/blog you only see the fields for name and email.

    #291370
    Joe

    I GOT IT!!! i had to use the javascript code they provide me with not the HTML code. All set!!! Thank you

    #291373
    Leo
    Staff
    Customer Support

    Glad you got it working ๐Ÿ™‚

    #291393
    Joe

    Thanks Leo and thank you for the speedy replies.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.