Generate multiple custom forms from a column with code

Ask for Help
1

Hi guys!

I’m come up to you today because I would like to generate multiple forms from a fixed json structure inside a single column.

This because now you can’t generate different forms (unless you use multiple tables)!

I tried the new component and I wrote this prompt with Claude:

Create an HTML form that takes its questions from inputJSON fusing Alpine.js. The form should be styled with CSS. The JSON include categories, descriptions, and questions with a choice from 1 to 5. The responses should be saved through a click action.

The problem is that I would like to customise the html (the style for example) and the other elements, but i don’t know how to insert the variables from json.

But unfortunately I can’t figure out how to do this! I have also tried via the console, but everything comes back already generated!

I leave below also a simple json structure that can be modified for every column:

[
  {
    "category": "Customer Satisfaction",
    "description": "Evaluate your level of satisfaction with the following aspects of our service.",
    "questions": [
      {
        "question": "Staff Courtesy",
        "id": "q1"
      },
      {
        "question": "Wait Time",
        "id": "q2"
      },
      {
        "question": "Product Quality",
        "id": "q3"
      }
    ]
  },
  {
    "category": "User Experience",
    "description": "Evaluate your overall experience with our website.",
    "questions": [
      {
        "question": "Ease of Navigation",
        "id": "q4"
      },
      {
        "question": "Loading Speed",
        "id": "q5"
      },
      {
        "question": "Design and Layout",
        "id": "q6"
      }
    ]
  }
]

Image of the form:

Screenshot 2024-07-30 alle 15.37.05
Screenshot 2024-07-30 alle 15.37.05923×813 36.8 KB

I think this may help many others!
Thanks :pray:

1 Like
2

So what you want to do now is connecting this to columns to have a full form format?

3

Yes @ThinhDinh exactly,

my intention is to have the possibility for each row in my table, a different form, which will have its own structure within the inputJSON column.

The problem now is that I cannot replicate the prompt in the html editor, so that I can have freedom of customisation!

4

Why do you need the structure to be dynamic though? Can you tell me how this is better for you than using the native form?

5

Yes @ThinhDinh , I’ll give you some context:

I created this app to manage feedback from my employees. Both for the employee who has to do it for himself, and for the contact person who has to do it on the employee.

Furthermore, these feedbacks are done twice a year and could vary in the amount of questions and their structure (maybe different categories of questions or type of entry like checkbox/text entry).

Using the native form component and relying on a table that actually has a fixed number of columns does not allow me to have dynamic forms, where the columns could change according to new questions.

So my idea is to have a json referring to the dynamic questions and as output another json with the answers.

1 Like
6

That sounds interesting to me. Will dig more into it on the weekend.

1 Like
7

Yes! It is not easy, but I think it is very challenging :wink:

I also want to share it with @Robert_Petitto, who may be interested!