Layout of form changes from Form...

User 2659348 Photo


Registered User
119 posts

Eric, this issue is that Quantity, Item Name, Size, & Stain/Paint should all be in the same row - not 2 separate rows. I have those elements on here 3 times, and I wanted that to take up 3 rows - they are taking up 6 rows instead.

The Quantity field doesn't have to be that long since it will probably only hold one number as it's entry. I have set the "Max length" on these elements (which I'm assuming is max characters I want to be entered), I've messed with the margins & padding, and as I mentioned.... it looks great in the Form Builder. But the divs or containers expand their width when it shows up on my site, causing only 2 elements to be displayed per row instead of all 4.

Maybe I'm missing something. Thanks for your help. I"m stuck until I can figure this out.
Knowing is half the battle
User 187934 Photo


Senior Advisor
20,271 posts

I would try this again and save as a new form for testing.
Gunsmoke wrote:
Under 'Properties' for each item you have on a line, set the 'Width' to 25% and all 4 items will fit on one line. Do this in the WFB. Any CSS changes you make outside the program will be overwritten if you ever change the form and re-publish.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2147626 Photo


Ambassador
2,958 posts

Described like that, Eric, he may have a CSS conflict eh? Maybe the WFB css is being overwritten? Like I know what I'm talking about... :P
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 271657 Photo


Ambassador
3,816 posts

Is this a responsive template on a static site?
Since the site is not responsive, maybe make the form a it wider and make sure it's not a responsive template?

Described like that, Eric, he may have a CSS conflict eh? Maybe the WFB css is being overwritten? Like I know what I'm talking about... :P

Why are there 5 Doctype declarations on the page? Might want to validate the HTML/CSS and get rid of any problem code.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2659348 Photo


Registered User
119 posts

Paintbrush, I'm not sure why the 5 Doctypes. I'm not a web guy and I just designed my site the only way I knew how (which was - barely).

As far as "responsive" or not - I just opened the WFB and started a form, so I don't know. I did notice in the WFB default.css that there are rules for that ...and for "large" & "small" modes on the input boxes, which I didn't see an option for in the WFB.
But, I did set the entire form width in the Form Options in the WFB so that it would be sized properly for the content div I have on that page of my site and that came out fine. It's just these Element widths giving me trouble.

I tried to make a new form and set each element to 25% (as Gunsmoke suggested) so they would all stay on the same line. It didn't work. Just like it didn't work when I had them set to %'s that equaled 98%. Maybe I have a conflict? I have no clue.

Here's what I want to be able to do: I just want to be able to set individual boxes to whatever size I want. Since the css is made up of SO many rules that cover all of the boxes, when I try to change the size of one single, certain box, it changes ALL of the boxes of that same element type. I thought maybe I could make a separate rule for one box and have it override the main rule for that box, but I get confused on how I would do that (again.... I built my site, literally, one div & rule at a time - for that very reason and because it's the only way I can wrap my head around this and know that I can control individual items).

Since the WFB default css is made up of global rules, will I be able to make changes to one box (fb-input-box)? And if so, how would I do that?

Also... is this forum where I am supposed to be going for my "free support" after the purchase of the software? I just didn't want to be bothering in the wrong place.
Knowing is half the battle
User 187934 Photo


Senior Advisor
20,271 posts

Your page needs a lot of work as it has a lot of issues.
As piantbrush pointed out 5 doc types declared just for starters. Might want to get these errors corrected so we can help you get your form looking the way you want.:)
http://validator.w3.org/check?uri=http% … mp;group=0

I'm assuming your form should look like this.
http://development.thirteenpine.com/Ord … 13pine.php

Whether it's an html or php page they all follow some basic rules.
http://www.w3schools.com/html/html_layout.asp
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2659348 Photo


Registered User
119 posts

In the css, it says. /*Rules for the width of the item depending on the current mode used for width */
But in the WFB I don't see where I can choose a mode for width (as in : large, normal, small)

I'm sure there is something I'm doing wrong. I was using the free version. Then I got the paid version and notice stuff was "unlocked" (like the export function) so I just kept going. Should I have deleted the free version from my computer before I downloaded the paid version? I just didn't want to create my form all over again. But if that is where I messed up, then I'd rather re-create the entire form (and hopefully be able to "hand tweak every single aspect" as the Quick Start guide says I can) than to keep making us all confused as to what the problem might be.

When I use the WFB "preview" function, my form looks great. It's just when I put the exported files onto my site that it changes things around. It did this on the free version too I'm fine with the (fb-input-boxes) being a percent of that lines width, as long as they will all stay on the line I put them in.

A friend just told me how to type a style="width: whateverpx;" line in the html and that worked - except for the other 3 elements didn't jump back onto the same line. So I'm getting closer to figuring this out. Any further help is appreciated.
Knowing is half the battle
User 187934 Photo


Senior Advisor
20,271 posts

If you saved your form in the free version all you have to do is open it up in the paid version and you'll be all set as far as the form is concerned. I would get the page your placing it on in order first.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2659348 Photo


Registered User
119 posts

Well... because it's the only way I knew to do anything, my site is built with php pages that are nothing but links to "include" other stuff ---- like "<?php include ('content/order.html'); ?> ". That order.html page is the page where I paste the WFB code.

Then... I have to put the WFB php and the "file" FULL of stuff from WFB on my site somewhere so the form can work. And YOUR html has it's own Doctype and so on & so forth. That may be why you are seeing so many Doctypes. When I right-click in the browser & click "inspect element" and then click on all the arrows to open it up as wide as I know how, I only saw 2 Doctypes. So again, I'm not a web guy, but my site works and I'm not sure how you guys are seeing 5 (and now apparently 6) Doctypes. I don't even know what that means; I just know that each page I create needs to have that at the top (I guess).

As far as I know, the page I'm placing it on is in order. All my pages work as planned. I know that me paying for your software does not entitle me to "basic web design classes" from your company, but I don't know what else to say when I say that the page I'm pasting your code on only has ONE Doctype at the top.

Trust me, I'm as frustrated as you. For you guys, this may be like someone representing themselves Pro Se in court - you may be infuriated by my ignorance. But I got left alone by my webmaster-friend to do this site by myself and I'm actually pretty darn proud of what I've learned & accomplished - and that it works! And then, when I was essentially done, I simply found the BEST form builder in the world ( I DO believe that!) and was told that I could tweak it to my heart's content - only to find it VERY foreign looking with 'global css rules' all over the place (which is apparently beyond me) and i just followed the instructions I was given (I think).

As I said above, typing "style stuff" in the html has made some progress. I just now need to figure out how to make the other in-line elements react to that change and scoot over and get back up on the line they are supposed to be on. If the Doctype thing is a problem.... I don't see it on my end; which, is the end that the internet browsing person is also on (unless, it causes some drag in page load time or something, which I'm not experiencing). I'm sorry that I don't understand everything that you guys do. I have MUCH respect for all of you!

Maybe there should be a disclaimer in the sales pitch of the software that says, "hand tweak every single aspect (if you like) - but only if this is not your first time working with any code of any kind". I guess I thought I could figure it out since I learned/figured out ALL of the other stuff to make my site what it is. Turns out this "tweaking" is a little different than what I was used to seeing and I need a little more of an Elementary-School, step-by-step guide on how to change one element and still have everything work.
Knowing is half the battle
User 38401 Photo


Senior Advisor
10,951 posts

One thing to check also is what size of window are you using the program at? I know from my own exprience that it does matter on this program. If you're using the program at full screen then it distorts completely the width setup and you don't see it as it actually is being setup in the code. Apparently the program doesn't acknowledge how the window looks at full screen so when you see it as one row, it's going to show it as 2 on the website even though the program shows only 1 row.

Not sure if that's the situation for your form, but if you're using it at full screen I would try to put it back to the original window size it started at or similar to that so you can see the form correctly. It's a design flaw in the program even though Scott won't admit it *sticks out tongue at Scott*. Anyways, you cannot use this program in full screen window it must stay at the default that it opens at to accurately provide the view of the fields as they will be on the page when uploaded.

Hope that makes sense, and hope that's all it is for you too. Easy to correct :)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.