My Groovy Form Stylin for FormBuilder
My Groovy Form Stylin for FormBuilder
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
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
Last edited by Simon66 on Tue Aug 05, 2008 7:30 am, edited 1 time in total.
A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
This must be Thursday. I never could get the hang of Thursdays.
Douglas Adams - The only sane person in the asylum.
This must be Thursday. I never could get the hang of Thursdays.
Douglas Adams - The only sane person in the asylum.
Re: My Groovy Form Stylin for FormBuilder
Thank You Simon66...
Re: My Groovy Form Stylin for FormBuilder
Great work.
pretty css
pretty css
One thing only I know, and that is that I know nothing.
-
- Forum Members
- Posts: 13
- Joined: Mon Apr 21, 2008 5:40 pm
Re: My Groovy Form Stylin for FormBuilder
Very nice! I'm eager to apply your css to a more complex form I have. It really looks great.
Re: My Groovy Form Stylin for FormBuilder
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.
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.
Re: My Groovy Form Stylin for FormBuilder
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
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
Last edited by libralion on Mon Jul 28, 2008 9:19 am, edited 1 time in total.
Re: My Groovy Form Stylin for FormBuilder
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...
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...
Re: My Groovy Form Stylin for FormBuilder
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
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
Re: My Groovy Form Stylin for FormBuilder
Is your last field the end fieldset?...
Re: My Groovy Form Stylin for FormBuilder
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.mark wrote: Is your last field the end fieldset?...
I use the Form Template with the titles on top.
Re: My Groovy Form Stylin for FormBuilder
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
http://www.jomedio.nl/cmsmadesimple/index.php?page=groovy
Re: My Groovy Form Stylin for FormBuilder
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
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
Re: My Groovy Form Stylin for FormBuilder
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
I love the hover!
Johanna
Re: My Groovy Form Stylin for FormBuilder
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
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