Is it possible to customize widgets like Dynamic Dropdowns?

  • Comino
    Asked on March 3, 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

     

  • Ben
    Replied on March 3, 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:

    Is it possible to customize widgets like Dynamic Dropdowns? Image 1 Screenshot 20

    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.

  • Comino
    Replied on March 3, 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

    Is it possible to customize widgets like Dynamic Dropdowns? Image 1 Screenshot 20

     

  • Ben
    Replied on March 3, 2015 at 1: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.

  • Comino
    Replied on March 3, 2015 at 1: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 :-)

  • Ben
    Replied on March 3, 2015 at 2: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.

    Is it possible to customize widgets like Dynamic Dropdowns? Image 1 Screenshot 30

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

    Is it possible to customize widgets like Dynamic Dropdowns? Image 2 Screenshot 41

    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 :)

  • Comino
    Replied on March 4, 2015 at 12:39 AM

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