cforms II User Forum

Registration is currently disabled.
Guest

FAQs

Login form protected by Login LockDown.


Lost password?
Advanced Search

— Forum Scope —

  

— Match —

   

— Forum Options —

    

Wildcard usage:
*  matches any number of characters    %  matches exactly one character

Minimum search word length is 4 characters - maximum search word length is 84 characters

Topic RSS
Use different styles for different forms
January 23, 2009
5:06 pm
Webminic
Guest

I have 2 forms, 1 in the main section of my web, and other in a slidebar. (Wordpress 2.7 and latest cformsII)

For the first form I need this CSS:

.cform {
    margin:10px auto 0 auto;
    width: 410px;
}

AND FOR THE SECOND this other CSS:

.cform {
    margin:5px auto 0 auto;
    width: 270px;
}

Anybody have the solution / same problem?

Thank you!

January 24, 2009
3:49 pm
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

The solution is in the FAQ:

#ID-OF-YOUR-OTHER-FORM {
    margin:5px auto 0 auto;
    width: 270px;
}
March 18, 2009
5:05 am
nedrom
Guest

The FAQ is not clear.  I should be able to pick a style per form.  So for sidebar forms I can pick the sidebar css.

March 18, 2009
12:35 pm
Guest

See html code of your page (with cforms form), every form has it's own ID in tag <form

  • form ID#1 <form id="cformsform"
  • form  ID#2 <form id="cforms2form"
  • form  ID#3 <form id="cforms3form"
  • etc

Use in css file the IDs to overwrite some styles for different forms, example:

  • #cformsform .cforms   { width:200px; }
  • #cforms2form .cforms   { width:500px; }
  • #cforms3form  textarea { background: Red; }

etc

All style rules [for all forms] are inside ONE css file.

March 19, 2009
5:55 pm
Guest

Hello,

I did like it says here to create to forms. But I can't put it in my side bar. The cfrom widget display the wrong form.

Does anybody can help me on this.

Thanks.

March 26, 2009
7:04 am
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

this is likely your due to your wp theme that incorrectly uses the WP's sidebar functions to register the widgets.

this has been covered already in another thread

March 31, 2009
8:50 pm
Jenn
Guest

Please give the name of the thread that covers this.  I have been looking to find out why my widgetized sidebar is only displaying the default form and this forum is sending me in circles. Thanks

April 1, 2009
6:42 pm
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline
February 21, 2010
12:00 pm
Rita
Guest

Oliver, I tried this solution. It doesn't work for forms that use completely different layout -- like the sidebar form and the "contact us page" wide form. Even though all css definitions are marked for the FORM#2 with #cforms2form, the FORM#2 still uses the main layout for .CFORM, LABEL, and FIELDSET. And because of it the FORM#2 lookes like a disaster.

I am going to leave it as it is for a couple of days, in case you are curious to see it.

http://www.balloondecorationstm.com/contact-us/

February 22, 2010
8:23 am
Guest

Rita said:

Oliver, I tried this solution. It doesn't work for forms that use completely different layout -- like the sidebar form and the "contact us page" wide form. Even though all css definitions are marked for the FORM#2 with #cforms2form, the FORM#2 still uses the main layout for .CFORM, LABEL, and FIELDSET. And because of it the FORM#2 lookes like a disaster.

I am going to leave it as it is for a couple of days, in case you are curious to see it.

http://www.balloondecorationst…..ontact-us/

I'm learning this as well so I don't have the complete answer but only a suggestion.

It looks like you took the sidebar-layout.css as your main css file and copied in the wide form css that becomes your cforms2form code.

You may want to reverse that and select another css file as your main one and copy in the code from the sidebar-layout.css

The reason for this is that you'll probably only have one sidebar form but you may have several wide forms.

With your current implementation, that means the sidebar is the default. If you create another wide form, you'll have to label that with cforms4 and another one as cforms5.

On the other hand, if you make the wide form the default one, all you have to do is label the sidebar css once. Then all of your other wide forms won't have to be labeled.

February 22, 2010
3:39 pm
Guest

Hello. Ok to start off… I've read the FAQ section on how to implement different CSS styles for different forms… I've also read a few threads here and there.

Bottom line… I cannot seem to get the different style for form 2 to work. I am using two forms, a sidebar form and a contact form. Contact form is the default form and the sidebar form has the id="cforms2form"
(this is obtained by checking the HTML source of the page on which the form is placed.)

So I went into wordpress admin > Plug-in Editor > Selected CForms > Selected sidebary-layout.css file to edit > and modified the fields I wanted to modify as stated in the FAQ file: ex:

#cforms2form fieldset {
background:green;
}

This was placed ontop of the default value (style) in the css file.

Save (update settings)… Refresh page… nothing changes.

Is there something that I may be overlooking? Can someone who has actually managed to implement 2 different styles for 2 different forms provide us with a STEP by STEP walk through perhaps? I may have overlooked something while at the same doubting that I have… So any help would be appreciated.

It seems this question is being asked over and over again. If someone manages to help me solve this issue I will write a detailed STEP by STEP walk through for others to use in the future.

Thanks for your help.:cool:

February 24, 2010
12:44 am
Rita
Guest

DavidY said:

Rita said:

Oliver, I tried this solution. It doesn't work for forms that use completely different layout -- like the sidebar form and the "contact us page" wide form. Even though all css definitions are marked for the FORM#2 with #cforms2form, the FORM#2 still uses the main layout for .CFORM, LABEL, and FIELDSET. And because of it the FORM#2 lookes like a disaster.

I am going to leave it as it is for a couple of days, in case you are curious to see it.

http://www.balloondecorationst…..ontact-us/

I'm learning this as well so I don't have the complete answer but only a suggestion.

It looks like you took the sidebar-layout.css as your main css file and copied in the wide form css that becomes your cforms2form code.

You may want to reverse that and select another css file as your main one and copy in the code from the sidebar-layout.css

The reason for this is that you'll probably only have one sidebar form but you may have several wide forms.

With your current implementation, that means the sidebar is the default. If you create another wide form, you'll have to label that with cforms4 and another one as cforms5.

On the other hand, if you make the wide form the default one, all you have to do is label the sidebar css once. Then all of your other wide forms won't have to be labeled.

Thank you for your reply, David.

The reason I made the sidebar form our main form is because it's the most important form for us which would be displayed on every page. We cannot afford anything to go wrong with this form.

The contact page (wide) form is secondary in that sense. And if I am forced to choose which form to "sacrifice" that would be the one.

It would be nice, though, if I didn't have to sacrifice anything :)

March 22, 2010
11:21 pm
jkirker
Guest

Has anybody had any luck with this?

Anything?  Bueller, Bueller, Bueller….

Need a solution "fast"… ;(

John

May 3, 2010
4:51 pm
Unka
Guest

Is CFORM secure? i may be mistaken, but it looks like our site was hacked though this form. I am concerned.

May 3, 2010
5:13 pm
Paul
Amsterdam, NL
Moderator
Forum Posts: 421
Member Since:
February 10, 2009
Offline

hi!

quite secure.

but still any software, plugin or cms system (especially Wordpress) can be hacked it just depends on how much time you are willing to invest as an evil spirited person….

P.

* Paul Silter
May 4, 2010
12:34 am
Unka
Guest

Thank you for replying. I guess, more specific question would be: can an evil deed be achieved by entering html/script code into a form's comment field and ?

August 23, 2010
8:09 pm
Ed Alexander
Guest

sonika said:

See html code of your page (with cforms form), every form has it's own ID in tag <form

  • form ID#1 <form id="cformsform"
  • form  ID#2 <form id="cforms2form"
  • form  ID#3 <form id="cforms3form"
  • etc

Use in css file the IDs to overwrite some styles for different forms, example:

  • #cformsform .cforms   { width:200px; }
  • #cforms2form .cforms   { width:500px; }
  • #cforms3form  textarea { background: Red; }

etc

All style rules [for all forms] are inside ONE css file.


This example might be helpful as well.  The scenario is that I have created a custom background image for 2 separate forms.  One of the forms is much longer than the other so I need the CSS to display a different background image for each of the forms. 

 

CSS for form 1

.cform fieldset.cf-fs1

CSS for form 2

#cforms2form.cform fieldset.cf-fs1

 

What the CSS for form 2 shows is that I am taking the div for form 2 and adding it in front of the class for form 1.  So now whatever background image URL I add for the #cforms2form div will only apply to the form 2 div.

 

The same principle would apply for all the other CSS classes / styles contained in whichever cforms CSS sheet you are modifying / adding too.

 

Ed

BulletProof Security Plugin

September 1, 2010
6:42 am
Guest

I have the same problem as OP.

And I am not a coder.

is there any way to assign styles to each form without messing with the code?

 

SOS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

October 8, 2010
11:01 am
adskiremote
Guest

I was trying to do the same thing…two forms…one as the contact form on a page and the other a newsletter subscription on the widget sidebar.

 

I've worked out how to do this pretty easily…and it doesn't matter how many forms you have!

 

I hop these instructions make sense please let me know if not.

 

OK I have two forms with names: enquiry-form  and  newsletter-form

 

I have chosen the minimal.css style as the one I want which sets both forms to the same style.

 

I used the default minimal.css style for my enquiry-form and just modified it a bit to suit my needs.  So I edited sections such as…..

 

.cform {
        margin:10px auto 0 auto;
        width: 650px;
    }

 

and this….

 

.cform label span {
        /* width:90px; */ /* must be the same as above!*/
        display:block;
        text-align: right;
    }

 

So that works great for my enquiry-form on my contact page.

 

Now to style the newsletter subscription form on the widget.

 

As I mentioned I called this newsletter-form so I style this using the minimal.css settings as a guide…(all these must be inside the minimal.css styling page.

 

.cform.newsletter-form {
        margin: 2px auto 0 auto;
        width: 200px;
        }

 

.cform.newsletter-form label span {

        /* width:90px; */ /* must be the same as above!*/

        display:block;

        text-align: right;

    }

 

So now my widget is styled differently…here's an example of the input boxes…

 

.cform.newsletter-form input[type="text"] {
    padding: 3px;
    width: 26px;
    }

 

NOTE:  here I wanted to make sure my checkbox wasn't styled in the same way so I used the [type="text"] format.

 

So if you add more forms to your wordpress site eg: promotion-form….then you'd still style the minimal.css and add like this…

 

.cform.promotion-form {

        margin: 2px auto 0 auto;

        width: 200px;

        }

 

.cform.promotion-form label span {

        /* width:90px; */ /* must be the same as above!*/

        display:block;

        text-align: right;

    }

 

I hope this helps people out and a little contribution to thank Oliver for writing such a great plugin.

 

AdSkiRemote

October 8, 2010
11:34 am
adskiremote
Guest

If anyone is interested…if you want to create a newsletter subscription form but remove the form input labels just do this…

 

Form name:  newsletter-form

 

.cform.newsletter-form label {
        display:none; /*for mozilla*/
        display:none; /*for Opera & IE*/
        color: #aaa;
        font:0.9em Trebuchet MS,sans-serif;
    }
    .cform.newsletter-form label span {
        display:none;
        text-align: left;
    }

 

Hope that helps some others out again :-)

Forum Timezone: Europe/Berlin

Most Users Ever Online: 959

Currently Online:
28 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

tracedef: 43

mores: 21

Gyrus: 20

frozenwaste: 18

asuffredini: 15

photoworks: 14

Member Stats:

Guest Posters: 3760

Members: 1463

Moderators: 3

Admins: 2

Forum Stats:

Groups: 1

Forums: 4

Topics: 5358

Posts: 18738

Newest Members: juredujmovic, dreamkeeper, rajattyagi, wrokaa, lukass

Moderators: Paul (421), cnymike (8), sonika (95)

Administrators: Oliver (6400), Nicky (3)