Support Hotline
Monday to Friday 9am to 6pm CET
(Standard national / international calling rates apply)
Help and Support Center
Ask us: SEARCH
Knowledgebase: Form
Can I add a Datepicker to my contact form?
Posted by Diana Rosca on 25 January 2013 12:35 PM


A Datepicker plug-in is in fact available at the Sitebuilder level and can be inserted, customized and labeled easily in just a few clicks.

Please follow the instructions below to add a Datepicker to a contact form and customize it:

1. Inserting the Datepicker:

To insert a Datepicker, please proceed as follows:

- Edit your Website and select the Webpage, which contains to contact form the Datepicker will be added to, from the “Site Structure” menu [a]


- Go to the “Insert” ribbon [b], click on “Form” [c], then on “Form Item[d] and select “Date Field” [e]

At this point, the Datepicker will get inserted into the Webpage; you can then customize it as detailed below:

2. Labeling the Datepicker:

To be able to process easily the submitted data through the contact form, it’s necessary that every single field of the contact form, including the DatePicker, gets labeled.

You can for instance add to a contact form two Datepickers, one for the arrival date and one for the departure date. If the Datepickers are labeled, the arrival date can be easily distinguished from the departure date.

To add a label to the Datepicker:

- Left-click on the Datepicker to edit it [a]


- At the “Format” ribbon level [b], enter a name/label for the Datepicker in the “Form Field Name” field [c]


3. Choosing a Date Format:

If you click on “Single-Line Field” [a] under “Form Field Name” field, you’ll access the Datepicker Settings and you can customize the Date Format [b] as well as setting the Datepicker as a Required Field [c]

4. Resizing the DatePicker:

The Datepicker can be resized as any other form item by:

- Clicking on the Datepicker to edit it [a]

- Clicking on the left or right margin and dragging in and out without releasing the mouse left-button [b]

5. Repositioning the Datepicker:

To reposition the Datepicker:

- Click on the up or down margin of the Datepicker field [a]

- Without releasing the mouse left-button, drag the Datepicker  to the suitable position [b]

(2 votes)
This article was helpful
This article was not helpful

Comments (0)
Post a new comment 
Full Name: