Tag: jquery

Adding datepicker widget to Infusionsoft forms and what’s up with their primitive forms?!

05/28/2015 Aaron Belchamber No Comments

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.


How to add more form fields and data to a serialized AJAX form in JQuery

03/17/2015 Aaron Belchamber No Comments

In a jQuery form post, here is how you add more data to the serialized form data.  This is useful if you find yourself needing to pass some extra data along with the AJAX post.  This is a barebones example of a blind AJAX post to a form handler script called “form_handler.php”.

I find jQuery’s “serialize” and “serializeArray” functions are very efficient when collecting form data, you can’t get much easier than that.  The beauty of using a framework, whether it’s a Javascript framework, or PHP framework, these built-in libraries and functions save coding time.

var data = $('#myForm').serializeArray();

data.push({name: 'wordlist', value: wordlist});

$.post("form_handler.php", data);

I hope this saves someone time!  This solution works well in many different instances you have to post a form through Javascript.

– Aaron  Belchamber