Infusionsoft Tips
Novak Solutions has created these tips as part of our weekly Tuesday’s Tip newsletter. Each week we give a new, absolutely free tip that you can use to get more out of your Infusionsoft app.
Tuesday’s Tip: Add a date picker to an Infusionsoft date/time field
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...Tuesday’s Tip: Use an image for your Infusionsoft submit button
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...Tuesday’s Tip: Automatically get your visitor’s time zone
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...Tuesday’s Tip: Make Infusionsoft Web Forms Transparent
Putting an Infusionsoft® web form on your site is an easy way to capture leads. Coordinating the web form’s design with your existing site can increase the effectiveness of your campaign. One of the ways you can accomplish this is to give your web form a transparent background, so your website’s design shows through. We’ve created a small stylesheet that does this for you. All you have to do is add an HTML snippet to your web form with the following line of code: <link href="https://d1zcb7keu4rf07.cloudfront.net/free/transparent-webform.css" rel="stylesheet" type="text/css" /> You are welcome to download this file and host it on your own server, but we recommend letting us host it for you. We’ll keep it up-to-date in case Infusionsoft® changes anything down the road so it will continue to work. To see this tip in action, visit our Contact Us...Tuesday’s Tip: Easily use Infusionsoft Web Forms with WordPress
WordPress is the most popular blogging platform in the world. It powers over 60 million websites. With that much of a reach, there is a good chance that at some point you’ll want to include an Infusionsoft® web form on a WordPress blog. You may think you can just copy and paste the web form JavaScript code into your WordPress post or page, but this won’t work or may stop working unexpectedly. WordPress “sanitizes” your posts by removing or modifying potentially harmful code, like JavaScript. To fix this, we’ve created the Infusionsoft Web Form JavaScript plugin for WordPress. When you install and activate this plugin, it will automatically convert web form JavaScript into a WordPress-friendly shortcode. You can even add CSS to your web form, making it easy to control where your web form appears on the page, whether it has a border, and other options. Let’s take a look at an example. Our contact us page uses a web form to make it easy for our visitors to get their inquiries to the right person at Novak Solutions. The JavaScript snippet for this web form looks like this: <script type="text/javascript" src="https://joey.infusionsoft.com/app/form/iframe/38b94063ae96e76dd0b7c1ff6328ad59"></script> If you were to copy and paste that into a post (like this one!) without using the Infusionsoft Web Form JavaScript plugin, then that is exactly what your visitors would see: a line of code. Not exactly pleasing. If you were using our plugin, however, that line of code would be automatically replaced with the following shortcode as soon as you saved or updated your post: [[javascript src="https://joey.infusionsoft.com/app/form/iframe/38b94063ae96e76dd0b7c1ff6328ad59"]] When the post or page is viewed, the plugin automatically...Tuesday’s Tip
