[Resolved] Infusionsoft Sidebar Widget

[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

[Leo]

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!

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

[Leo]

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?

[Tom]

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 🙂

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

[Joe]

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

[Leo]

Glad you got it working 🙂

[Joe]

Thanks Leo and thank you for the speedy replies.

[Author]

Posts