I have been reading the rather poorly written Formloom documentation and cannot find anything about how to format the forms. With ‘format’ I mean: setting margins, centering fields, adding a heading, etc.
I did find something about formatting EMAIL in the template setting, but I am looking to format the FORM itself (the webform, the form that will appear in the RW site).
See the screenshot: My form now has the first field sticking to the top of the screen and all fields starting way too close to the left of the screen. How can I fix that? How can I have these fields start further to the right? How do I add a logo and a header? Any Formloom formatting tips are welcome!
You can add Custom CSS, PHP and JavaScript:
You can change Colors and Grid Padding and Grid Gap:
Every Formloom item(field) has a Grid Width:
There is also an empty spacer item:
And I think most users use the FormLoom Helper Stack (turn off the theme):
Honestly I’m no expert on styled text (What FormLoom uses for headings).
Not sure how you did that?
If you want to use the FormLoom headers and you set it to say an h1 then you could add some CSS to add margin center the text:
h1 {
text-align:center;
}
or
h1 {
margin-left:50px;
}
I would use the stacks helper.
build the base form with FormLoom. (input fields, no header or footer)
Turn of the theme on the FormLoom page, also hide it from navigation
make a regular stacks page for the form.
add your standard headings (Navigation if you are using a framework like Foundry or Foundation)
Add the FormLoom helper stack to the stacks page and point it to the hidden formLoom page.
Now that gives you the flexibility of stacks for formatting, but you have to publish to see it. You have to publish to test forms anyway so it’s not a big deal for me.
Wow, so all of that is possible? Cool, then I think I can make the forms really integrate with my RW/Foundry site! That’s great news, but I am not sure yes as, if you don’t mind, I would need advice on two of the above steps you set out…
ad 2: How do you hide it from navigation?
ad 5-1: How do I add the Formloom helper stack to my regular RW/stacks page?
ad 5-2: By ‘pointing it to’ do you mean ‘within the Formloom helper stack add a link to the actual form’? If so, will the visitor be taken to a different page that does not look like my RW site?
THANKS AGAIN FOR ALL YOUR ADVICE. I was already beginning to think I had paid $50 for an add-on that was way over my head (whereas with your tips I might actually turn it into a useful purchase).
Page inspector there’s a checkbox for show in navigation.
It’s a stack that comes with FormLoom. Just place it on the stacks page where you want the form to be.
The helper stack is pretty simple. Other than the standard settings like background and margins, there’s a simple link that you point to the page that the contains the FormLoom page you want “inserted” into the stacks page.
Thank you Doug, I am going to try this now. One issue: in my RW project I cannot find the Helper Stack anywhere! I searched all my stacks under ‘Formloom’, ‘Helper’, and ‘Form’ but nothing comes up.
I have been using FL 4 the exact way that Teefers says.
I create my forms in a FormLoom page. I create a Stacks page and place the FormLoom Helper stack in it where I want the form to show. This allows me to use the Stacks page to set up the page the way I want and the FL form will just be placed where I tell it to.
The big thing you need to do - as Teefers said - is to make sure the FormLoom form is set to use no theme. It is in the FormLoom settings - on the first page of the settings at the top you will see “No Theme”. That must be checked.
Perhaps you will need more info, or perhaps this is more a question for @teefers but this is the issue…
I set a rule for a form item to be shown when the answer to another form item is "OTHER”. Yet, when choosing that answer “OTHER”, the new form item is not shown. What am I doing wrong?
