Information Architecture – What would be the best way to organize a form development tool with questions that can optionally be grouped by categories and subcategories?

I'm developing a form design tool that some customers can use to fill in some surveys.

The form can be filled with questions associated with different form elements (text, selections, checkboxes, etc.). These can optionally be grouped by categories and subcategories if required.

Consider this possibility:

Question 1 - Enter your name
| - Question 2 - Enter your ID number
| --- Category [Car]
Question 3 - Which year is your car?
| ----- Category [INTERIOR]
Question 4 - What color is the interior?
Question 5 - Do you have steering wheel controls?
| ----- Category [EXTERIOR]
Question 6 - What color is the exterior color?
Question 7 - How big are the tires?

As you can see, questions 1 and 2 are outside the categories. Question 3 is in Category CARand questions 4,5 and 6,7 are each in subcategories INNER and OUTSIDE respectively.

I'm currently using jQuery UI with the draggable and sortable Interactions. So far, it works reasonably well until I came to the part where I need to use categories for these things.

I have a page gutter menu that contains the available form elements, and the main window has an empty area where you can place the elements. The items that are pulled out of the gutter are cloned so they can be reused.

My problem is that I can not find a reasonable way to organize these questions in a logical way that will not upset the admins who will create those forms.

I took the step to create a draggable piece that is called category This serves as a separator in the form, but something is missing in the entire user-centered design space. I also need to figure out how to best add subcategories once a category has been added.

All thoughts or comments are welcome! I am really excited about this. I am usually 70% developer and 30% UI / UX. But I feel like I should run and hide.