Card Form: How do I change the white background of the card?

  • VWH_AB
    Asked on February 16, 2021 at 3:25 PM

    The form elements are white, ouch, I notice from previous support you thought that it was not important to have colours other than white especially as we can change the welcome screen. I think this is a huge mistake, most my customers will complete forms in the evening wanting less harsh backgrounds, you must have solved this issue by now?

  • Elton Support Team Lead
    Replied on February 16, 2021 at 7:32 PM

    Just to clarify, you want to change the white background of the cards?

    02172021 ckcYmINQ3a Screenshot 10

    If yes, I'm afraid this isn't yet possible. Let me escalate this as a feature request for now. Once this is implemented, we'll inform you here.

    For now, you may consider the classic form where you can customize every color of any elements by injecting custom CSS codes into your form. Guide: How to Inject Custom CSS Codes

  • Alexander Bathurst
    Replied on February 18, 2021 at 2:50 PM

    That's a shame and may I say a rather old fashioned view of programmers who like white, in reality most people prefer non white and we can produce far better products, this has been requested by many others and always the same, we will escalate it, surely it's not that hard?

  • Elton Support Team Lead
    Replied on February 18, 2021 at 4:10 PM

    I really understand your point but it is still our higher team's decision. They probably prefer the minimal design on cards for now so this may be the reason why it's not implemented sooner but this is still considered and rest assured as soon as this is rolled out, we'll let you know here.

    You may consider the classic form for now so you can use the colors you want for all the elements as I've previously mentioned. Or here's a workaround using the full source code of the card form if you like it.

    1. Open the form in your browser then take all its source code and save it as an HTML file. To do that, you can right-click anywhere in your card form then View page source to copy all its source code.

    02192021 Qx1zI4j0nq Screenshot 10

    2. In the source code, you can add the following CSS code between the < style > tag to change the card background color.

    .jfCard-question {
      background: #8e8e8e;
    }

    You can also add more CSS codes you want to customize elements on the card.

    Demo: https://shots.jotform.com/elton/test_dark_card_color.html

    The only downside is that you will have to update your form source code whenever you make any changes in your form on the form builder.

    Hope this still helps!