Best Way to Design This? (Complex Product Creation Form)

I have a question about creating the attached sample Product Upload design in Webflow. Our goal with Webflow is to use it to build HTML and CSS that we understand we will need to export to attach full functionality to afterwards, but would like all of the styling to be completed to save steps between design and development.

For designing something such as this, would it be best to create (design) these elements almost as if in Photoshop (since Webflow forms have limited styling options?) and treat it more as a design that will have to be turned into a functioning form? I hope this question makes sense.

Thanks!

Here is my public share link: https://preview.webflow.com/preview/squlion-s-dapper-site?preview=4b771f9fc080d9d2f304f787e8a5ad6f

You’ll definitely need to fake some components. But with a bit of custom CSS and webflow witchery you can achieve a lot of it, already as a form, so why no giving it a shot? :slight_smile:

@bartkowalski wrote a tutorial on building some custom elements : http://css-checkboxes.webflow.io/

Things like your collection multi select item will be difficult to reproduce in a drop-down menu yes, but can be simulated with a block for later integration.

1 Like

I took the liberty to use your example to request styling features. It’s here and I linked your image: Be able to style all forms elements (dropdown, | Webflow Wishlist

Please tell me if it’s OK to attach your image there. if not I’ll go and edit it.

2 Likes

Yes, it’s absolutely fine to attach this image. Any help to keep the momentum I have going with this project is appreciated! :relaxed:

1 Like

Do you recommend using the div / container / columns? Or flex box for something like this? And thank you, I will check out that link. This form is a LOT. :smile:

  • I don’t see anything calling for Flex.
  • row can’t be used on tables because of responsivity
  • everything can be achieved with inline-boxes, floats

I’d start like this (everything not labeled is a div)

http://vincent.polenordstudio.fr/snap/zxxor.jpg

2 Likes

This screenshot is incredibly helpful. Thank you!

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.