Love Infusionsoft or hate it, if you are stuck using it, you want to be able to deploy useful forms with fields that optimize your visitors’ UX.  If you are collecting date information, Infusionsoft forms don’t export the code with any built-in AJAX functionality.  None. Someone made a conscious decision there to do the bare minimum in making sure this CRM’s capabilities could deploy forms.

Plugging your Infusionsoft form into a CMS like WordPress should be as simple as copy and paste, but unless you’re making really simple forms, good luck with that.  With their web interface, they took jQuery drag and drop and AJAXed so much of their interface, yet, the forms you create from a campaign are all designed to be simple standalone pages, there’s no choice to get code to work within an existing page — figure that one out.

That’s the biggest reason I don’t particularly care for Infusionsoft, the code they generate for simple forms is bloated, clunky, and it is not encapsulated to allow you to paste easily into existing web pages without it being likely to interfere somehow with other code on your page.  Wouldn’t it be nice if the campaign form generator asked you whether your JQuery library is loaded and what version you use?  You know, keep the customer happy kind of features?

I’m sure they offer upsells or other plug-ins that can turn your Infusionsoft forms into simple AJAX WordPress on-any-page widgets, but for the cost of this system, I think they need to get their act together and catch up to the more modern forms out there that plays nicely with other systems and performs simple AJAX out of the box.

So, if you are looking for a simple way to add a datepicker widget to your form, the best thing to do is add hidden HTML to your Infusionsoft form and follow the instructions I eventually found here:

http://ug.infusionsoft.com/article/AA-00840/0/Add-a-calendar-date-picker-to-a-web-form.html

For your convenience, here’s the snippet that goes into the html form element.

<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript">
</script>
<script type="text/javascript">
jQuery('#inf_field_YourDateField').datepicker();
</script>

Why it’s just not a simple option for form elements or they just have a “date” widget like most frameworks is a poor oversight.  As frequent and common date fields are, don’t get me started with Infusionsoft.  There are some great things about their system but I often wonder if they listen to their users.  It’s just common sense to offer robust form creation leveraging the newest technologies to offer the best UX, but then again, Infusionsoft often feels (and looks) like it was designed without a clear plan and where common sense was an after thought.  Don’t get me wrong, Infusionsoft has potential, but it is bloated, slow, and the API is strangely limited in its capabilities, which in turn limits the businesses (you know, their paying customers) that use it.

By the way, with the above snippet, you have to change the jQuery selector from ‘#inf_field_YourDateField’ to the field name from your particular form.


In case you ever need to manually validate those pesky multi-field credit card date fields, you know “Month” and “Year” and you want to make sure the expiration is never set prior to the current month for obvious reasons like the credit card would get declined, you need to have the browser client side figure out (or be given the value through PHP injection into your JS script) the last date of the last day of the current month so you can then calculate and compare the “Month” and “Year” fields to this date value.

Using Javascript’s Date object should be adequate for most browsers and IE 8 or greater (there’s a work around to accommodate older browsers, but is it really worth reaching people who are using IE7?!  That’s a cost/benefit decision you and your marketing team will have to make.)

dt=new Date();
new Date(dt.getFullYear(), dt.getMonth() + 1, 0, 23, 59, 59)

No Javascript libraries like JQuery is required!