¿Cómo puedo personalizar el botón del Widget Lista Configurable?

Hola!

¿Cómo puedo personalizar el botón del Widget Lista Configurable? Creo que el "Añadir CSS" es para todo el Widget, no específicamente para el botón. Puedo cambiar el texto, pero no la apariencia, color, etc.

Me ayudáis?

Hi EliExams,

Thanks for reaching out to Jotform Support. Our Spanish Support agents are busy helping other Jotform users right now, so 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 Spanish, let us know and we can have them do that. But, it might take a while until they're available again.

Now, coming back to your question, you can indeed customize your Configurable List widget entirely by injecting CSS code into the widget. You will need to have CSS knowledge for this. Alternatively, you can let us know what kind of customization you would like to have. For basic customization, we'll be happy to check on the possibility for you.

Let us know if you have more questions.

Hi!
I would like to customize the button, that's what I've been trying with
no success:
.add-on {
  background-color: #4CAF50 !important; /* Verd suau ELIEXAMS */
  color: white !important;
  padding: 10px 18px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: bold !important;
  text-align: center !important;
  margin: 20px auto !important;
  display: block !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease;
}
.add-on:hover {
  background-color: #3e8e41 !important; /* Verd una mica més fosc en
passar-hi */
}
And also:
.add-on {
  background-color: #2E8B57 !important;
  color: white !important;
  padding: 12px 20px !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: bold !important;
  font-size: 15px !important;
  cursor: pointer !important;
  display: block !important;
  margin: 24px auto !important;
  text-align: center !important;
}
And also:
button[id*="list"] {
  background-color: #4A90E2 !important; /* Blau corporatiu suau */
  color: white !important;
  padding: 14px 24px !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  text-align: center !important;
  display: block !important;
  margin: 20px auto !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Ombra elegant */
  transition: all 0.3s ease-in-out;
  cursor: pointer !important;
}
button[id*="list"]:hover {
  background-color: #357ABD !important; /* Blau més fosc en passar-hi */
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
  transform: scale(1.05); /* Lleuger efecte de creixement */
}
button[id*="list"]::after {
  content: "Afegir un altre candidat" !important;
}
I think the CSS I'm trying to inject goes into the general widget, I
don't know how to inject it just in the button, could you please help me?
El 19/06/2025 a las 3:37, Jotform escribió:
...

Hi EliExams,

I was looking for the same thing the other day and I saw someone else asked the same question before. You can customize the widget buton by using CSS codes. You can check the details from here.

Hope it will be helpful for you.

No... it doesn't work, Melanie :(
--
El 19/06/2025 a las 10:03, Jotform escribió:
...

Hi EliExams,

You can easily inject CSS codes into your widgets. Based on the codes you shared, it looks like you want to change the widget background and customize the Add button, so I adjusted the code accordingly. Now let me show you how you can do that:

1. First, copy this code:

/* Style for #list > div */

#list > div {

  background-color: #2E8B57 !important; /* Soft green */

  color: white !important;

  padding: 12px 20px !important;

  border: none !important;

  border-radius: 8px !important;

  font-weight: bold !important;

  font-size: 15px !important;

  cursor: pointer !important;

  display: block !important;

  margin: 24px auto !important;

  text-align: center !important;

  box-shadow: 0 4px 6px rgba(0,0,0,0.1);

  transition: background-color 0.3s ease;

}





#list > div:hover {

  background-color: #3e8e41 !important; /* Slightly darker green on hover */

}





/* Style for #listContainer > button */

#listContainer > button {

  background-color: #4A90E2 !important; /* Soft corporate blue */

  color: white !important;

  padding: 14px 24px !important;

  border: none !important;

  border-radius: 8px !important;

  font-size: 16px !important;

  font-weight: bold !important;

  text-align: center !important;

  display: block !important;

  margin: 20px auto !important;

  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Elegant shadow */

  transition: all 0.3s ease-in-out;

  cursor: pointer !important;

}





#listContainer > button:hover {

  background-color: #357ABD !important; /* Darker blue on hover */

  box-shadow: 0 6px 12px rgba(0,0,0,0.3);

  transform: scale(1.05); /* Slight grow effect */

}





#listContainer > button::after {

  content: "Afegir un altre candidat"; /* Adds label text after button */

  display: inline-block;

  margin-left: 8px;

  font-size: 14px;

  font-weight: normal;

}

2. Open your form in Form Builder, scroll down, and select the Configurable List widget.

3. Click on the Wand icon on the right side of the widget to open Widget Settings.

4. Under the Custom CSS tab, paste the code into the CSS Code box.

After you inject it, it’ll look like what you see in my screenshot below:

If you only want to change the Add button, just apply the code below:

/* Style for #listContainer > button */

#listContainer > button {

  background-color: #4A90E2 !important; /* Soft corporate blue */

  color: white !important;

  padding: 14px 24px !important;

  border: none !important;

  border-radius: 8px !important;

  font-size: 16px !important;

  font-weight: bold !important;

  text-align: center !important;

  display: block !important;

  margin: 20px auto !important;

  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Elegant shadow */

  transition: all 0.3s ease-in-out;

  cursor: pointer !important;

}





#listContainer > button:hover {

  background-color: #357ABD !important; /* Darker blue on hover */

  box-shadow: 0 6px 12px rgba(0,0,0,0.3);

  transform: scale(1.05); /* Slight grow effect */

}





#listContainer > button::after {

  content: "Afegir un altre candidat"; /* Adds label text after button */

  display: inline-block;

  margin-left: 8px;

  font-size: 14px;

  font-weight: normal;

}

The result with only add button changed:

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

I got it! I don't know if that was related, but I turned off Kaspersky
and it worked!
Thanks for your patience and time, now I can design a beautiful button
(it was horrible in the first place, to be honest, hahaha!)
El 19/06/2025 a las 10:29, Vanessa López - EliExams escribió:
...