My Groovy Form Stylin for FormBuilder

[Simon66]

I have been using this as my standard contact form styling, and I thought I'd share it if anyone is interested.

Originally I was using these forms http://www.appnitro.com/. They look fantastic and are a breeze to use, but at $40 a go it wasn't feasible for low-end, low-cost sites. So I wrapped my head round FormBuilder and created a reusable stylesheet to go with it.
This is how the form looks:


And the submitted page:


The zip file with images, css and instructions can be downloaded here:
http://www.conceptfactory.com.au/CMSMS/StyleContactForms.zip

Hope it helps
Simon66

[Dr.CSS]

Thank You Simon66...

[viebig]

really nice, ty very much!

[tannos]

Great work.
pretty css

[billandsonia]

Very nice! I'm eager to apply your css to a more complex form I have. It really looks great.

[antonylast]

Fantastic work Simon66.

Just one question - I've followed your instructions to the letter, any idea why the initial form has a grey background but the 'thank you' / 'form submitted' page doesn't?!

I've attached screens. Thanks.

[libralion]

Hi Simon66,
It looks great. I installed it like you wrote.
The only thing I don't understand is when you write:
"Add your email address in the 'UPDATE THIS FIELD' field." Where is that? Do you mean to fill in your email address where it says Email results at the top? I have that.
My next question is: do I also have to add a class to the Contact Fieldset and the Contact Fieldset End? I didnot do that. But even if I fill in the class there also it isn't going well.
The result is this:
http://www.jomedio.nl/cmsmadesimple/index.php?page=contact
Why is the Contact name at the bottom?
Then the next issue is: when I fill in the form, it is send, but I don't get the "Thank you note at the top with the possibility to print and the print icon. Why?
Also the text I fill in in the textarea isnot in the submitted form. Also not in the email I get of the form.
The page "Email send" appears to be correct, with the header in its place, but like Antony mentioned with a white background.

I love the layout, so I hope you can figure out why all of this is happening.

Johanna

[Dr.CSS]

OK first @antonylast...

To get the same look in both pages you will need to have Form Sent or whatever you want here, to have the green background before any info wanted inside the gray box with border...

Then at the bottom after all other info   as fieldset is most likely what is used for the border and background call, I haven't looked at the CSS...

@libralion

1) Yes you need to add the address it will be sent to, while in this part go to advanced if you look at the template (it's a sample) in the box on the left you will notice it doesn't have as many/or the same field calls as your form but the right side box has the field names and the smarty call tag for each one of your fields, you can either use these tags in the template or at the bottom right is a pair of buttons to generate the email template hit one of those to auto generate it...

HINT: if you want a styled HTML email copy the top part of the sample template to retain some style calls to paste into the top of your newly generated template...

2) You need to move the start of the fieldset to the top of you form, using the blue up arrow, along with the legend, if you look at the source of your page you will see "Contact

       
    "

The fieldset gets the border and grey background and legend gets the border, green background, and image...

[libralion]

Hi Mark,
I moved the fieldset up and that is on top now. But why do I have a black rectangle on top and at the bottom?
http://www.jomedio.nl/cmsmadesimple/index.php?page=contact
Then as far as the color of the email send, I added the color tag as you described, but that doesnot work. It only shows the letters of the the color tag.And I still don't understand why the text in the textarea is not written in the email send form as well as in the the email form I get. The normal formbuilder form I used did include the text of the textarea.

Johanna

[Dr.CSS]

Is your last field the end fieldset?...

[libralion]

Is your last field the end fieldset?...

Yes that is the last field. It looks like the rectangle should be around all the info and now is on top and at the bottom of it.
I use the Form Template with the titles on top.

[libralion]

I started all over with a new form and entered only the things Simon wrote and now it works better. But I can't get the Contact button in green at the top. The rest works; also the message in the textarea etc.
http://www.jomedio.nl/cmsmadesimple/index.php?page=groovy

[libralion]

I found out that if I use the default template in Formbuilder my form is displayed ok.
See: http://www.jomedio.nl/cmsmadesimple/index.php?page=contact
The only thing remaining is that it doesnot send the text entered in the textarea.
My other form does do that, but hasd a problem with the button at the top. That isnot showing.
http://www.jomedio.nl/cmsmadesimple/index.php?page=groovy

[libralion]

Ok all works now. The solution was also to use the default template and for text to appear in the results I generated the sample html template under the submission template again and now it works.
I love the hover!

Johanna

[TFcroft4]

Thanks.

This contribution solved a lot of problems I was having with form layouts and styles.

The export to XML and re-import will help in creating a new form once you have one styled to your liking.

TF