How does one do form formatting in Formloom 4?

[Jimmy (Jim)]

Dear Formloom experts,

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!

Thanks!

Jimmy

[teefers (Doug Bennett)]

Most of the styling(padding, margins, etc) with FormLoom would be left up to the Theme you are using.

You can add a Header and Footer:

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):

[Jimmy (Jim)]

That should get me going Doug! Thank you very much.

[Jimmy (Jim)]

Hi Doug,

With your great input I am making some headway but I would like to ask you some more questions please:

1. How do I get the header to move to the right? I did it for the regular fields but can’t do it for the header. See this screenshot please…

2. How do I make the header font bigger?

3. How do I add a logo?

Thank you so much!

Jimmy

[Jimmy (Jim)]

Please ignore my second question: Those heading settings DO influence the size - it just isn’t shown in the edit area, like in a regular RW stack.

[teefers (Doug Bennett)]

Honestly I’m no expert on styled text (What FormLoom uses for headings).

@Jimmy

I did it for the regular fields but can’t do it for the header.

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.

1. build the base form with FormLoom. (input fields, no header or footer)
2. Turn of the theme on the FormLoom page, also hide it from navigation
3. make a regular stacks page for the form.
4. add your standard headings (Navigation if you are using a framework like Foundry or Foundation)
5. 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.

[Jimmy (Jim)]

@teefers

I would use the stacks helper.

1. build the base form with FormLoom. (input fields, no header or footer)
2. Turn of the theme on the FormLoom page, also hide it from navigation
3. make a regular stacks page for the form.
4. add your standard headings (Navigation if you are using a framework like Foundry or Foundation)
5. 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).

[teefers (Doug Bennett)]

@Jimmy

How do you hide it from navigation?

Page inspector there’s a checkbox for show in navigation.

@Jimmy

How do I add the Formloom helper stack to my regular RW/stacks page?

It’s a stack that comes with FormLoom. Just place it on the stacks page where you want the form to be.

@Jimmy

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?

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.

[Jimmy (Jim)]

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.

What am I missing here?

[teefers (Doug Bennett)]

There is a download for it on the main FormLoom product page.

[Jimmy (Jim)]

Thank you kind sir!

[sykomac (Paul Ricci)]

Jim,

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.

Paul

[Jimmy (Jim)]

Thank you Paul. Sounds very good. If I cannot pull it off, can I ask you for advice?

[sykomac (Paul Ricci)]

Sure. Be glad to help if I can

Paul

[Jimmy (Jim)]

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?

[teefers (Doug Bennett)]

@Jimmy

I set a rule for a form item to be shown when the answer to another form item is "OTHER”.

What kind of field is the field “OTHER”? Is it a radio button, or Select menu?

Maybe some screenshots would help.

[Jimmy (Jim)]

The 'OTHER" is an option in a Select Menu form item. See the four screenshots please. Thanks!!

[teefers (Doug Bennett)]

Looks like you have “OTHER” returning a value of 100, so change the rule to look for 100, not “OTHER”.

[Jimmy (Jim)]

Aha, so that’s what those values are there for! I thought they were for sorting the data in MySQL or something like that.

Awesome, I got it to work now. Both the My helper Stack and this Rule. You rule! Thank you so much.

[Jimmy (Jim)]

Hi Doug,

May I pick your brain for a minute please? I am trying to import a list of countries into my Formloom Radio Menu form item but am not succeeding.

This is what I did and what happened…

1. I click on Import Options…

2. I choose my sample Excel file.

Unfortunately, nothing happens. The options space remains blank…

3. Instead, I re-click Import Options and now choose my sample CSV file…

Now the Options Space get filled with EMPTY options, NOT with the sample countries.

Any idea what I am doing wrong?

Thank you very much, once again,

Jim

PS: Do you perhaps know where one can find standard lists (of countries, cities, etc) for forms such as Formloom?