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

    Is it possible to customize widgets like Dynamic Dropdowns?

    Asked by Comino on March 03, 2015 at 10:31 AM

     

    I have a bit of a problem: when trying to integrate form widgets (such as ‘dynamic drop down’  and ‘terms and conditions’ check boxes) I can’t change the design. I can’t alter either breadth and height of text lines nor  can I adjust background, font size or font type. CSS is not visible. What am I doing wrong, Is there any secret way to make these adjustments?

     

    Thanks very much for your help and best regards

    Arianna

     

    style size dynamic drop down CSS widgets CSS
  • Profile Image

    Answered by Ben on March 03, 2015 at 11:53 AM

    Some widgets is possible to style Arianna. Usually they can be styled over custom CSS field shown in their wizard, but some can be modified by the CSS injected into the jotform as well, depending on the widget.

    There are however some widgets that can not be styled at all, but our team working on widgets is looking to change this into being much more user friendly, but I can not say much more than that.

    Now I presume that you meant Dynamic Dropdowns widget

    . It is possible to style it over custom CSS field in the wizard

    * You get to wizard by clicking on the widget and then clicking on the wand like icon in the quick action panel/bar:

    There are however 2 terms of use widgets so I would like to ask you more details about what you want to achieve with each widget and to give us a link to the jotform and we would be happy to assist with both of them.

  • Profile Image

    Answered by Comino on March 03, 2015 at 12:54 PM

    Hello Ben and thx for your answer. I'll try to explain in english and hope you will understand :-). I am trying to create a form to order different lessons. To realize this i am using yr widget dynamic dropdown (widget 1...see attached screenshot). I didn't find a way to customize the font size. As you can see the widget is not using the same font size and color as the form.

    Same thing using widget 2 = agreement to terms & conditions including the link to the terms. I would like to change the size and color of the text and customize the "REQUIRED" in german and in a different style.
    I downloaded the css code but could not finde where to change these settings. Thank you very much for your help again Ben!http://form.jotformeu.com/form/50531365655354

     

  • Profile Image

    Answered by Ben on March 03, 2015 at 01:14 PM

    OK, thank you for the link. I see now.

    The first widget is indeed Dynamic Dropdowns widget.

    The second one is Terms & Conditions widget

    Now I will first like to mention that your jotform has the fields in German, while being set as English form. I am only mentioning this since you could have some issues because of it later on as you must properly set the language used.

    I would suggest taking a look at this guide to see how to properly translate the text: How to make your forms multilingual?

    This will also help you with the Required text on your widget.

    Now since we can only have one issue / question per thread I have moved your other question about the Terms & Conditions widget to a new thread here: http://www.jotform.com/answers/526195 and we will be answering it shortly.

    In regards to the Dynamic Dropdowns widget (and terms) we can not change them through the Form Designer at this time.

    We must manually add the CSS code to their custom CSS field.

    If you can tell us the color and the font size we can give you the sample for the Dropdowns.

  • Profile Image

    Answered by Comino on March 03, 2015 at 01:43 PM

    hello again Ben and thank you for your support!!!! The text color is: #323c52 or r 50 g 60 b 82, font = arial, size 11 pt

    I will try tomorrow to make the form multilingual. Thank you a lot Ben :-)

  • Profile Image

    Answered by Ben on March 03, 2015 at 02:06 PM

    You are welcome.

    OK, based on that this would be the code:

    div#dropdownsContainer > select {
        color: #323c52;
        font-family: Arial;
        font-size: 11pt;
    }

    Now to add the code, you should open the wizard of the dynamic dropdowns by clicking on the Wand like icon.

    Once you do you will see the wizard and you should scroll down to Custom CSS field

    One you add the code to this field just click on finish and it will make the change for you.

    Now each time you decide to change it you can find it in this section and change it.

    Do let us know if you have any questions in regards to this and we would be happy to assist :)

  • Profile Image

    Answered by Comino on March 04, 2015 at 12:39 AM

    it works perfectly! Thank you very, very much for your great support Ben!

  • Profile Image

    Answered by Shadae on March 04, 2015 at 07:45 AM

    Hi Comino,

    On behalf of my colleague, you are most welcome. We are happy that we were able to assist you in getting your desired result.

    Please feel free to contact us if you need further assistance.

    Thank you.