Adding A Custom Date Picker To Your Webforms

If you have ever used a date field on one of your infusionsoft webforms you will know that it just leaves you with a horrible text box that gives you no clear way to know what date format you need to enter your date in. So in order to resolve this I am going to show you how to add a date picker to your Infusionsoft webforms.

So lets say that I have my webform which i use to book people in for a One Day Intensive training session. So I have a campaign so that when they buy the ISODI they get added to a sequence and then that tells Shelley in the admin team to call the customer to book their ISODI in, So shelley will go and fill out a webform which is the one we will build below.

so we build the form out as normal asking for first name, last name, email and date of ISODI, Date of ISODI is a custom field of type date. Your form now looks like this.

now go back to your webform and add in a html snippet and add the following html code into the html snippet

now as you will see from the image below this is not the prettiest of effects but it does now let you select the date.

so in order to make this look nice go to http://jqueryui.com/demos/datepicker/ and just click view source and grab the <link> tag which is the whole of line 7 we can make it look a little nicer as seen below.

however this still obstructs access to the submit button and doesn't reflect your corporate colours so lets go to Theme Rolloer and start setting up the colours for our theme, as you set colours the samples on the right update to show you how it will look so look at the datepicker one to see if it looks how you want it to.

when your happy the theme looks the way you want it to click download theme button and then save the css files to your computer. now upload these files to your website and then change the ,link tag in the html snippet to point to the css file you are hosting as opposed to the ajax one. the result will look something like this.