How to clone an Input table to form?

How can i replicate the above order form on Jotform? I want all the beginning fields to be read only and the last column to be editable for customers to fill in

Hi Sue,

Thanks for reaching out to Jotform Support. You can easily clone the form in the image to your account. However, the option for cloning depends on whether the image comes from a website/link or a PDF file. See the screenshot below:

The cloned form may not have the exact look or elements, and you might need to reconfigure its appearance, add missing elements, or fix labels to make it exactly like the image. If you can share the source of the image, we can help you clone the form to your account by guiding you to the correct cloning directions. In the meantime, you can check our guide for Cloning your forms.

As for your other question, this can be done by Injecting custom CSS codes to your form. We can help you on it once the form was already made to your account.

Let us know if you have any other questions.

I am not able to attach the PDF. Here is a link to the same. Pls help me clone this as when I tried it failed to clone.

https://acrobat.adobe.com/id/urn:aaid:sc:us:68cb12fc-5309-44a0-8d55-da8894b2106e

Hi Sue,

 I suggest using the Input Table field. Let me show you how:

1. In Form Builder, click on the Add Element button on the left, and select the Input Table to add it to your form.
2. Next, click on the Gear icon next to it, then click on the Fields tab in its properties on the right.
3. Then, select the Numeric textbox option and that's it.
   

We would also suggest labeling your row and column labels as needed. Once complete, let us know with the link to your form, we'll generate a CSS codes that can populate select cells with texts. Do note that this is a workaround so further steps may be required. We'd also be using the Form Calculation widget to calculate the numbers entered on the last row of your Input Table.

Once we hear back from you, we'll be able to help you with this.

https://form.jotform.com/250755474715059

Here is the link to the form. Except for the order field being editable. I would want the rest of the fields to be uneditable and something i can populate on my end. Also note, this template is one of many forms we would like to create using jotform. I would highly suggest if you could make the CSS coding inherit to this account so we can recreate multiple forms like this without bugging your team

Hi Sue,

Since you're going to disable input on other cells, the only way that you can fill it up is by using an Update and Calculate field condition. See the screenshot below for a sample conditions:

Meanwhile, You can easily disable all the cells except those from the last column of the table by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

table.form-matrix-table input {

    pointer-events: none;

    background-color: #f0f0f0; /* Light grey to indicate it's disabled */

    opacity: 0.6;

    border: 1px solid #ccc;

}

/* Enable inputs in the last column */

table.form-matrix-table tr td:last-child input {

    pointer-events: auto;

    background-color: #ffffff; /* Normal white background */

    opacity: 1;

    border: 1px solid #000; /* Regular border */

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

See the screenshot below for the results:

This code is applicable to all type of table that you will have on your other form as well. 

Reach out again if you need any other help.

I was able to add the CSS code to make the last tab editable. Still not able to input data in the fields before that like under the vintage, format, qty columns etc.

https://form.jotform.com/250755474715059

Pls help

Hi Sue,

You can add a Short Text field to your form and copy the value to the Input Table with Conditional Logic. It's really easy. Let me show you how:

1. In Form Builder, click on the Add Element menu on the left side of the page.
2. Under the Basic tab, scroll down the list and choose the Short Text field and drop it to your form.
3. Click the Gear icon and go to Advanced tab to
4. Add your text as the Default Value and enable the Hide Field option.

Now, let's set up the conditions:

1. In Form Builder, in the orange navigation bar at the top of the page, click on Settings.

2. Click on Conditions on the left of the page.

3. Now, click on Add a New Condition and then click on Update/Calculate Field.

4. Set the conditions like you see below:

Set up Conditions for all of the text you need to add on the Input Table. Check out the screenshot below to see how your form will work after setting up the Conditions:

Give it a try and let us know how it goes.

Is there any chance we can set up a call? It is still not letting me edit. I did set up the condition and add the field

Hi Sue,

We don’t currently offer live phone support. If you have any questions, just reply to this thread, or you can create a Help Center thread from the Contact Us page. We’ll be happy to help.

Can you share with us a bit more details on how it's not letting you? What are the steps you're trying to do, and what are the errors you're receiving? If you can take a screenshot of what’s happening, that'll help us to understand better what’s going on. Let me show you how to post a screenshot to our Help Center:

1. On the Help Center page, scroll down to the Your Answer section and click on the Image icon.

2. Drag and drop your image into the Upload box, or click on it and select your file.

3. Then, click on the Add button in the bottom-right corner of the window.

4. To resize it, click on your screenshot and then click on one of the boxes in the corners, and drag it inward.

5. Once you're finished, click on the Post Answer button at the bottom right of the Your Answer section.

That's it. Once we hear back from you, we'll be able to help you with this.

So I did the steps as mentioned by your team but it still does not let me edit the text when i am building the form. The only way i can add some text to it is once i have published the form but again it does not stay there as soon as i reload the published link. I have done the CSS coding to keep the last column editable. I am not able to understand the conditional formatting section to add new text in the columns. As shown in the previous screenshot i shared, i need all the columns to be populated on my end so the customer can see them and only add their orders. If possible, i would appreciate either you remoting signing in to my account and changing the conditional formatting or sharing a loom screen recording video with me so i can understand how i can individual type out the text in those columns.

Hi Sue,

I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Hi Sue,

It looks like what you're trying to do is not possible using the input table because we can't assign a default value per column. Can you confirm if the columns for Vintage, Format, QTY Cases, Case Price, & BTL Price should have specific prefilled text per row or do you want dropdown options where form fillers can select their options per column?

Once we hear back from you, we'll be able to help you with this.

I would like them to have specific prefilled text per row

Hi Sue,

The only way to have them a prefilled text is by assigning a default value to them using conditions like I did on my previous reply in this thread by using an Update and Calculate field condition. See the screenshot below for a sample of conditions:

Unfortunately, you will need to repeat this process until you have set a condition to prefill all the cells that need to have text in your input table.

Let us know if you need any other help.

Hey Ronald, as mentioned before, even after i put this condition, i couldn't add text on the file. Either i am missing a step or you are. I made a pre condition for one of the fields but it still shows as a seperate short text section instead of being on top of the table and in the field its supposed to be in. As mentioned, i would appreciate if someone from your team can remote in to my account or you can share a screen recording. If not, I would highly appreciate you connect me to yoru manager as it was useless for me to sign up for a form creation app without being able to create a pre filled form

Hi Sue,

I checked the condition you made, and it is set to copy the field value instead of calculate. See the screenshot below:

You would need to replace it similar to what I have shown above and select a cell where you would like to pass it. See the screenshot below:

Doing this will pass the value of the field to the cell. See the screencast below:

Now, you would need to repeat this condition until all cells have their own condition to update them.

Let us know if you need any more help.