How do I remove the padding from the form?

Hallo,

in meinem Formular "Ratenrechner L&B" möchte ich

• in mobile view das Padding oben entfernen (den Abstand von oben bis zum ersten Element)
• den helleren Hintergrund des aktiven Steuerelementes entfernen
• den Options-Punkt in Farbe 5D675D einfärben

Wie mache ich das?

Hi ksedler,

Thanks for reaching out to Jotform Support. Unfortunately, our German Support agents are busy helping other Jotform users at the moment. I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in German, let us know and we can have them do that. But, keep in mind that you'd have to wait until they're available again.

Now, let me help you with your question. The following CSS code can be used to remove the padding and change the background color of the radio and checkbox.

.form-all {

  margin-top: 0px;

}



.form-checkbox:checked + label::before, .form-checkbox:checked + span::before {

  background-color: #5D675D;

  border-color: #5D675D;

}



.form-radio:checked + label::before, .form-radio:checked + span::before {

  border-color: #5D675D;

  background-color: #5D675D;

}



.form-radio:checked + label::after, .form-radio:checked + span::after {

  background-color: #5D675D;

}

Check out the following steps to inject the CSS:

• Open the Form in the Form builder and go to the Form Designer from the top left of the page.
• Select Styles from the Form Designer tab.
• Paste the above code in the Inject Custom CSS space and Save the settings.
• 

We have a guide to inject CSS into the form.

Let us know if you need any more help.

Hallo,

vielen Dank, ich habe das CSS eingefügt. Leider wird das jeweils aktive Control immer noch mit hellem Hintergrund angezeigt:

Außerdem möchte ich gerne erzwingen, dass auch in der mobilen Ansicht "Summe EUR" und "Anzahl Raten" nebeneinander stehen, auch "Gebühr Ratenzahlung" und "Monatliche Rate" sollen nebeneinander stehen.

Das erste Problem konnte ich inzwischen selbst mit dem von Ihnen auf den Hilfeseiten bereitgestellten CSS lösen - vielen Dank dafür. Hier ist der Code (für andere User):

.form-line-active {

background: #D2E0D0;

}

Nun möchte ich gerne noch die mobile Ansicht verbessern - diese Steuerelemente sollen "zu zweit" auf eine Zeile.

Hi ksedler,

You can inject the following CSS on your form to align the elements in one line specific to mobile devices:

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

#id_6 {

 width: calc(45%) !important;

}

#id_9 {

 width: calc(45%) !important;

}

#id_8 {

 width: calc(45%) !important;

}

#id_10 {

 width: calc(45%) !important;

}

}

I moved your other question to a new thread and helped you with that here.

Reach out again if you need any other help.

Hey Sweta,

thanks a lot for working on a Sunday. I really appreciate your help! I will check the mentioned CSS soon.

One more question regarding the code

.form-line-active {

background: #D2E0D0;

}

I did not affect the "back or submit" section. How can I keep it light green when active?

Hi ksedler,

Thanks for getting back to us. I’ll need a bit of time to look into this. I’ll get back to you shortly.

Thank you for your patience and understanding,

Hi ksedler,

Thanks for patiently waiting. To change the color of the back and submit button, you need to change the css as shown in the screenshot below:

Give it a try and let us know how it goes.

Hi,

thank you, but I asked for setting the active section background - light grey below. It appears as long you click down on a button:

I already have this code injected, to switch it for the other controls:

.form-line-active {

background: #D2E0D0;

}

There must be something similiar for turning also the active section background of the back/submit section.

Hi ksedler,

Thanks for getting back to us. You can add '!important' to the code to make it permanent even if the user clicks the buttons. The code should go like this:

.form-line-active {

background: #D2E0D0 !important;

}

Here's the link to my clone form that you can test to see how it works.

Give it a try and let us know if you need any other help.

Thanks, that works.