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

    Customizations on User-Contributed Drop-down widget

    Asked by SunbridgeInstitute on December 07, 2015 at 12:59 PM

    On the form below you'll see that I've set up a User-Contributed Drop-Down widget, because I need the users to be able to add options.

    The problems I'm having are these: 

    -The field's color, size, and shape is not matching the rest of my design. Can I change this?

    -I'd like to add some helper text; either a hover, or anything really, to tell people that they can start typing the name of their school to select it, and also that they can add their school's name if they do not see it on the list.

    Thank you for any help you can give!

    Page URL:
    http://www.jotform.com//?formID=53405265538962

    widget styling user contributed widget
  • Profile Image

    Answered by victor on December 07, 2015 at 01:33 PM

    You may adjust any widget by adding CSS code. You may add the following code to adjust the sie of the text and background to this field:

    select#user-option-list{

      background-color: #7a7676;

      font-size: 18px;

      width: 300px;

    }

    If you require further assistance, please let us now and we will be glad to help.

  • Profile Image

    Answered by victor on December 07, 2015 at 01:35 PM

    I forgot to mention that you might require to modify the width of the field. If not, you drop down field might get cut off. You can adjust this in the properties of the field

    Hope this helps.

  • Profile Image

    Answered by SunbridgeInstitute on December 07, 2015 at 02:13 PM

    This is great. Thank you so much. I'm still having a little bit of trouble with it. There seems to be a white shadow around the edges of the field which I would like to eliminate, and the length of the field is not matching the rest of my form.

    Also, is there a way to add some helper text so I can tell people that they can add a school at the bottom if theirs is not listed?

    Thank you so much!

  • Profile Image
    JotForm Support

    Answered by Kevin_G on December 07, 2015 at 04:34 PM

    Hi,

    To get rid of the shadow around the select, paste this CSS code on the widget : 

    input[type=text], input[type=button], select, textarea{

         border: 0px solid transparent;

         -webkit-box-shadow: inset 0 2px 6px transparent; 

     box-shadow: inset 0 2px 6px transparent;

        -moz-border-radius: 0px;

        -webkit-border-radius: 0px;

        border-radius: 0px;

    }

    To display the field as the same width than other fields change the width from 300px to 100% :

    And change the width of the element to 329px

    And in order to add an instruction to say the user to add at the bottom if their is not listed, just add this CSS code on the Designer, you can also customize it if you want  : 

    #id_136:hover:after{

        content: "Add your school at the bottom if is not listed";

        margin-left: 5%;

        width: 50%;

        color: orange;

        position: absolute;

      }

    You can take a look to my sample form here, you can also clone it if you want : 

    https://form.jotform.com/53405884996977?

    Hope this helps.

    Let us know if you nee more help, we will be more than glad to assist you.

    Regards.

  • Profile Image

    Answered by SunbridgeInstitute on December 08, 2015 at 11:04 AM

    Hm! For some reason mine is not working the way yours did on the sample form, and unfortunately I can't clone yours because I have made other modifications.

    I added in the code that you suggested, and changed the other settings as you said.

    Can you take a look to see what I did wrong? The hover text is not working, and the width of the field is not matching the other fields.

    Thank you!

  • Profile Image
    JotForm Support

    Answered by Mike on December 08, 2015 at 12:52 PM

    I have applied Kevin's CSS and it seems to be working fine. Please re-check the form now.

  • Profile Image

    Answered by SunbridgeInstitute on December 09, 2015 at 10:35 AM

    I rechecked and it is the same on my end. Is there something else that I can do to re-apply it?

  • Profile Image
    JotForm Support

    Answered by Charlie on December 09, 2015 at 01:52 PM

    May we know which form you are working on? I checked this one: http://www.jotformpro.com/form/53405265538962. But the User Contributed Dropdown widget is not there. Instead, you are using a default drop down field.

     

    I see there are two forms in your account titled "Balance in Teaching Conference", the other one is a draft. Please provide us the working form you have. If you have deleted or change a field, the form IDs might also changed, which will make the custom CSS code won't work anymore.

    We'll wait for your response.

  • Profile Image

    Answered by SunbridgeInstitute on December 09, 2015 at 01:56 PM

    Sorry--in the meantime I ran into a bug with this widget and the "Preview Answers" widget which was preventing my users from submitting their forms. So I had to change it since this is a live form. You can close this ticket, since I can't use this widget on my form right now. Sorry for the confusion.

  • Profile Image

    Answered by victor on December 09, 2015 at 02:04 PM

    Hi, I was reviewing your form, to modify the size of the widget size and color you may use the following CSS code:

    select#user-option-list{

      background-color: #7a7676;

      font-size: 14px;

      width: 329px;

    }

    input[type=text], input[type=button], select, textarea{

      border: 0px solid transparent;

      -webkit-box-shadow: inset 0 2px 6px transparent;

      box-shadow: inset 0 2px 6px transparent;

      -moz-border-radius: 0px;

      -webkit-border-radius: 0px;

      border-radius: 0px;

    }

    In the designer you can inject the following CSS code to add a hint when you hover over the field

    #id_136:hover:after {

        content : "Add your school at the bottom if not listed";

        margin-left : 5%;

        color : orange;

        position : absolute;

    }

    I hope this code help you use this widget. If you require more information or assistance, please let us know. We will be glad to help.

  • Profile Image

    Answered by SunbridgeInstitute on December 15, 2015 at 10:20 AM

    This is still not working for me. I have another idea--is there any way to change the wording "Add Option" so that it says "OTHER--Add Option here"

    Please let me know if this is possible. If not, then I would really like to get the hover text working. Thank you!

  • Profile Image
    JotForm Support

    Answered by Mike on December 15, 2015 at 11:47 AM

    Unfortunately, there is no way to change the 'Add option' text.

    You may also consider using an Auto Complete widget field. Users will be able to select existing items or add their own custom answers.

    You can also add a Hover Text for that field.

  • Profile Image

    Answered by SunbridgeInstitute on December 15, 2015 at 01:01 PM

    This is a FANTASTIC idea; thank you! This resolves all the issues I was having!

  • Profile Image

    Answered by victor on December 15, 2015 at 01:14 PM

    On behalf of my colleague, you are welcome. If you have any additional question or issue, please do not hesitate contacting us. We will be glad to assist.