How can I advance style my form especially the buttons?

  • rebecca1sp
    Asked on September 19, 2018 at 5:03 PM

    I really like the flat look shown in the demo of the Form Tabs widget, and the long, flat style of the next/back buttons in the Line Radio Button demo. How did you get that look? I added the Form Tabs, but it doesn't look the same. I tried the Line Radio Button, but it didn't seem to work. I also tried making the Next/Back buttons wider in the Advanced Designer, but the app wouldn't let me change the width. Is all this because I started with a theme, and don't know how to use CSS?

  • Welvin Support Team Lead
    Replied on September 19, 2018 at 7:00 PM

    It's the Amber Orange theme of the Form Tabs widget. You can select that in the settings:

    15373977082018 09 20 001 Screenshot 10

    As for the next/back buttons, inject the following custom CSS codes in your form:

    .form-all .form-pagebreak-back, .form-all .form-pagebreak-next {


        color: #ffffff !important;

        background: #f4ad04 !important;

        box-shadow: none !important;

        text-shadow: none;

        border: none !important;

    }

    Please follow the steps here to inject the codes: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes


    As for the line radio button, you mean the demo form, right? That is still in the widget settings. It is the Blue Color scheme. 


  • rebecca1sp
    Replied on September 20, 2018 at 3:43 PM

    1537477786after css inject Screenshot 101537477817lineradiobutton demo Screenshot 21

    I followed the instructions and changed the theme in the Form Tabs
    settings, and injected the code given. The tabs look good, but the Next
    button still isn't what I was looking for. I've attached screen shots of
    the demo whose look I was trying to achieve, and my form.
    Thank you,
    Rebecca Pitts
    1SimplePhone
    DFW 469-320-1111
    MO 660-299-1111
    MA 774-307-1111
    IVR Recording Line 469-998-9144
    3620 N Josey Ln, Ste 110
    Carrollton, TX 75007
    For immediate technical support
    Please e-mail support@1simplephone.com
    ...

  • AshtonP
    Replied on September 20, 2018 at 4:17 PM

    We did not receive you screenshot please attach them as guided in this article so we can see what you are trying to achieve. How-to-Post-Screenshots-to-Our-Support-Forum

    If you have the sample, we should be able to suggest the custom CSS code for the Next button.

  • rebecca1sp
    Replied on September 20, 2018 at 8:27 PM

    1537489613after css inject Screenshot 101537489626lineradiobutton demo Screenshot 21


  • John_Benson
    Replied on September 20, 2018 at 11:44 PM

    You can clone the demo form and edit the fields by following this guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Also, I noticed on the screenshot you provided, I can see that the other image is a Card Form. Unfortunately, you cannot add custom CSS code to Card Form.

    I hope this information helps.