How to design a multi-step form in a modal?

I have designed a widget for a Web mapping aplication that takes a .csv containing coordinates as input and has 2 output options :

enter image description here

Business logic :

  • Both output options require a .csv to be loaded and the form below to be validated
  • None of these output options require extra steps, they are executed in background.

But now I was requested to add a new output :

enter image description here

This "Upload to URL" button requires extra steps, like typing a URL and some other configuration, so basically it will require a intermediate form to finish the output.

My first instinct was to make this extra form as a modal, but the widget is already a modal so... that can't be good.

So maybe just append the intermediate form below the first one? But then it's not clear that this second form depends on the first one being validated.

In the end the only feasible solution I could think of was to add a side-transition to this form (with a back button), the only problem with this is that all other output buttons on the modal footer have no transition, but this one has so it kinda breaks the pattern.

I'm looking for solutions/ideas on how to better design the flow of things here.

Tags: