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

    asmSelect Widget: Allow to customize or edit the "Please select" text hint

    Asked by Benflips on July 17, 2016 at 09:57 PM
    I’m trying to decide between this (multiple select widget) and the asm widget (which you’ll notice I've inserted below it). Some questions to help me decide:
    Is it possible to change the ‘hint text’ from ‘Please Select’ in the asm widget? 
    Can you change the colors and background of selected options in asm to look like the selected options from multiple selection widget? - the white on blue looks striking, is more aesthetically pleasing, and really stands out, but I don't feel that the widget itself is as user-friendly and intuitive as asm widget (because with asm the "please select dropdown" remains and the options populate below it rather than crossways within the field itself).
  • Profile Image
    JotForm Support

    Answered by ashwin_d on July 18, 2016 at 03:28 AM

    Hello Benflips,

    Is it possible to change the ‘hint text’ from ‘Please Select’ in the asm widget? 

    Please inject the following custom css code and that should solve your problem:

    select#bsmSelectbsmContainer0:first-child {

        display: none;

    }

     

    Can you change the colors and background of selected options in asm to look like the selected options from multiple selection widget?

    Yes it is possible to achieve this by injecting following custom css code in form:

    .bsmListItem {

        text-shadow: 0 1px 0 rgba(0,51,83,.3) !important;

        -webkit-border-radius: 3px !important;

        -moz-border-radius: 3px !important;

        border-radius: 3px !important;

        background-color: #1b9dec !important;

        background-image: -moz-linear-gradient(top,#1da7ee,#178ee9) !important;

        background-image: -webkit-gradient(linear,0 0,0 100%,from(#1da7ee),to(#178ee9)) !important;

        background-image: -webkit-linear-gradient(top,#1da7ee,#178ee9) !important;

        background-image: -o-linear-gradient(top,#1da7ee,#178ee9) !important;

        background-image: linear-gradient(to bottom,#1da7ee,#178ee9) !important;

        background-repeat: repeat-x !important;

        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1da7ee', endColorstr='#ff178ee9', GradientType=0) !important;

        -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.03) !important;

        box-shadow: 0 1px 0 rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.03) !important;

    color: #fff !important;

        border: 1px solid #00578d !important;

    }

    Please check the screenshot below how to inject custom css code in ASM widget:

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by Benflips on July 18, 2016 at 07:45 AM
    To your first advice - what does this code achieve? I want to know whether
    you can change the text to anything different or not...it seems your code
    ...
  • Profile Image
    JotForm Support

    Answered by Charlie on July 18, 2016 at 10:22 AM

    I'm sorry, but you cannot change the "Please select" text in the asmSelect widget. It should be possible using CSS code to somehow hide the "Please select" in the list which is what my colleague's first code should be doing, however, it seems like it is not working.

    The second code block given by my colleague redesigns the style of the selected options, you should be seeing it like this:

    I'll forward this to our developers as a feature request to allow users to make the "Please select" hint more editable. I'll also try to come up a working CSS code for it. 

    Apologies for the inconvenience.

  • Profile Image

    Answered by Benflips on July 18, 2016 at 07:20 PM
    It appears my earlier response was truncated.
     
    It continued...
     
    "To your second herculean effort - thank you.
     
    However, I've noticed a couple of issues - I've just experimented with the first asm in my form - input 314.
     
    First, on this particular asm, I already have some custom code; if I delete that code, your code works great - but it changes the size of the field that has been customized. I wasn't sure which of the code was otherwise conflicting with yours, so I put it back - can you tell me what needs to change or be deleted? I have at least one other asm in the form at the moment that I will likely be applying this code to, so if they have custom code I need to know what the conflicts are likely to be there too. I am also likely to replace most of my multiple selections widgets and there are quite a few of them throughout the form...so if width or other aspects need to be controlled from within the widget (as opposed to general form css) I need to know how to do this.
     
    As for your changes themselves - wow. Looks great. However the delete button retains it's red colour, compared to the white of the mutiple select widget. Can this be changed?
     
    Also, on this first input_314, can you identify why if the first choice is selected ("More than once / week") it initially wraps to a second line, then changes back to one line, BUT the spacing of the line remains as though it needs 2 lines? Every other answer, just populates to one line...any thoughts would be appreciated."
     
    Just wondering if you could address these aspects so I can roll out the code across my form.
     
    Thank you
  • Profile Image
    JotForm Support

    Answered by Chriistian on July 18, 2016 at 10:57 PM

    First, on this particular asm, I already have some custom code; if I delete that code, your code works great - but it changes the size of the field that has been customized. I wasn't sure which of the code was otherwise conflicting with yours, so I put it back - can you tell me what needs to change or be deleted?

    I checked the code that you have added and the code provided by my colleague, and they seem to be different classes so they should not conflict with the other. I do not seem to notice any changes other than the color of the option. Can you please send us a screenshot of the issue you are referring to so we may check it further. Thank you.

    As for your changes themselves - wow. Looks great. However the delete button retains it's red colour, compared to the white of the mutiple select widget. Can this be changed?

    The css code below should change the color of the button to white.

    a.bsmListItemRemove {

        color: #ffffff;

     

    }

    Also, on this first input_314, can you identify why if the first choice is selected ("More than once / week") it initially wraps to a second line, then changes back to one line, BUT the spacing of the line remains as though it needs 2 lines? Every other answer, just populates to one line...any thoughts would be appreciated."

    The 2 line text is modified using custom script, which is why it automatically adjusts to only one line after. Unfortunately we will not be able to edit this. However, what we can do is to modify the height of the first selection so that it will always have the spacing of one line. Simply inject the css to the widget's css area.

    li.bsmListItem:first-child {

        height: 25px!important;

     

    }

  • Profile Image

    Answered by Benflips on July 18, 2016 at 11:26 PM

    Okay, so if i make your changes to a 'clean' asm widget it works great (see first screenshot).

    If I apply it to the one described above, the white cross has taken effect, but the other colour changes have not. (see second screenshot)

    If I remove the other custom css that is currently in that widget, the colours DO change, but it alters the width of the label (I'm not sure if that original code does anthing else?)

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on July 19, 2016 at 01:20 AM

    Thank you for sending the screenshots. After further checking, I was able to identify that the issue was being caused by an extra RBRACE } in the css. Once this extra brace is removed, the changes to the color should now apply without the width of the field being affected.

    .bsmContainer:after {

        content: " You can choose more than one option! ";

        color: #333;

        position: relative;

        font-size: 12px;

        display: block;

    }

    #bsmSelectbsmContainer0 { width: 100%; }
    }      <-delete this extra brace in the css                 

    Result: 

     

  • Profile Image

    Answered by Benflips on July 19, 2016 at 02:45 AM
    Thank you!
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image
    JotForm Support

    Answered by Nik_C on July 19, 2016 at 03:56 AM

    On behalf of my colleague you're welcome.

    If you have any further questions please let us know.

    Cheers!

  • Profile Image

    Answered by forusretail on September 27, 2016 at 03:52 PM

    Is it possible now to change the hint text in the asmSelect widget? I want lo change that "Please Select" for something else.

    Cheers

  • Profile Image
    JotForm Support

    Answered by Nik_C on September 27, 2016 at 05:49 PM

    @forusretail 

    I opened a separate thread for you and you can find it here. We will attend it there. Please open individual thread for each question so we avoid confusion.

    Thank you!