DMXzone Bootstrap 3 Forms Designer Support Product Page


Building a form WITHIN a table with Bootstrap 3

Asked 21 Apr 2017 15:11:27
has this question
21 Apr 2017 15:11:27 Mark Baldwin posted:
I have purchased the Bootstrap 3 Dynamic Form Generator 2 & the DMXzone Bootstrap 3 Forms Designer extensions and am having trouble learning how to design a form WITHIN a table. what videos will assist me in this?

I am re-building the web form/database my employer uses and would like to retain a table form so that I can display entries below the form, while keeping the page shorter. The bootstrap form ends up being a full page in length with all the fields we need if using the form generator.


Replied 21 Apr 2017 15:13:53
21 Apr 2017 15:13:53 Mark Baldwin replied:
Here is what I am trying to achieve. this was all built with standard Dreamweaver (V5.0), no extensions.
Replied 21 Apr 2017 15:26:23
21 Apr 2017 15:26:23 Teodor Kuduschiev replied:
Hello Mark,
I am not sure i understand your idea ...
Just add a bootstrap container with two rows - in the upper row add your form and in the one above it add your table. No need to add form inside a table.
Replied 21 Apr 2017 15:36:22
21 Apr 2017 15:36:22 Mark Baldwin replied:
I'm not an advanced user (closer to beginner), so I apologize if the question seems odd.

I understand how to generate a form from the Bootstrap 3 Dynamic Form Generator 2. I get that to work, no problem. I do not understand the steps after a table is created, how to get the form elements manually into the table. All my attempts have failed so far. so I thought if I had some step by step sequence of videos to follow in the right order I could understand better how to get it to work.

Thank you for taking the time to answer my questions
Replied 24 Apr 2017 07:32:57
24 Apr 2017 07:32:57 Teodor Kuduschiev replied:
What is the purpose of this action exactly?:

Quoteget the form elements manually into the table.

Replied 24 Apr 2017 11:02:13
24 Apr 2017 11:02:13 Mark Baldwin replied:
Let me re ask this question.

I have the DMXzone Bootstrap 3 Forms Designer. when I visit the DMXzone Bootstrap 3 Forms Designer video list, the only video that explains making forms there is one for Generating Insert Record Form from Bootstrap 3 Dynamic Form Generator 2 extension.

I need to manually make one, not automatically generate one, as the generator makes a vertical list and I would like to make one composed of 5 rows and 3 columns.

Is there a video or a collection of videos explaining the steps for DMXzone Bootstrap 3 Forms Designer specifically?
Replied 24 Apr 2017 12:01:32
24 Apr 2017 12:01:32 Teodor Kuduschiev replied:
I know understand what do you mean. But still, you do not need to use a table layout, with bootstrap 3 you can just design a container with several rows/columns. Table layouts are no longer used, especially in responsive webdesign ...

You could build your page layout, as you wish and then generate the form.
When the form is generated, just cut the opening and closing <form...> and </form> tags, and wrap your layout with them. After that just cut and move the inputs.
Replied 25 Apr 2017 01:30:19
25 Apr 2017 01:30:19 Mark Baldwin replied:
Is this what I need to create containers with several rows/columns?

I am not skilled enough yet to cut and paste code, that is the reason why I have asked for step by step videos to explain.
Replied 25 Apr 2017 06:29:38
25 Apr 2017 06:29:38 Teodor Kuduschiev replied:
There are no step by step videos, as this is not how you are supposed to use the product. The form generator just generates the form, it does not include any additional modifications. If you are not skilled enough i do not recommend altering the generated code.
Replied 25 Apr 2017 11:50:31
25 Apr 2017 11:50:31 Mark Baldwin replied:
I'm not asking about the form Generator. I am asking about the form Designer, that is why I asked in the DMXzone Bootstrap 3 Forms Designer Support area.

Is the form Designer not supposed to allow you to Design your own form?

If not, then what does it allow me Design?
Replied 25 Apr 2017 12:05:59
25 Apr 2017 12:05:59 Teodor Kuduschiev replied:
Using the form designer you can design your own form of course. What you need requires additional knowledge, as i explained in 2 posts above - to cut and move the form code ....
Replied 25 Apr 2017 13:01:59
25 Apr 2017 13:01:59 Mark Baldwin replied:
Is there the possibility that I may request a generic video be made to illustrate the creation of a form being made via Bootstrap 3 Forms Designer like that of the one available for the Dynamic Form Generator 2.

I am very capable of creating the form via the generator, the instructions for that are obvious and easy to follow but are difficult for my skill level to translate into use for creating our own. I am not trying to be mean but it very frustrating that the Generator has videos showing how to make a form but the designer does not. Yes I see the assorted videos available in the Designer summary but these address the Generator, not the Designer.

I am attempting to create a form like this

I know the Bootstrap 3 can do this layout. I know it is not that difficult. I just do not know the path yet.
Replied 25 Apr 2017 13:11:37
25 Apr 2017 13:11:37 Teodor Kuduschiev replied:
There are plenty of videos showing how to create form using the bootstrap 3 forms designer, which are not related to the form generator:
And as explained already, you can build your layout using bootstrap 3 - 6 rows with the number of columns in each row, as shown on the screenshot.
Then wrap this layout in the form tag and cut/paste each field in each column ....
Replied 25 Apr 2017 13:25:38
25 Apr 2017 13:25:38 Mark Baldwin replied:
What about adding a div or container beside one another so I can mimic a table. could you point me to a video for that? I am likely asking that incorrectly. Hopefully you understand where I am going with this. Maybe I can make the layout and add the form fields into it.

With Dreamweaver v5.5 I had this all down. Switching to the DMXZone extensions is a steep learning curve, so I apologize if I am sounding or being difficult. I am also new to Bootstrap so I am in deep two fold.
Replied 25 Apr 2017 13:28:11
25 Apr 2017 13:28:11 Mark Baldwin replied:
looks like you edited before I could hit enter on my reply.

Please point me to videos to accomplish this

Quoteyou can build your layout using bootstrap 3 - 6 rows with the number of columns in each row, as shown on the screenshot.
Then wrap this layout in the form tag and cut/paste each field in each column ....

Replied 25 Apr 2017 13:31:36
25 Apr 2017 13:31:36 Teodor Kuduschiev replied:
Which part of this in unclear?
You can check the bootstrap 3 extension manual and add the rows and columns you need using the easy to use UI.
Nowadays nobody uses tables for forms, as you mention this was in CS5.5
Replied 25 Apr 2017 13:35:11
25 Apr 2017 13:35:11 Mark Baldwin replied:
I am at work and did not bring my laptop with Dreamweaver on it. I will go watch some videos on this and give you a break untill tomorrow, LOL
Replied 26 Apr 2017 02:07:05
26 Apr 2017 02:07:05 Mark Baldwin replied:
Pays to be persistent. I have the form setup and entering data into the mysql table (but the page is not redirecting or resetting yet, I will learn that soon).

I have a small layout issue I am not sure how to fix. All design views look great except for Medium Device view (see picture)

Where should I look to correct this?
Replied 26 Apr 2017 05:47:59
26 Apr 2017 05:47:59 Teodor Kuduschiev replied:
In order to reset/redirect - you must use the onsuccess events and add these behaviors there:

AS for medium screens, make sure to use the same ui, to adjust the columns widths for selected screen size.
Replied 26 Apr 2017 11:34:43
26 Apr 2017 11:34:43 Mark Baldwin replied:
Thank you for the links....

So to adjust the Small screen I switch to Small screen preview
To adjust the Medium screens I switch to Medium preview etc etc etc ??

I will try this out.

Reply to this topic