How to customize my form?

  • Profile Image
    EmeraldDonors
    Asked on June 28, 2020 at 12:46 PM

    Hi there,

    I have tried to customize my form as much as possible but have hit a brick wall with the below. Please could you assist :).

     

    1593362555Screen Shot 2020-06-28 at 18.3

    1. My Form Tab Widget look - I hate the white lines in it & overall layout - anyway to make it look better?

    1593362615Screen Shot 2020-06-28 at 18.3

    2. I have managed to customize the back & next & save button but not the browse files. I would love to change the color & change what it says (to drop or browse).

    1593362716Screen Shot 2020-06-28 at 18.3

    3. I would love to be able to change the look & style of the progress bar :).

    1593363034Screen Shot 2020-06-28 at 18.44. I really dont like the radio button - how can I edit this? Just a grey square outline box with a white center & with a grey dot in the center? Mobile friendly size.

  • Profile Image
    KrisLei
    Answered on June 28, 2020 at 02:42 PM

    Hi,

    I assumed that you are referring to this form, 201775513877565, correct? 

    1. My Form Tab Widget look - I hate the white lines in it & overall layout - anyway to make it look better?

    I have cloned your form and it seems that the white lines are not showing on my end, have you already managed to eliminate it? 

    1593368650tabs.jpg

    2. I have managed to customize the back & next & save button but not the browse files. I would love to change the color & change what it says (to drop or browse).

    Please give me some time to change the colour of the button for the "Browse File", I assume that you would like to make it the same colour as the 'next' and 'back' button.

    3. I would love to be able to change the look & style of the progress bar :).

    How would you like to change the progress bar's style? If it is the colour, it can be changed on its properties:

    1593369234progress bar.jpg

    4. I really dont like the radio button - how can I edit this? Just a grey square outline box with a white center & with a grey dot in the center? Mobile friendly size.

    Please allow me some time to come up with the necessary CSS codes to meet your requirements. 

    Thank you. I will get back to you shortly. 

  • Profile Image
    EmeraldDonors
    Answered on June 28, 2020 at 03:05 PM

    Thank you so much KrisLei you rock! Yes it is that form :).


    1. Oh that's od... let me investigate why.

    2. Yes that is perfect!!!

    3. Ooo thank you! Its just color :).

    4. You are amazing thank you!

  • Profile Image
    KrisLei
    Answered on June 28, 2020 at 07:46 PM

    My apologies for the delay.

    2. I have managed to customize the back & next & save button but not the browse files. I would love to change the color & change what it says (to drop or browse).

    Please try to add these codes to change the color of the File Upload button:

    .form-all .qq-upload-button {

        background : #c6a530;

    }

    The color change is not visible on the form builder, but the changes are applied on preview or live mode.

    To change the text inside the button, this can be done through its Properties:

    1593383488file upload.jpg

    4. I really dont like the radio button - how can I edit this? Just a grey square outline box with a white center & with a grey dot in the center? Mobile friendly size.

    Please try to insert these codes for the radio buttons:

    .form-radio-item:not(#foo) label:after {

        background-color : gray!important;

        margin-top : 0px;

    }

    .form-radio-item label:before {

        background-color : white!important;

    }

    .form-radio-item:not(#foo) input:checked ~ label:before {

        border-color : gray;


    }

    Here's the result: 

    1593387784form.jpg

    For reference: How-to-Inject-Custom-CSS-Codes

    You can also view the changes here on my cloned form: https://form.jotform.com/201796552386970 

    Let us know if it didn't meet your requirements.


  • Profile Image
    EmeraldDonors
    Answered on June 29, 2020 at 01:51 AM

    All worked amazingly!!!! Thank you so much KrisLei, I really appreciate it!

  • Profile Image
    EmeraldDonors
    Answered on June 29, 2020 at 02:28 AM

    Hi there,


    I noticed this the live save button is different from my building saving button green. I want it the building green not the live green.


    1593412059Screen Shot 2020-06-29 at 08.21593412128Screen Shot 2020-06-29 at 08.2

  • Profile Image
    ashwin_d
    Answered on June 29, 2020 at 04:18 AM

    Please inject the following custom CSS code in your form to fix the background color issue of save button:

    .form-submit-button {

        background: #00917b !important;

        border-style: outset !important;

        border-color: #00917b !important;

    }

    The following guide should help you how to inject custom CSS code in form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Hope this helps.

    Do get back to us if you have any questions. 

  • Profile Image
    EmeraldDonors
    Answered on June 29, 2020 at 03:58 PM

    Thank you so much that worked great!


    I want to apply the following to my checkboxes too as right now they look like the image below with the weird off centered dot (after the code). Could you assist please?

    .form-radio-item:not(#foo) label:after {

        background-color : gray!important;

        margin-top : 0px;

    }

    .form-radio-item label:before {

        background-color : white!important;

    }

    .form-radio-item:not(#foo) input:checked ~ label:before {

        border-color : gray;


    }

    1593460648Screen Shot 2020-06-29 at 21.4

  • Profile Image
    KrisLei
    Answered on June 29, 2020 at 05:04 PM

    Kindly give me some time to also generate the codes for the checkboxes. I will get back to you as soon as possible. 

    Thank you.

  • Profile Image
    KrisLei
    Answered on June 30, 2020 at 01:59 AM

    To change the color of the check inside the checkbox you would need to access the Advanced Designer, please refer to my screencast below:

    1593496555advanced designer.gif

    Then to format the position of the check mark inside the box and change the color of the border please add the following codes:

    .form-checkbox-item:not(#foo) label:after {

    top:4px;

    left:6px;

    }

    .form-checkbox-item:not(#foo) input:checked ~ label:before {

    border-color:gray;

    }

    Let us know if it didn't meet your requirements.

  • Profile Image
    EmeraldDonors
    Answered on June 30, 2020 at 12:04 PM

    Amazing thank you so much!