I need to give a form a very specific layout. All the frames in the attached file (coloured ones & white ones) should be textareas.
What is the best way to approach this? I was thinking of working with an SVG file (export from indesign) with input tags inside of it, to make sure the textareas are on the correct place, but I don’t know if this is even possible.
The pentagon should also be a textarea, and the arrows symbolise the fact that the pentagon summarises what is written in the coloured rectangles.
Without the pentagon & arrows I would use pure CSS, but they make it harder.
Ideally speaking, the layout should be responsive.
I was also thinking of using the original design as a background image, but I have no idea how to place the textareas exactly above the right rectangles (or pentagon), especially since users will use different kind of devices.
Ya, that is what I was hoping too cause it would be an easier solution.
I’m not really great with SVGs, but if you have a good clean SVG it should/could be possible? You’d just need to append .text to each container, maybe?
If you could make a codePen for a starting point that could help; but honestly I’m not sure the best route to even go to start.
<svg>
<!-- SVG stuff -->
<foreignObject // will need the x/y and height/width>
<!-- html here -->
</foreignObject>
<!-- probably more SVG stuff -->
</svg>
It will probably get a bit messy though, mainly due to the sizes of things, you need to start getting very specific