JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
Format certain fields to achieve same appearance as MatrixAsked by David Smith on January 12, 2016 at 11:32 AM
I am building a simple order form with a matrix forming the basis of the order questions.
I have added some fields underneath the matrix which I would like to 'style' as illustrated in the last screenshot. I'm sure there is a solution - but I have been unable to figure out the css coding - can you help?
I checked your form and it looks like you removed the second matrix field. In any case, since all your fields are set to 100% width, you would need to set the width of the second widget field manually through CSS. If you would like to add the field back to your form, we will be happy to help you adjust the CSS to make it match the layout of the matrix currently in your form.
Thanks for your response, I didn't have the second matrix field, I copied the image of the existing matrix field and altered it slightly to show what I want to achieve with the order subtotal, postage and packing and order total fields, rather than have them as they appear now.
I wasn't sure how to go about this as the three fields I want to change the appearance of are calculation fields with conditions set.
I checked your form and it looks like you have already added the second matrix fields per your specifications.
Do inform us if you need further assistance with your form,
Hi, that was when I was trying to find a solution to make the fields look the same, I think I am making progress, but how can I code the css so it removes the grey box and the text ' click to edit'
While I can't find that particular matrix field in your form anymore, please use the following CSS code and replace the field ID number of the target field.
Replace the number 10 (mark in bold) with the field ID number of the matrix field that you want to remove its first column header and its label. You should be able to find the ID number on the field properties (right click the field > edit properties).
Let us know if you need further help. Thanks!