Here’s my struggle. Our designer created a visually nice complex form that we want to make it a multi-page/multi-step form. For that, my dev wants div’s set up inside the form, to encapsulate ‘page 1’, ‘page 2’, etc.
I can’t seem to be able to choose div, and place it over top a specific section of content inside the form. When I drag div’s inside the form, it just places a
and I can’t seem to customize how to do smoething like ‘mark start div here’ and then ‘mark end div here’. Perhaps I’m just not familiar with the functionality, but Google and reading didn’t get me where I needed.
Alternatively, I could recreate the form from scratch and place an ID on a form row or something that our dev could trigger off of. But when I cut and paste columns etc from the existing page into a new page, I’m losing formatting (which is bad, because our designer has gone back to school and I’m not equipped to start doing design).Also, I don’t seem to have a good layout structure, if I go this route I suspect I may need a more complex structure.
Here’s the layout, or the way the layout should work if we started from scratch:
#Start Form #start section 1
Heading
Col 1 Col 2
Heading
Col 1 Cols 2 #end section 1 #start section 2
heading
row #end section 2 #start section 3
heading
col 1 col 2
heading
col 1 col 2
heading
row
End Form
General or specific advice welcome. I think I’m at the stage of “I don’t know what I don’t know”.
This is truly something you should be either hiring someone to do (here or elsewhere) or you can check some of the online form designers out there already such as Machform https://www.machform.com or Jotforms https://www.jotforms.com which have fees yearly, or even Google Forms which I believe you can do something with them free, but I don’t know what the limitations are, I don’t use it I use Machform.
Asking someone to help you build a form in here though is just a bit above our paygrade since we’re all volunteers or users.
Having said all that, if you are interested in hiring someone to help you build it, you may want to post that in the Webdesign Help forum.
I disagree completely. I’m basically asking how to wrap specific sections of an existing form in a div. That’s a technical operational question, not a design a form from scratch. i’ve already had the form designed from scratch, by a paid pro (who’s now back in school and unavailable). And the next designer starts next week, at which point they’ll be some weeks figuring it out themselves, though I expect they’ll have the same problem we already have.
You should be able to drag a div into you form and then drag the contents you want to place into it.
If that doesn’t work you’ll need to be more specific on what it is you’re trying to put into the div, or drop the div onto. Showing the code would probably be simpler, or even simpler if you can put a link to the uploaded page so people can see exactly what it is you’re trying to do.
My apologies if I misunderstood your post, but your words do make it sound like a large cry for help lol. No offense meant at all.
We solved this, my dev got playing around with the online demo version.
You should be able to drag a div into you form and then drag the contents you want to place into it.
here’s the non-intuitive user problem. You can’t easily add Divs into the gui/main panel. Drag a div into the main panel, and it disappears from view. You can see it in the HTML panel, but that HTML isn’t editable in that panel.
The solution: Drag the div into the OUTLINE panel in the bottom left of the screen. In there you can easily drop div’s inside forms, or columns or rows, or above them, or below them. Dead simple once you know you can add/edit inside the outline panel.
tl;dr HTML panel not editable, but the outline panel IS editable.
I know that seem obvious, but I think it’s obvious to experienced users and it’s one of those things that casual users are likely to struggle with. Note that in the responses, nobody actually told me to use the outline panel not the main ui panel (not complaining, I appreciate the help. Just pointing out that it’s ‘so obvious’ that it almost doesn’t bear stating).
Hmm, I’m not quite sure what you’re calling the GUI/Main Panel.
I’m gonna go on a limb here and figure that the reason no one told you to use the Outline panel, is because there isn’t one. The panel you would use to drop the elements into is the Overview. Drop the Form element onto the Body, then the Div onto the Form and so on.
You won’t see anything and yes it seems like it disappears but that’s because there isn’t any content in it yet. Once you start adding the Form elements into it you will start seeing them. Use the Design panel and you’ll find it much easier than trying to drag things onto the Preview Window.
