• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 17 posts ]  Go to page 1, 2  Next
Author Message
 Post subject: My Groovy Form Stylin for FormBuilder
PostPosted: Tue Jul 01, 2008 3:42 am 
Offline
Forum Members
Forum Members
User avatar

Joined: Wed Aug 29, 2007 4:36 am
Posts: 247
Location: Sydney Australia
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:
$1

And the submitted page:
$1

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

Hope it helps
Simon66

_________________
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.


Last edited by Simon66 on Tue Aug 05, 2008 7:30 am, edited 1 time in total.

Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: My Groovy Form Stylin for FormBuilder
PostPosted: Thu Jul 03, 2008 1:01 am 
Offline
Administrator
Administrator
User avatar

Joined: Thu Mar 09, 2006 5:32 am
Posts: 12672
Location: Arizona
Thank You Simon66...

_________________
Check ver. CMSMS, PHP, server OS, in System Information page.
Default content http://multiintech.com/defaultcontent/
People are Wonderful
Business is Great
Life is Terrific
Ever wonder what happened to the Album module? Well it is alive and well.
http://album.multiintech.com/
$1


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: My Groovy Form Stylin for FormBuilder
PostPosted: Thu Jul 03, 2008 2:24 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Mon Oct 08, 2007 12:56 pm
Posts: 640
Location: São Paulo, Brazil
really nice, ty very much!


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: My Groovy Form Stylin for FormBuilder
PostPosted: Thu Jul 03, 2008 6:35 am 
Offline
Forum Members
Forum Members
User avatar

Joined: Mon Apr 21, 2008 3:50 pm
Posts: 109
Location: France
Great work.
pretty css

_________________
One thing only I know, and that is that I know nothing.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: My Groovy Form Stylin for FormBuilder
PostPosted: Fri Jul 04, 2008 3:24 pm 
Offline
Forum Members
Forum Members

Joined: Mon Apr 21, 2008 5:40 pm
Posts: 13
Very nice! I'm eager to apply your css to a more complex form I have. It really looks great.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: My Groovy Form Stylin for FormBuilder
PostPosted: Sun Jul 27, 2008 6:41 pm 
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.


Attachments:
greyBox.gif
greyBox.gif [ 34.34 KiB | Viewed 5725 times ]
submitted.gif
submitted.gif [ 35.88 KiB | Viewed 5645 times ]
Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: My Groovy Form Stylin for FormBuilder
PostPosted: Mon Jul 28, 2008 9:17 am 
Offline
Forum Members
Forum Members
User avatar

Joined: Fri Jul 11, 2008 4:11 pm
Posts: 191
Location: The Netherlands
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


Last edited by libralion on Mon Jul 28, 2008 9:19 am, edited 1 time in total.

Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: My Groovy Form Stylin for FormBuilder
PostPosted: Mon Jul 28, 2008 10:40 am 
Offline
Administrator
Administrator
User avatar

Joined: Thu Mar 09, 2006 5:32 am
Posts: 12672
Location: Arizona


       
   
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...

_________________
Check ver. CMSMS, PHP, server OS, in System Information page.
Default content http://multiintech.com/defaultcontent/
People are Wonderful
Business is Great
Life is Terrific
Ever wonder what happened to the Album module? Well it is alive and well.
http://album.multiintech.com/
$1


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: My Groovy Form Stylin for FormBuilder
PostPosted: Mon Jul 28, 2008 11:35 am 
Offline
Forum Members
Forum Members
User avatar

Joined: Fri Jul 11, 2008 4:11 pm
Posts: 191
Location: The Netherlands
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: My Groovy Form Stylin for FormBuilder
PostPosted: Mon Jul 28, 2008 11:43 am 
Offline
Administrator
Administrator
User avatar

Joined: Thu Mar 09, 2006 5:32 am
Posts: 12672
Location: Arizona
Is your last field the end fieldset?...

_________________
Check ver. CMSMS, PHP, server OS, in System Information page.
Default content http://multiintech.com/defaultcontent/
People are Wonderful
Business is Great
Life is Terrific
Ever wonder what happened to the Album module? Well it is alive and well.
http://album.multiintech.com/
$1


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: My Groovy Form Stylin for FormBuilder
PostPosted: Mon Jul 28, 2008 11:48 am 
Offline
Forum Members
Forum Members
User avatar

Joined: Fri Jul 11, 2008 4:11 pm
Posts: 191
Location: The Netherlands
mark \mark:
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: My Groovy Form Stylin for FormBuilder
PostPosted: Mon Jul 28, 2008 1:29 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Fri Jul 11, 2008 4:11 pm
Posts: 191
Location: The Netherlands
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: My Groovy Form Stylin for FormBuilder
PostPosted: Mon Jul 28, 2008 1:49 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Fri Jul 11, 2008 4:11 pm
Posts: 191
Location: The Netherlands
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: My Groovy Form Stylin for FormBuilder
PostPosted: Mon Jul 28, 2008 2:11 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Fri Jul 11, 2008 4:11 pm
Posts: 191
Location: The Netherlands
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 ;D


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: My Groovy Form Stylin for FormBuilder
PostPosted: Sun Nov 02, 2008 1:15 pm 
Offline
Forum Members
Forum Members

Joined: Thu Nov 15, 2007 5:23 pm
Posts: 27
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 17 posts ]  Go to page 1, 2  Next

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting