DateTime calendar popup looks bad when form is embedded as source code

When I use the 'Datum tijd' widget from the Quick Fields in my form (formID=61612588526360) I get a nice pop-up calendar. But when I use this date and time picker in my Full Source Code in my form (I do this for another reason - nothing to do with this date-time picker) on my website (http://www.roelandenpiet.nl/catering/test-bestelformulier/) the calendar pop-up is not so nice. Can you please explain this to me?

When using the source code of your form, you are adding the HTML of your form directly into your own website. This means that styles of your existing website and styles of your form are existing on the same level, and they can interfere with one another.

The same goes for scripts - by using the source code of the form, the scripts within the form can conflict with scripts on the website.

Most specifically in your case, the following CSS style from your website is causing the issue with calendar popup:

.button {
    border-radius: 4px;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
    border: medium none;
    padding: 5px 18px 6px;
    font-size: 14px;
    color: #FFF !important;
    display: inline-block;
    cursor: pointer;
}

It is found in the following stylesheet of your site:

https://assets.jimstatic.com/web.css.44c8c6674f6a48f6a0bbba65a4351cce.css

The buttons of calendar popup should be displayed as "table-cell", and not "inline-block". To remedy the situation, you may want to add the following line of CSS code into your form, or into your website. It will correctly reset the display property of the button inside calendar popup:

.calendar .button {
    display: table-cell;
}

You can add this style inside your form by following this guide:

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

If you need further assistance, please let us know.

Thanks for your reply; this worked. But how about the color of the text:

<<   <   Vandaag   >   >>

Could you assist me also for this matter?

In the same code provided by my colleague, you can add the following CSS code:

color: black !important;

This will modify the header of the calendar header

.calandar .button {

  display: table-cell;

  color: black !important;

}

As indicated by my colleague, using the source code could produce many conflicts between your form and the site. This is why we recommend using the iFrame script instead. This will eliminate any conflicts. It will also allow you to edit the form easily using Jotform. Using the source code, you will have to manually update the form yourself.

Thanks for your support! It now is again as it was before: nice calendar.

About your recommendation using the iFrame script instead: you are absolutely right: using the Source Code produces conflicts and I have to manually update the form. Unfortunately this has to do with the Payment wizard not being able to have a descriptive text to a product (also see: https://www.jotform.com/answers/857985). To make this possible it was necessary to add my own script, which will only work for a JotForm form when the JotForm form is not called within an iFrame, so I had to use the Source Code.

Of course I would rather use the form using the iFrame, but then this feature of a descriptive text has to be added by JotForm. I think by using a Payment wizard for selling goods you should be able to see more detail of the product you want to buy, either by a descriptive text, or by clicking the product and going to a page with more details or pictures of the product you want to buy. When this is implemented by JotForm I immediately will switch to the 'standard' way of using the JotForm forms by calling it by an iFrame.

First of all, on behalf of all my colleagues involved, you're kindly welcome and thank you for providing detailed information about why you're using the source code. Anyway, the most important thing is that the issue has been resolved for you by injecting CSS. =) Feel free to contact us anytime. We will be happy to assist you.