How can i resize Ratio?

Hi there,

it is possible to resize the Ratio icon to the size like this?

Thanks for help. 

Chor

You can change the template of your radio buttons and check boxes inside of Form Designer. Inside of Form Designer simply click on any radio button option and change template. 

Once you change the radio button template you will also be able to customize your radio buttons with CSS. 

On my demo I have changed radio button template and added this CSS code:

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

    border-radius: 5px;

    width: 120px;

    height: 25px;

}

How to Inject Custom CSS Codes

Here is my demo form: https://form.jotform.com/70094887761973 

Feel free to test it and clone it. 

You can also check this widgets:

Line Radio Buttons

Image Radio Buttons

How to Add a Widget to your Form?

Hope this will help. Let us know if you need further assistance. 

Thank You so much! Your Form works fine for me. 

I just have one wish, it is possible to fill the ratio with a color and change the selected option font color to white instead of the "blue ratio point"? Like this:

Please allow me some time to find the correct CSS code.

Please add this CSS code to your form as well:

input[type=radio]:checked + label {

    color : #fff;

    font-style : normal;

    background-color: #006ab3;

    width:120px;

    border-radius: 5px;

    text-indent: -15px!important;

}

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

    left: 0px!important;

}

How to Inject Custom CSS Codes

Here is my new form: https://form.jotform.com/70103074941952 

Feel free to test it and clone it.

Let us know if you need further assistance.

Hi Joanna,

again many thanks to you and your support!

Sorry for another questions, i never work with css before, so it is very difficult for me.

Can you please tell me how to solve the following problems:

1. Fill the Checkbox with #006ab3

2. Center "Anrede"

3. Center "Frau" ("Frau" has the same size as "Absenden")

4. Middle the Text in the box and Center - also for "Herr"

Thank you! 

1. Add this CSS code:

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

    background-color : #006ab3;

    box-shadow : 0 5px 0 0 #006ab3, 5px 5px 0 0 #006ab3, 10px 5px 0 0 #006ab3, 13px 5px 0 0 #006ab3, 10px 8px 0 0 none, 15px 2px 0 0 none;

    -moz-transform : none!important;

    -webkit-transform : none!important;

    -o-transform : none!important;

    -ms-transform : none!important;

    transform : none!important;

}

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

    content : '';

    position : absolute;

    z-index : 10;

    display : inline-block;

    opacity : 0;

    top : 2px!important;

    left : 6px!important;

    width : 20px!important;

    height : 20px!important;

}

I will need a bit more time, because you already have lot of custom CSS inside of the form and I will need to inspect that as well. 

This is the closest I can get to screenshot you provided.

I have added some additional CSS code and I had to edit some existing CSS code.

Here is my demo form: https://form.jotform.com/70111930281949 

Please clone it to your account. 

Hope this will help. Let us know if you need further assistance. 

Thank you so much, it works fine. 

Hi Joanna,

i'm again, i hope this is my last wish to you. could you please delete the Border or "shadow" on the form?

see below:

I have checked your form and it does not have border anymore, to remove the box shadow effect, please inject this CSS code: 

.form-all {

    box-shadow: none !important;

}

This should be the result: 

Hope this helps.