The purpose of this article is to create a simple-to-follow guide to allow you to add a Datepicker widget into your Eloqua Landing pages.

 

The end result will look something like this:

I’m aiming this guide to be as simple as possible as I know that some people are not familiar with HTML at all. Hopefully with this step by step guide it’ll be made easy & worry free.

 

 

So if we make our basic form in Eloqua with email & a custom text field for date:

(Make sure you also set the HTML name of your date field to ‘date’ (all lower case))

We view HTML of the form by going to Actions > view Form HTML, & copying all of it from the form onto the clipboard.

 

We now create a new HTML Landing page, which will look like this:

<!DOCTYPE html>

<html>

  <head>  </head>

  <body>   

<-—form HTML goes here -->

  </body>

</html>

 

Paste the whole of your form code in between the body tags (as specified above).

 

You can now view your Landing page & it will just have the basic form on a white page.

For visual sake,  we’re now going to tidy it up to make it a bit neater.

On your Landing page scroll up in the code to find the closing </style> tag.

Just before it we add the following.

div{ width:300px; margin:0px auto;}

input{ border-radius:5px}

This sets the width to a more reasonable size & centralises the form.

The second line just softens the corners of the input boxes (it may add a shadow as well, depending on your browser).

 

Now we get to the meat of the tutorial: Adding the JQueryUI script onto the page to get the plugin working.

 

So essentially we need two script files added: the JQuery main JavaScript library & the JQueryUI script that will handle the datepicker widget.

We’ll also need to add the JQueryUI css file to handle the graphical element, - but worry not, I’m here to guide you through it....

 

So there’s two ways you can do this.

  1. Use the Google CDN versions that are available here: https://developers.google.com/speed/libraries/
  2. You can retrieve the raw files from http://jqueryui.com/ and https://jquery.com/ and you can host these files in your own instance’s file storage for personal use.

The first solution is much simpler & serves up the files pretty swiftly, however you are of course relying on Google for the files, and in some situations you might prefer to host the files so that you are totally self-reliant.

I personally have had no issue with the google served versions, so I will be stepping through that solution here.

From the google developers libraries you retrieve the JQuery .js file and the 2 JQueryUI files – the .js & .css one. They will look similar to the below.

 

JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

JQueryUI

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

 

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

 

So now you have these files, you’re going to insert them into your HTML, right before the closing </head> tag like this:

 

Now we’re nearly set.

 

Remember when I said to set the HTML name of your date field to ‘date’? Well that just makes it a bit easier to locate, and as now you need to find it, the easiest way is to do this is to perform a CTRL+F find on ‘name=”date”.

This will seek out the <input field in question. It will have a value id=”field1” or something similar & we are going to alter it to say id=”datepicker”

 

Your revised input should now say something similar to
<input id="datepicker" name="date" type="text" value="" class="field-size-top-large" />

 

OK, - last step.

So back in your HTML, again, just before the closing </head> tag you’re going to add this snippet:

 

<script>

  $( function() {

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

  } );

</script>

 

And that’s it! – save your file and go and try your new datepicker widget.

 

Good Luck!