Change Appointment field timeslots into numbers instead

Buenos dias, agradeceria que me pudieran dar una solución al problema que tengo, les explico:

Necesito un sitio de reservas por lo que he encontrado un básico ideal que es la agenda pero desearia saber si en lugar de el horario podría colocar números, por ejemplo del 1 hasta el 20, para poder hacer reservas múltiples en cualquier día, sería ideal poder conseguirlo.

Gracias por su atencion.

Hi Vicente,

Thanks for using Jotform. I'd like to let you know that I am using a translation tool to provide assistance, but if you prefer to receive help in your native language, we can forward this ticket to our Spanish Support Team. However, keep in mind that it could take longer to receive a response from them. 

Now, going back to your question. You can inject CSS codes into your form to change the timeslot shown in the Appointment field. Just note that this only applies to the front end. When the submission is made, the data that will be shown on the Tables page will still be the original timeslot that was set. To display numbers instead of timeslots, you can add this CSS code to your form:

.appointmentSlot {

 text-indent: -9999px;

 line-height: 0;

}



div.appointmentSlots.slots > div > div:nth-child(1):after {

 content: "1" !important;

 text-indent: 0;

 display: block;

 line-height: initial;

}



div.appointmentSlots.slots > div > div:nth-child(2):after {

 content: "2" !important;

 text-indent: 0;

 display: block;

 line-height: initial;

}



div.appointmentSlots.slots > div > div:nth-child(3):after {

 content: "3" !important;

 text-indent: 0;

 display: block;

 line-height: initial;

}



div.appointmentSlots.slots > div > div:nth-child(4):after {

 content: "4" !important;

 text-indent: 0;

 display: block;

 line-height: initial;

}



div.appointmentSlots.slots > div > div:nth-child(5):after {

 content: "5" !important;

 text-indent: 0;

 display: block;

 line-height: initial;

}



div.appointmentSlots.slots > div > div:nth-child(6):after {

 content: "6" !important;

 text-indent: 0;

 display: block;

 line-height: initial;

}



div.appointmentSlots.slots > div > div:nth-child(7):after {

 content: "7" !important;

 text-indent: 0;

 display: block;

 line-height: initial;

}



div.appointmentSlots.slots > div > div:nth-child(8):after {

 content: "8" !important;

 text-indent: 0;

 display: block;

 line-height: initial;

}



div.appointmentSlots.slots > div > div:nth-child(9):after {

 content: "9" !important;

 text-indent: 0;

 display: block;

 line-height: initial;

}



div.appointmentSlots.slots > div > div:nth-child(10):after {

 content: "10" !important;

 text-indent: 0;

 display: block;

 line-height: initial;

}



.appointmentFieldRow.forSelectedDate span {

 display: none !important;

}

Here's the result:

You can follow the steps below on how you can add the CSS codes to the form:

1. In Form Builder, click the Form Designer button (paint roller icon) on the right part of the page

2. On the Form Designer panel, go to the Styles tab

3. You should see the Inject Custom CSS section at the bottom of that tab. Add the CSS code there.

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

Muchisimas gracias-

thank you so much