What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by roel_heerema on June 28, 2016 at 08:20 AM

    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?

     

    Page URL:
    http://www.roelandenpiet.nl/catering/test-bestelformulier

    quick fields date and time JotForm source uploads
  • Profile Image
    JotForm Support

    Answered by Boris on June 28, 2016 at 09:39 AM

    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.

  • Profile Image

    Answered by roel_heerema on June 28, 2016 at 11:28 AM

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

    <<   <   Vandaag   >   >>

    Could you assist me also for this matter?

  • Profile Image

    Answered by victor on June 28, 2016 at 12:16 PM

    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.

     

  • Profile Image

    Answered by roel_heerema on June 29, 2016 at 02:45 AM

    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.

  • Profile Image
    JotForm Support

    Answered by beril on June 29, 2016 at 03:43 AM

    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.