Fillable Fields Over Table Images

Hello.  I am not familiar with CSS programming and was wondering if you could give me some guidance on whether there is a way to set up the form at the link for user input.  The form is ready other than the fillable areas.  I have put in images of tables since I didn’t see a template that would be fitting for these tables.  Now I’d like to overlay the fillable fields.  On the first two tables, I need a spot for one digit in each box under “Score Yourself Here.”  On the “Total Scoring” table, I need for the user to be able to enter two digits in each of the blanks.

Any assistance or guidance would be greatly appreciated.  Thank you.

I saw that you have added one Matrix table field to your form and that Matrix table has all content as image of your first table. Will that work for you? You can do the same for second image. You can also perform calculation inside of matrix tables. 

How to Perform Form Calculation in the Matrix Field?

Unfortunately it is not possible to force your users to enter only one digit.

You can create total scoring field and calculate vales from matrix table fields. This way your users will not need to copy and paste values from one field to another.

How to Perform Calculation in the Form?

Only other way I could think of as possible workaround would be to create multiple number fields and to use CSS to position them over your images. However in this case I am not sure if all number fields would be positioned correctly on different deceives. Most likely they would not be positioned correctly. 

If you do not want to use matrix table fields as workaround, please let us know and we can create demo form with number fields that are positioned over your images.