Users are unable to add a new row in the configurable list widget when using smartphone or tablet

Hi, 

For of the forms I've created (direct link on my website here: http://www.bringthegymtome.com/invoice.html) - I've been getting feedback from a lot of people that I send it to that while they have no trouble filling out the form when they do so from a computer or laptop, however when they try to fill it out via cellphone or tablet, they have issues in being able to fill it out correctly. One main issue is that they are unable to successfully add more than 1 line if needed.

Please advise how this can be fixed. 

Thanks!

Although the form is not 100% responsive on mobile due to the configurable list widget, the widget allows me to add a new set of rows. I can do this on both Android and IOS devices.

You are using our Weebly app, so there should be no issue with it since the form is loaded in an iframe. Did your form users send you a screenshot of the problem? If yes, would you mind sending it to us? Here's a guide on how you can post a screenshot to this thread: 

https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum 

Do you also know what are the devices they are using? 

Would you also mind if there are other issues in the form? That way, we can also help you resolve it. 

That is an example of a screenshot from her cellphone showing how she wasn't able to submit the form. Please advise. 

I notice that the issue is occurring due to the page is not horizontally scrollable to enter the information on the required fields displayed to the right.

Please try injecting the following CSS code to the Custom CSS section of the Configurable list widget to display the fields in two lines while viewing on mobile devices.

@media screen and (min-width: 10px) and (max-width: 540px){

th { display: none; }

td.col1, td.col2, td.col3, td.col4 {

display:inline-block;

float: left;

padding: 20px 5px 1px 1px;

}

td.col1:before { content: "Date"; width: 40%; font-weight: bold;}

td.col2:before { content: " Name of Client"; width: 40%; font-weight: bold;}

td.col3:before { content: "Time"; width: 40%; font-weight: bold;}

td.col4:before { content: "Amount Due"; width: 40%; font-weight: bold;}

td.col1 { width: 60%; }

td.col2 { width: 35%; }

td.col3 { width: 45%; }

td.col4 { width: 35%; }

}

The form should be displaying the configurable list widget as shown below:

Hope this information helps!