Skip to main content

tips-scripts-banner


If your lead gen form requires a date or set of dates, you might be interested in hooking up a “date picker” widget to make the interaction as easy as possible. While this is a feature we will one day incorporate into the core form builder in Unbounce, you can use the following set of steps to get it working today.



🚨

This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.





Click Here for Instructions


Step 1: Add jQuery and jQuery UI


Open up the “Javascripts” panel (click the Javascripts button in the bottom left of the editor) and paste in the following:


<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

Call this script “jQuery” and set the placement to “Head”.



Step 2a: Add the jQuery UI stylesheet


Next, hop over to the “Stylesheets” screen (click the “Stylesheets” button in the bottom left of the editor) and paste in the following:


<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" />

Call this stylesheet “jQuery UI” and click “Save Code”.



Step 2b (Optional): Customize the look of your date picker


There are many different themes available to the jQuery UI, and the above step is making use of the “smoothness” theme. If you wish to use a different theme, follow these steps:



  1. Hop over to the jQuery Theme Editor.

  2. Click “Gallery” and browse through the available themes.

    Click%20the%20Gallery%20Button


  3. When you find the one you like, make note of the template name (e.g., “Base”, in the image below).

    Note%20the%20Style%20Name


  4. In the “jQuery UI” stylesheet you created in Step 2a above, replace the word “smoothness” in your tag with the template name of the theme you wish to use and click “Save Code”. If the template name contains more than one word, add a hyphen (-) between each word (e.g., “black-tie”).


For example if you wanted to use the jQuery “Sunny” theme you would change the link to:

<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/sunny/jquery-ui.css" />


There should only be ONE jQuery UI stylesheet being included on your page now.



Step 3: Add the date field to your form


You may already have this in your form, but the important part is finding out what the field is called. You’ll want to use just a “Single-line Text Field”:


Design%20Your%20Form%20Single%20Text%20Field


In this example I’m calling it “Start Date”. You’ll notice right under the Field Label input box, there’s some text “start_date”. This is the ID of your field, remember it for the next step


Design%20Your%20Form%20Start%20Date



Step 4: Add the ‘date picker’ JavaScript code


Open up the Scripts dialogue again. Add a new script, call it “Date Picker” and set the placement to “Head”. Paste in the following code, and replace “start_date” with the form field ID that you took note of in the last step:


<script>

  $(function() {

    $( "#start_date" ).datepicker();

  });

</script>


👉 Make sure the “#” symbol is included in front of the form field ID - otherwise, this script won’t work!


If you’re using an outdated version of jQuery UI, you will need to use the updated version (1.12.1). You can download this from the jQuery CDN page.




That’s it, you’re all done!


You can save and preview your page now, and clicking on the “Start Date” input field should show you something like this (depending on which theme you chose):


13%20PM


Selecting a date will populate the form field like so:


20%20PM




Remember to look at all the options of using this component if you want to get your hands dirty customizing it. There really are a ton of options, including changing the format of the date string that populates your form field. Let us know how it worked out for you!

I finally got this working!

Use this:


<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">

instead of this from the instructions:


<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" />

Worked for me. Let me know if it works for you.

Try the solution I have shared above, it worked for me.

Hi Hope you are Good

I’m facing issue in style

http://unbouncepages.com/pbj-friends/

Screenshot 2021-10-21 000009


image


Screenshot 2021-10-20 235600


Screenshot 2021-10-20 235546

Hello,

We added this date picker to one of our forms, but we are having trouble with the market integration. We’ve mapped the date picker field to a marketo field but it is not passing the data over. We keep getting an “invalid date” error. Can someone tell me what the field type should be in Marketo so that it passes through properly (i.e. date, text, etc.)? Any help would be greatly appreciated.

image



  • Carlos

You may need to change the format of the date in order to make it work with Marketo. For instance, I had to modify the date produced by the calendar (MM/DD/YYYY) by replacing the “/” characters with “-” to validate the date against a javascript system date.


This was the replacement regex:

var purchaseDate = purchaseDay.replace(///g,"-");


However, if a date in another platform needs to be in the format YYYY-MM-DD, then you’d need to do a little bit more formatting to get the date to pass correctly into the other platform.


UPDATE: Just looked at Marketo’s API specifications. They need YYYY-MM-DD format.

Any advice on how to add Date & Time? Thank you!

Is there a way to allow only weekdays for app’t and exclude weekends? so 7 days out minus weekends?

Hi, 

Has anyone been able to switch the format in which the dates are given?

I.e. my client is looking to send the D.O.B through in the following format dd/mm/yyyy

 

Any help is greatly appreciated!

Thanks

Hi Cam,

I was able to find a way to change the format of the date when using the date picker. 

To do this you will want to change the script in Step 4 to what I added below:
 

<script>
  $(function() {
    $( "#start_date" ).datepicker(); 
  });
  $( "#start_date" ).datepicker({
  dateFormat: "dd-mm-yy"
});
</script>

This is script has a small addition which would allow you to set the order of dd/mm/yy.

You will want to make sure both instances of start_date match your form field ID. 

Thanks,

René

The datepicker works great!  However, users can still type random numbers into the field and the field accepts it.

 

Does anyone know how to require that what is typed into an unbounce form field is actually a date?

Reply


Terms & ConditionsCookie settings