How to add calendar to pick date in Unbounce

Unbounce has plenty of functionality to offer that hasn’t been part of the UI but still with help of some code you can get many of these features to work in your landing pages and get better conversion rates.

 

This post includes all those features and you can also figure out how to implement these features in the landing page.

 

Let’s take a look at the features you might not be aware of.

1. Calendar in Unbounce

You don’t always have a form with email field only. 

Sometimes you need a big form that includes a lot more information.

 

There may be a time when you need to use date fields in your unbounce form. 

But with Unbounce date fields, users may have to write the date which isn’t very good practice. 

 

But now you can add calendar in your date fields and then user can just select the date from the calendar. 

 

That date will be automatically added into the field.

Let’s add the first calendar in your page:-

 

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="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="//a.unbounce.com/s/javascripts/jquery/jquery-ui.1.8.16.min.js"></script>

				
			

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

Step 1a: 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" type="text/css" 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.

You can choose another theme named “Sunny”.

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" />
				
			

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”:

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

Step 4: Add the ‘date picker’ JavaScript code

 

Open up the “Javascript” section again. Add a new script, call it “Date Picker” or just paste it in the same javascript you created in the first step.

 

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):

calendar in unbounce

Leave a Reply

Your email address will not be published. Required fields are marked *

Picture of Sahibjot Singh

Sahibjot Singh

Hey there! I'm Sahibjot Singh, and I've been on an exciting journey as a Web Designer/Developer and Email Automation expert for the past 12 years. It's been a fantastic ride filled with new challenges, and I've learned how to overcome various issues along the way.

One thing that's always been a part of my journey is the need to research and gather different puzzle pieces, using my coding knowledge to piece together solutions for a wide range of problems.

But here's the thing: I've realized that there are many business entrepreneurs and non-technical folks out there who don't have coding skills but often find themselves in similar situations.

So, what makes Unbouncehacks/Unbouncetips special? Well, it's not just a collection of scattered information. I've put together complete end-to-end solutions for the very problems I've encountered and that you might face in the future.

Plus, I keep this website updated with fresh tips and suggestions that have helped me excel in design and email marketing over the years. So, you're in for a treat with a treasure trove of knowledge! 🚀

Share:

Facebook
LinkedIn
Twitter
Skype
WhatsApp

Most Popular

Follow Us

Categories

Doing the best for email marketing? Still your domain can be black listed if you hit a spam trap, once.


Verify your contacts for FREE and make sure there are no spam traps or invalid emails. 

Read More

Related Posts

― Receive the latest articles
Subscribe To Our Newsletter

Get notified about new articles