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

    How can I remove or change the background and borders in the Visual Multi-select widget?

    Asked by transpay on October 02, 2015 at 04:23 PM
    One final question, do you know how I can make this field look consistent with the rest of the fields? (ie: no background color, white borders, etc? )
    background border multiselect widget
  • Profile Image
    JotForm Support

    Answered by Welvin on October 02, 2015 at 04:38 PM

    You're referring to the widget colors, right?  IF yes, you can inject the following custom CSS codes in the Widget CSS area:

    .Default .custom-header {

        border: 1px solid #FFFFFF;

        background: none;

    }

    .Default .ms-container .ms-selectable li.ms-elem-selectable, .Default .ms-container .ms-selection li.ms-elem-selection {

        background: none;

        border-bottom: 1px solid #FFFFFF;

    }

    .Default .ms-container .ms-list {

        border: 1px solid #FFFFFF;

    }

    This will remove the background of the widget and change the border to white.

    Thanks

  • Profile Image

    Answered by transpay on October 04, 2015 at 07:08 PM

    Thanks but would you happen to be able to tell me how I can make this change directly from the code? I've already done a ton of coding adjustments to the exported html files so it would be really helpful if I didn't have to reexport everything and make my changes all over again...

    Really appreciate your help.

  • Profile Image

    Answered by transpay on October 04, 2015 at 07:29 PM

    And also,

    would you guys know how I can make the scroll go slower? I have a lot of selection options on my list and it would help if the scroll moved slower.
  • Profile Image

    Answered by transpay on October 04, 2015 at 07:52 PM

    Okay so it seems like despite having re-exported the entire code and reconfiguring the code that the multi-selector still continues to appear exactly as it did originally. http://pi.transpay.global/l/77232/2015-10-04/j3lgm 

    This is despite the fact that it appears correctly in jotform: http://form.jotform.us/form/52676782070158

    To see the multi-selector field, click "Begin" and then select "B2B Payout Services" from the first question.

  • Profile Image

    Answered by transpay on October 04, 2015 at 07:54 PM

    Here's the code: http://pastebin.com/JhYDLdWs

  • Profile Image
    JotForm Support

    Answered by mert on October 05, 2015 at 04:54 AM

    Hi there,

    In your code, the widget's settings located in between the lines 945 and 949. 

     

    Below, you will find the my colleague Welvin's modified widget code, you can copy and paste it on the same lines.

     

    <div class="widget-inputs-wrapper">

                  <input id="input_1" class="form-hidden  form-widget" type="hidden" name="q1_clickTo" value="" />

                  <input id="widget_settings_1" class="form-hidden form-widget-settings" type="hidden" value="%5B%7B%22name%22%3A%22lists%22%2C%22value%22%3A%22Option%201%5CnOption%202%5CnOption%203%5CnOption%204%22%7D%2C%7B%22name%22%3A%22theme%22%2C%22value%22%3A%22Default%22%7D%2C%7B%22name%22%3A%22selectedItems%22%2C%22value%22%3A%22Selected%22%7D%2C%7B%22name%22%3A%22selectableItems%22%2C%22value%22%3A%22Options%22%7D%2C%7B%22name%22%3A%22keepOrder%22%2C%22value%22%3A%22false%22%7D%2C%7B%22name%22%3A%22customCSS%22%2C%22value%22%3A%22.Default%20.custom-header%20%7B%5Cn%5Cn%20%20%20%20border%3A%201px%20solid%20%23FFFFFF%3B%5Cn%5Cn%20%20%20%20background%3A%20none%3B%5Cn%5Cn%7D%5Cn%5Cn.Default%20.ms-container%20.ms-selectable%20li.ms-elem-selectable%2C%20.Default%20.ms-container%20.ms-selection%20li.ms-elem-selection%20%7B%5Cn%5Cn%20%20%20%20background%3A%20none%3B%5Cn%5Cn%20%20%20%20border-bottom%3A%201px%20solid%20%23FFFFFF%3B%5Cn%5Cn%7D%5Cn%5Cn.Default%20.ms-container%20.ms-list%20%7B%5Cn%5Cn%20%20%20%20border%3A%201px%20solid%20%23FFFFFF%3B%5Cn%5Cn%7D%22%7D%5D" data-version="2" />

    </div>

     

    Without re-embedding anything, you can try this method.

    Please let us know about the final state of the issue.

    Have a nice day.

  • Profile Image
    JotForm Support

    Answered by mert on October 05, 2015 at 05:01 AM

    Also, you can access your other question's answer about slower scrolling from the link below:

    http://support.jotform.com/answers/676262

  • Profile Image

    Answered by transpay on October 05, 2015 at 06:47 PM
    I tried responding but when I clicked submit my entry went away (this happened twice.) Unfortunately, your suggestion didn’t work since now the field doesn’t show at all. http://pi.transpay.global/l/77232/2015-10-04/j3lgm
    Christina Wu
    Director of Marketing
    P 212.994.0345 ext. 5181
    E christina.wu@transpay.global
    www.transpay.global
    [CREATOR: gd-jpeg v1.0 (using IJG JPEG v62), quality = 100]
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on October 06, 2015 at 12:06 AM

    Hi,

     

    Can you try to use this code instead and see if it will work?

    <div class="widget-inputs-wrapper">

          <input id="input_71" class="form-hidden  form-widget" type="hidden" name="q71_payoutCountries" value="" />

          <input id="widget_settings_71" class="form-hidden form-widget-settings" type="hidden" value="%5B%7B%22name%22%3A%22lists%22%2C%22value%22%3A%22Afghanistan%5CnAland%20Islands%5CnAlbania%5CnAlgeria%5CnAmerican%20Samoa%5CnAndorra%5CnAngola%5CnAnguilla%5CnAntarctica%5CnAntigua%20and%20Barbuda%5CnArgentina%5CnArmenia%5CnAruba%5CnAustralia%5CnAustria%5CnAzerbaijan%5CnBahamas%5CnBahrain%5CnBangladesh%5CnBarbados%5CnBelarus%5CnBelgium%5CnBelize%5CnBenin%5CnBermuda%5CnBhutan%5CnBolivia%5CnBosnia%20and%20Herzegovina%5CnBotswana%5CnBouvet%20Island%5CnBrazil%5CnBritish%20Indian%20Ocean%20Territory%5CnBrunei%20Darussalam%5CnBulgaria%5CnBurkina%20Faso%5CnBurundi%5CnCambodia%5CnCameroon%5CnCanada%5CnCape%20Verde%5CnCaribbean%20Netherlands%20%5CnCayman%20Islands%5CnCentral%20African%20Republic%5CnChad%5CnChile%5CnChina%5CnChristmas%20Island%5CnCocos%20(Keeling)%20Islands%5CnColombia%5CnComoros%5CnCongo%5CnCongo%2C%20Democratic%20Republic%20of%5CnCook%20Islands%5CnCosta%20Rica%5CnC%C3%B4te%20d'Ivoire%5CnCroatia%5CnCuba%5CnCura%C3%A7ao%5CnCyprus%5CnCzech%20Republic%5CnDenmark%5CnDjibouti%5CnDominica%5CnDominican%20Republic%5CnEcuador%5CnEgypt%5CnEl%20Salvador%5CnEquatorial%20Guinea%5CnEritrea%5CnEstonia%5CnEthiopia%5CnFalkland%20Islands%5CnFaroe%20Islands%5CnFiji%5CnFinland%5CnFrance%5CnFrench%20Guiana%5CnFrench%20Polynesia%5CnFrench%20Southern%20Territories%5CnGabon%5CnGambia%5CnGeorgia%5CnGermany%5CnGhana%5CnGibraltar%5CnGreece%5CnGreenland%5CnGrenada%5CnGuadeloupe%5CnGuam%5CnGuatemala%5CnGuernsey%5CnGuinea%5CnGuinea-Bissau%5CnGuyana%5CnHaiti%5CnHeard%20and%20McDonald%20Islands%5CnHonduras%5CnHong%20Kong%5CnHungary%5CnIceland%5CnIndia%5CnIndonesia%5CnIran%5CnIraq%5CnIreland%5CnIsle%20of%20Man%5CnIsrael%5CnItaly%5CnJamaica%5CnJapan%5CnJersey%5CnJordan%5CnKazakhstan%5CnKenya%5CnKiribati%5CnKuwait%5CnKyrgyzstan%5CnLao%20People's%20Democratic%20Republic%5CnLatvia%5CnLebanon%5CnLesotho%5CnLiberia%5CnLibya%5CnLiechtenstein%5CnLithuania%5CnLuxembourg%5CnMacau%5CnMacedonia%5CnMadagascar%5CnMalawi%5CnMalaysia%5CnMaldives%5CnMali%5CnMalta%5CnMarshall%20Islands%5CnMartinique%5CnMauritania%5CnMauritius%5CnMayotte%5CnMexico%5CnMicronesia%2C%20Federated%20States%20of%5CnMoldova%5CnMonaco%5CnMongolia%5CnMontenegro%5CnMontserrat%5CnMorocco%5CnMozambique%5CnMyanmar%5CnNamibia%5CnNauru%5CnNepal%5CnNew%20Caledonia%5CnNew%20Zealand%5CnNicaragua%5CnNiger%5CnNigeria%5CnNiue%5CnNorfolk%20Island%5CnNorth%20Korea%5CnNorthern%20Mariana%20Islands%5CnNorway%5CnOman%5CnPakistan%5CnPalau%5CnPalestine%2C%20State%20of%5CnPanama%5CnPapua%20New%20Guinea%5CnParaguay%5CnPeru%5CnPhilippines%5CnPitcairn%5CnPoland%5CnPortugal%5CnPuerto%20Rico%5CnQatar%5CnR%C3%A9union%5CnRomania%5CnRussian%20Federation%5CnRwanda%5CnSaint%20Barth%C3%A9lemy%5CnSaint%20Helena%5CnSaint%20Kitts%20and%20Nevis%5CnSaint%20Lucia%5CnSaint%20Vincent%20and%20the%20Grenadines%5CnSamoa%5CnSan%20Marino%5CnSao%20Tome%20and%20Principe%5CnSaudi%20Arabia%5CnSenegal%5CnSerbia%5CnSeychelles%5CnSierra%20Leone%5CnSingapore%5CnSlovakia%5CnSlovenia%5CnSolomon%20Islands%5CnSomalia%5CnSouth%20Africa%5CnSouth%20Georgia%20and%20the%20South%20Sandwich%20Islands%5CnSouth%20Korea%5CnSouth%20Sudan%5CnSpain%5CnSri%20Lanka%5CnSt.%20Pierre%20and%20Miquelon%5CnSudan%5CnSuriname%5CnSvalbard%20and%20Jan%20Mayen%20Islands%5CnSwaziland%5CnSweden%5CnSwitzerland%5CnSyria%5CnTaiwan%5CnTajikistan%5CnTanzania%5CnThailand%5CnThe%20Netherlands%5CnTimor-Leste%5CnTogo%5CnTokelau%5CnTonga%5CnTrinidad%20and%20Tobago%5CnTunisia%5CnTurkey%5CnTurkmenistan%5CnTurks%20and%20Caicos%20Islands%5CnTuvalu%5CnUganda%5CnUkraine%5CnUnited%20Arab%20Emirates%5CnUnited%20Kingdom%5CnUnited%20States%5CnUnited%20States%20Minor%20Outlying%20Islands%5CnUruguay%5CnUzbekistan%5CnVanuatu%5CnVatican%5CnVenezuela%5CnVietnam%5CnVirgin%20Islands%5CnWallis%20and%20Futuna%20Islands%5CnWestern%20Sahara%5CnYemen%5CnZambia%5CnZimbabwe%22%7D%2C%7B%22name%22%3A%22theme%22%2C%22value%22%3A%22Default%22%7D%2C%7B%22name%22%3A%22selectedItems%22%2C%22value%22%3A%22Your%20Payout%20Countries%22%7D%2C%7B%22name%22%3A%22selectableItems%22%2C%22value%22%3A%22Select%20Your%20Payout%20Countries%22%7D%2C%7B%22name%22%3A%22keepOrder%22%2C%22value%22%3A%22false%22%7D%2C%7B%22name%22%3A%22customCSS%22%2C%22value%22%3A%22.Default%20.custom-header%20%7B%5Cn%5Cn%20%20%20%20border%3A%201px%20solid%20%23FFFFFF%3B%5Cn%5Cn%20%20%20%20background%3A%20none%3B%5Cn%5Cn%7D%5Cn%5Cn.Default%20.ms-container%20.ms-selectable%20li.ms-elem-selectable%2C%20.Default%20.ms-container%20.ms-selection%20li.ms-elem-selection%20%7B%5Cn%5Cn%20%20%20%20background%3A%20none%3B%5Cn%5Cn%20%20%20%20border-bottom%3A%201px%20solid%20%23FFFFFF%3B%5Cn%5Cn%7D%5Cn%5Cn.Default%20.ms-container%20.ms-list%20%7B%5Cn%5Cn%20%20%20%20border%3A%201px%20solid%20%23FFFFFF%3B%5Cn%5Cn%7D%22%7D%5D" data-version="2" />

    </div>

     

    Do let us know if you need further assistance.
    Regards.