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

    Style buttons on Configurable List widget

    Asked by browningreagle on October 21, 2014 at 07:36 AM

    Is it possible to get the Add and Remove buttons to match the style/look of the Submit button?



    This is a re-post of a comment on How to Set Up the Configurable List Widget

    style widget style style button
  • Profile Image
    JotForm Support

    Answered by Charlie on October 21, 2014 at 10:03 AM

    Hi,

    Most of the Jotform widgets are being loaded from a remote address, because of that we can not use Custom CSS injections on them. In other words, we can not apply our custom CSS on the Configurable List widget. 

    Although, you can still try our new Form Designer to make changes on the surrounding environment to make it neat. 

    I hope this helps. Let us know if you need further assistance.

    Thank you.

  • Profile Image

    Answered by browningreagle on November 07, 2014 at 12:57 PM

    Do you at least know how to change the style of the Add and Remove buttons?  I've tried .mybutton, .button, .button1, .addbutton, and more, but to no effect.  If you could help me figure out how to at least get started with changing the button style, I can work with that to accomplish my goal.  I just need a basic template of code.

     

    Thanks!

  • Profile Image

    Answered by Shadae on November 07, 2014 at 02:35 PM

    Hi browningreagle,

    The CSS Code for the "Add" button in the configurable list widget it "button.add"

    Any CSS changes to the widget, would be done within the "Custom CSS" option in the widget and not within the form builder Custom CSS option.

    I hope this helps, please inform us if you need additional assistance.

  • Profile Image

    Answered by Ben on November 07, 2014 at 02:43 PM

    Hi,

    To change the style of the widget you should follow the instructions given by my colleague Shadae above and I would just like to add how to do it.

    Click on the widgets wizard button (small wand like icon in the right corner) and add code as mentioned above:

    with button.add for Add button and button.remove for remove button.

    You will need to add it to Custom CSS field:

    If you give us the ID of the jotform or a link to it, we can help you to get the design to match the one of the submit button.

    Best Regards,
    Ben

  • Profile Image

    Answered by browningreagle on November 07, 2014 at 03:07 PM

    I appreciate the help.  For now, I'm just experimenting on a "test" form so I don't mess anything up on one of the forms currently in use.

    http://form.jotform.us/form/42886612112149

    This form has the Configurable List widget, and the Submit button with the design we're currently using.  I've tried matching the style to the best of my ability, but it just doesn't seem to be coming out the way I want.  Furthermore, thanks to your advice I was able to make some headway with button.add & button.remove.  However, another problem arose where I can only change the style of either "add" or "remove".  Whenever, I have the CSS code in to change both buttons, I get a sad digital face and a message saying, "The server closed the connection without sending any data." For right now, I'm only leaving the code for button.add, so you don't have to deal with the error message.

     

    I would really appreciate any help you can offer in matching the style of the submit button, and getting both "add" & "remove" to change without error.

     

    Thanks again for your help!

     

    -Eric 

  • Profile Image

    Answered by raul on November 07, 2014 at 04:27 PM

    I've changed the CSS for both buttons in your test form.
    Please take a look at it and let us know if this works for you.

    Thanks.

  • Profile Image

    Answered by browningreagle on November 10, 2014 at 12:17 PM

    Yes, that looks great!  However, I'm still having the problem with the error message when both Add & Remove are coded.  I copied the Remove code to a Word document, then deleted it from the Configurable List's custom CSS so that I could what the button looked like.  Unfortunately, whenever I add the Remove code again, the form takes about a minute attempting to load before finally failing.

     

    I checked this in the two browsers I commonly use: Chrome, and Internet Explorer 11.  In Chrome, I get the message mentioned in my previous post, saying the server closed the connection.  In IE11, I get a message saying "the page could not be displayed", even after adding Jotform to the compatibility settings.  I'm at a loss on what to do to remedy this situation.  Do you have any ideas?

    Thanks again for your help!

  • Profile Image

    Answered by Ben on November 10, 2014 at 12:38 PM

    Hi,

    I took a look at your CSS in the jotform you have mentioned above and copy->pasted it to see what would happen on save, but I did not get any errors on it.

    I have then added the code to apply the same style on remove button, but there was no error neither on finish.

    This is the end code:

    button.add, button.remove {
    cursor: pointer;
    -moz-border-radius: .2em;
    -webkit-border-radius: .2em;
    border-radius: .2em;
    padding: 4px 18px;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0px -1px 0px #142353;
    border: 1px solid #3d4f8b;
    -moz-box-shadow: inset 0px 0px 0px 1px rgba(147, 187, 255, 0.30), 0px 2px 2px 0px rgba(0, 0, 0, 0.30);
    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(147, 187, 255, 0.30), 0px 2px 2px 0px rgba(0, 0, 0, 0.30);
    box-shadow: inset 0px 0px 0px 1px rgba(147, 187, 255, 0.30), 0px 2px 2px 0px rgba(0, 0, 0, 0.30);
    background: #305096;
    background: -moz-linear-gradient(top, #5277c8 0%, #305096 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5277c8), color-stop(100%,#305096));
    background: linear-gradient(top, #5277c8 0%, #305096 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5277c8', endColorstr='#305096', GradientType=0 );
    }

    I have already added it to your jotform (http://form.jotform.us/form/42886612112149) since I wanted to see what error was shown to you if it gets shown to you again please let us know together with the CSS that caused it.

    Best Regards,
    Ben

  • Profile Image

    Answered by browningreagle on November 10, 2014 at 12:43 PM

    That fixed it!  Thanks for your help everybody!

  • Profile Image

    Answered by Shadae on November 10, 2014 at 01:51 PM

    Hi browningreagle,

    On behalf of my colleagues, you are most welcome.

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

    Thank you.