by Jacob Allred | Oct 29, 2013 | Tips
UPDATE 7/1/2014: Updated the code to remove company and address line 2 from the shipping side as well as the billing side. If the company name or second address line aren’t relevant for your business, you can easily hide these fields with a small snippet of JavaScript. Simply add this code to the Customer Header field for your shopping cart or order form: <script type="text/javascript"> // <![CDATA[ jQuery(function(){ jQuery('#company').parent().parent().hide(); jQuery('#addressLine2').parent().parent().hide(); jQuery('#shipCompany').parent().parent().hide(); jQuery('#shipAddressLine2').parent().parent().hide(); }); // ]]> </script> The fields will still exist on your checkout page but will be invisible to your customers, so make sure the company field isn’t marked as being required or they won’t be able to...
by Jacob Allred | Oct 22, 2013 | Tips
You may think of your website’s favicon as an insignificant part of your website’s overall design, but favicons play an important role. They build brand awareness, help establish credibility, and make life easier for individuals with dozens (or even hundreds) of bookmarked websites. Unfortunately, Infusionsoft doesn’t provide an easy way to change the favicon that is displayed to your visitors when they go through your shopping cart, order form, or pull up a hosted web form. Luckily for you, we’ve put together an easy to use snippet of HTML that will let you easily change your favicon. We’ve tested this snippet with all the major browsers, including Internet Explorer, Chrome, and Firefox. To make it work, simply change the faviconURL path below to the URL for your own favicon (it must be at an HTTPS site!) and then paste into an HTML Snippet, or into the Custom Header field for your shopping cart or order form: <script type="text/javascript"> // <![CDATA[ jQuery(document).ready(function(){ faviconURL = 'https://novaksolutions.com/favicon.ico'; jQuery('link[rel=\'shortcut icon\']').remove(); jQuery(document.createElement('link')) .attr('type', 'image/x-icon') .attr('rel', 'shortcut icon') .attr('href', faviconURL) .appendTo('head'); jQuery(document.createElement('link')) .attr('type', 'image/x-icon') .attr('rel', 'icon') .attr('href', faviconURL) .appendTo('head'); }); // ]]> </script> This JavaScript snippet will remove Infusionsoft’s favicon (if present) and then add your favicon in a format supported by Chrome/Firefox, and a format supported by Internet Explorer. To see this tip in action, check out our demo order form and demo web...
by Jacob Allred | Oct 15, 2013 | Tips
Infusionsoft has provided several different types of custom fields, including the date and the date/time field types. The date field type conveniently provides a date picker that makes it easy for your visitor’s to select a date. The date/time field type provides a time picker that makes it easy for your visitor’s to select a date. But what if you want your visitor’s to pick a date and a time? With the help of an HTML Snippet you can easily combine the benefits of both the date and the date/time field types. First, you’ll need a custom date/time field. If you aren’t familiar with creating custom fields, please review the documentation at the Infusionsoft website. Next, you need to find the field’s database name. On the custom fields page, click the View the field database names (for the API) link. This will open a new window that lists your custom fields and their database names. As you can see in the screenshot, our field’s database name is Datetime0. Write this down, you’ll need it later. Add your date/time field to your web form, then create an HTML Snippet with this content (replacing Datetime0 with the database name of your custom field): <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script> <script type="text/javascript"> // <![CDATA[ jQuery(document).ready(function(){ jQuery('#inf_custom_Datetime0').datepicker(); }); // ]]> </script> That’s it! Your web form’s date/time field now has both a date picker and a time...
by Jacob Allred | Oct 8, 2013 | Tips
The default submit button for Infusionsoft web forms can be a bit… well… plain. We’ve had a few people ask us how to replace that boring button with something a little more colorful. This is easy to accomplish with a snippet of CSS and an image. To see this tip in action, check out our demo web form. The first step is to create your image. I recommend using a GIF or PNG with a transparent background. Other than that, the sky’s the limit. Make it big, small, monochrome, colorful, include unicorns… Whatever you think will get your visitors to click it! This button needs uploaded to a URL that can be accessed with an HTTPS URL. We used a free button set by Masatomo Kubota. Next, edit your web form in Infusionsoft. Configure the Submit button label to match the text on your graphic. This text won’t be visible to your visitors, but may be read by screen readers. Add an HTML Snippet with the following code: <style> button[type=submit] { background: transparent url("https://novaksolutions.com/wp-content/uploads/2013/10/submit.png") 0 0 no-repeat; color: transparent; display: inline-block; cursor: pointer; width: 145px; /* width of the image */ height: 44px; /* height of the image */ border: 0; } </style> Replace the URL with the path to your own image. Remember, your image has to be at an HTTPS URL! Last, edit the width and height to match the width and height of your image. The results: I hope you enjoyed this tip! Please let me know in the comments if you have any ideas for future tips! Our team of Infusionsoft experts is ready to put...
by Jacob Allred | Oct 1, 2013 | Tips
Everyone knows that calling a lead too early in the morning or too late in the evening is a sure way to start off on the wrong foot. But how do you deal with the myriad of time zones? You could try relying on the visitor’s state, but there are 15 states that span more than one time zone. You also have oddities like Arizona, where daylight saving time isn’t observed. An easy solution is to gather the visitor’s time zone when they fill out a web form. This takes a few steps, including adding a custom field to store the time zone, and modifying a web form to automatically fill a hidden field with the visitor’s time zone. To see this tip in action, check out our demo web form. If you aren’t familiar with creating custom fields, please review the documentation at the Infusionsoft website. You’ll need to create a custom Text field for the Contact Record. We called ours Timezone. Next, you need to find the field’s database name. On the custom fields page, click the View the field database names (for the API) link. This will open a new window that lists your custom fields and their database names. As you can see in the screenshot, our field’s database name is Timezone0. Write this down, you’ll need it later. Add your time zone field to your web form as a Hidden field. This will make the field invisible to the visitor, but will still allow the time zone to be saved to Infusionsoft. Next we need to add some JavaScript that will automatically determine the visitor’s time zone, and save it...
