thank you page CSS styling for fill another form feature

I'm playing around with a few ways to prefill a few fields when the user completes one form and moves to the next one. I like the URL parameters but I'm also looking at the fill form feature on the thank you page because it gives me what I want - buttons to select the next form they want to complete.

As you can see in the screenshot, I want to adjust the colors and fonts to better match the website. The orange, for example, is a no go (I could live with the rest for now). Is there a way to at least change the orange to, for example, the dark purple color in our logo?

Hi Heather,

Thanks for reaching out to Jotform Support. It’s possible to change the color of the form icon on the Fill Another Form button by injecting custom CSS code into your form. Let me show you how:

1. First, copy this code:

.form-SVG {

background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAyNyAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQuNzA0NSAwLjg2NDI1OEMyLjU0NTU3IDAuODY0MjU4IDAuNzk1NDEgMi42MTQ0MiAwLjc5NTQxIDQuNzczMzVWMjguMjI3OUMwLjc5NTQxIDMwLjM4NjggMi41NDU1NyAzMi4xMzcgNC43MDQ1IDMyLjEzN0gyMi4yOTU0QzI0LjQ1NDMgMzIuMTM3IDI2LjIwNDUgMzAuMzg2OCAyNi4yMDQ1IDI4LjIyNzlWNC43NzMzNUMyNi4yMDQ1IDIuNjE0NDIgMjQuNDU0MyAwLjg2NDI1OCAyMi4yOTU0IDAuODY0MjU4SDQuNzA0NVpNNy40MzcxIDkuMTU0NzRDNi41NjQ1MiA5LjE1NDc0IDUuODU3MTYgOS44NjIxIDUuODU3MTYgMTAuNzM0N0M1Ljg1NzE2IDExLjYwNzMgNi41NjQ1MiAxMi4zMTQ2IDcuNDM3MSAxMi4zMTQ2SDE5LjAyMzNDMTkuODk1OSAxMi4zMTQ2IDIwLjYwMzIgMTEuNjA3MyAyMC42MDMyIDEwLjczNDdDMjAuNjAzMiA5Ljg2MjEgMTkuODk1OSA5LjE1NDc0IDE5LjAyMzMgOS4xNTQ3NEg3LjQzNzFaTTcuNDM3MSAxNC40MTlDNi41NjQ1MiAxNC40MTkgNS44NTcxNiAxNS4xMjY0IDUuODU3MTYgMTUuOTk5QzUuODU3MTYgMTYuODcxNSA2LjU2NDUyIDE3LjU3ODkgNy40MzcxIDE3LjU3ODlIMTkuMDIzM0MxOS44OTU5IDE3LjU3ODkgMjAuNjAzMiAxNi44NzE1IDIwLjYwMzIgMTUuOTk5QzIwLjYwMzIgMTUuMTI2NCAxOS44OTU5IDE0LjQxOSAxOS4wMjMzIDE0LjQxOUg3LjQzNzFaTTUuODU3MTYgMjEuMjY3MUM1Ljg1NzE2IDIwLjM5NDUgNi41NjQ1MiAxOS42ODcxIDcuNDM3MSAxOS42ODcxSDE5LjAyMzNDMTkuODk1OSAxOS42ODcxIDIwLjYwMzIgMjAuMzk0NSAyMC42MDMyIDIxLjI2NzFDMjAuNjAzMiAyMi4xMzk3IDE5Ljg5NTkgMjIuODQ3IDE5LjAyMzMgMjIuODQ3SDcuNDM3MUM2LjU2NDUyIDIyLjg0NyA1Ljg1NzE2IDIyLjEzOTcgNS44NTcxNiAyMS4yNjcxWiIgZmlsbD0iIzgwMDA4MCIvPjwvc3ZnPg==) !important;  

width: 26px !important;

height: 32px !important;

background-repeat: no-repeat !important;

display: flex !important;



}

2. In Form Builder, click on the Paint Roller icon located on the right side of the page.

3. Now, in the Form Designer, go to the Styles tab, and paste the code in the last row of the Inject Custom CSS area.

That's it. Test your form, and you’ll see that the form icon color has now changed to purple. Check out the screencast below for the result:

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

Awesome! What part of the code details the purple color? I want to use our specific logo color (#a45ee5).

thanks!

Hi Heather,

The code details for the purple color are based on the value of the background-image selector. You can use this updated CSS code based on your specific logo color #a45ee5. Check out the code below:

.form-SVG {

    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAyNyAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQuNzA0NSAwLjg2NDI1OEMyLjU0NTU3IDAuODY0MjU4IDAuNzk1NDEgMi42MTQ0MiAwLjc5NTQxIDQuNzczMzVWMjguMjI3OUMwLjc5NTQxIDMwLjM4NjggMi41NDU1NyAzMi4xMzcgNC43MDQ1IDMyLjEzN0gyMi4yOTU0QzI0LjQ1NDMgMzIuMTM3IDI2LjIwNDUgMzAuMzg2OCAyNi4yMDQ1IDI4LjIyNzlWNC43NzMzNUMyNi4yMDQ1IDIuNjE0NDIgMjQuNDU0MyAwLjg2NDI1OCAyMi4yOTU0IDAuODY0MjU4SDQuNzA0NVpNNy40MzcxIDkuMTU0NzRDNi41NjQ1MiA5LjE1NDc0IDUuODU3MTYgOS44NjIxIDUuODU3MTYgMTAuNzM0N0M1Ljg1NzE2IDExLjYwNzMgNi41NjQ1MiAxMi4zMTQ2IDcuNDM3MSAxMi4zMTQ2SDE5LjAyMzNDMTkuODk1OSAxMi4zMTQ2IDIwLjYwMzIgMTEuNjA3MyAyMC42MDMyIDEwLjczNDdDMjAuNjAzMiA5Ljg2MjEgMTkuODk1OSA5LjE1NDc0IDE5LjAyMzMgOS4xNTQ3NEg3LjQzNzFaTTcuNDM3MSAxNC40MTlDNi41NjQ1MiAxNC40MTkgNS44NTcxNiAxNS4xMjY0IDUuODU3MTYgMTUuOTk5QzUuODU3MTYgMTYuODcxNSA2LjU2NDUyIDE3LjU3ODkgNy40MzcxIDE3LjU3ODlIMTkuMDIzM0MxOS44OTU5IDE3LjU3ODkgMjAuNjAzMiAxNi44NzE1IDIwLjYwMzIgMTUuOTk5QzIwLjYwMzIgMTUuMTI2NCAxOS44OTU5IDE0LjQxOSAxOS4wMjMzIDE0LjQxOUg3LjQzNzFaTTUuODU3MTYgMjEuMjY3MUM1Ljg1NzE2IDIwLjM5NDUgNi41NjQ1MiAxOS42ODcxIDcuNDM3MSAxOS42ODcxSDE5LjAyMzNDMTkuODk1OSAxOS42ODcxIDIwLjYwMzIgMjAuMzk0NSAyMC42MDMyIDIxLjI2NzFDMjAuNjAzMiAyMi4xMzk3IDE5Ljg5NTkgMjIuODQ3IDE5LjAyMzMgMjIuODQ3SDcuNDM3MUM2LjU2NDUyIDIyLjg0NyA1Ljg1NzE2IDIyLjEzOTcgNS44NTcxNiAyMS4yNjcxWiIgZmlsbD0iI2E0NWVlNSIvPjwvc3ZnPg==") !important;

    width: 26px !important;

    height: 32px !important;

    background-repeat: no-repeat !important;

    display: flex !important;

}

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

You are awesome! Thank you so much!