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
Different Styling for Different Forms?
June 7, 2007
10:57 am
ian85
Guest

I was just wondering if this was possible…

I'm making a general announcement site for an apartment building for notices etc and I have 2 forms that i've created through the option menu: form1 and form2.

form1 is on a separate page called contacts and is a standard form (name, email, message field) for people to contact building management.

form2 is for Survey purposes, and only asks people to fill out stuff like name, apt #, Parking stall #, storage # and email address.

I want form2 to be on the sidebar using the sidebar-styling.css layout, but form1 to use the wide_form.css layout.

Is it possible to designate a unique style to each?

June 7, 2007
2:59 pm
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

Absolutely, the only minor drawback for the time being is, that you have to combine the two styles into one stylesheet.

Take theme (stylesheet) A and modify all global CSS to form specific CSS and then incorporate it into theme B.

This will apply Theme B's styles to all forms except the one form that you have chosen to refelct Theme A's CSS. Makes sense?

global CSS are styles that would apply to all forms, ie. .cform { …. or .cform fieldset    {…  

local (or form specific) would then look like: #cforms2form {… or #cforms2form  fieldset    {… accordingly.

 

June 28, 2007
6:11 am
Sarah
Guest

Is there anyway you could post more specifics on this or send me an
example of how the css would look after being modified to accomodate 2
styles? I'd like to do this, but I don't quite follow your steps.

Thanks a ton!

June 28, 2007
6:44 am
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

Sarah said:

Is there anyway you could post more specifics on this or send me an
example of how the css would look after being modified to accomodate 2
styles? I'd like to do this, but I don't quite follow your steps.

Thanks a ton!


Sarah, it's not that difficult, however it does require you to understand how CSS works. There are lots of great tutorials on the web explaining how styles/attributes are being used on a rather global level (e.g. for all elements: p { color:red; }) as well as down to a specific item on your web page (e.g.: #myelementID { color: black; }).

Also, please take a look at the CSS guide I posted in this forum! 

Here is what I recommend:

  1. Select a theme you'd like as the default look and feel
  2. Download Firefox & Firebug ("CSS developer extension")
  3. Use Firebug to "Inspect" the specific form you'd like to alter
  4. Make online changes to the specific element until you like it (these changes with Firebug are not permanent)
    e.g. select the enite form #3:
    #cforms3form  { ….
    and give it a new color, add: background: red;
  5. Once happy, note the changes to the element you'd like to keep
  6. Go to the built-in CSS editor and add the changes, e.g.
    #cforms3form  {background:red; }
  7. Save and reload.

If you don't know how to use Firebug, I'm sure the web offers some good documentation on it and while it's a great tool to speed up CSS development, of course you can do it without it just a as well (you could e.g. print out the source code of the page/form and look at all the elements it contains and start from there).

June 29, 2007
1:43 am
Sarah
Guest

Thanks for the advice – I'll do some more learning before attempting this :)

September 25, 2007
8:05 pm
John Crenshaw
Guest

Hmmm, I'm still a bit confused on this. I get the combining two styles bit, but what I'm confused on is, both forms are still referencing Style A in their HTML, so how do you go about changing the the styles within the form HTML itself of the form you want to change so that it refers to #cforms2form, for instance, instead of .cforms.

Maybe I'm missing something?

Thanks a lot!

September 25, 2007
9:51 pm
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

Every form tag has a unique ID: cformsform, cforms2form, cforms3form etc.

Let's assume you have 2 forms and are using the default Theme: cforms.css as the basis for both forms, but require some visual changes for form #2.

If you for instance would like change the color of the field labels for form #2, then addressing the fields of only form #2 is done by preceding the specific CSS with the respective form number, e.g:

#cforms2form label {
     color: red;
}

 

Note, that label will still keep everything set by:

.cform label { …. }

Hope this clarifies the process a bit. 

October 9, 2007
9:31 pm
Hobie
Guest

This has all been very helpful, but I must still be missing something simple.  I use wide_open_no_border.css for a detailed main page form.  All I want to do is shorten the width of the text box for use in the sidebar.  I tried modifiying the code as follows but I must not understand proper css syntax.  (I've tried a few variations too but apparently haven't guessed right.)  If you could give me a tip on this I'd greatly appreciate it.

Thanks! 

.cform textarea,
.cform input {
    width:370px;
}

.cform2 textarea,
.cform2 input {
    width:100px;
}

October 9, 2007
10:57 pm
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

Can you please share the URL(s) of your deployments. This will help the troubleshooting process.

October 10, 2007
12:57 am
Hobie
Guest

Of course, sorry.  http://www.shepherdcapitalpartners.com.  I don't currently have the sidebar form active because it looks crazy.

 

Thanks! 

October 10, 2007
7:27 am
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

Ok, so your main form is the Newsletter one, or with the ID of 'cformsform'. Now according to my post above your initial one (4 up) if you want to add additional styling that addresses only a second form (without changing the look and feel of the first) you need to use its unique ID to do so:

Assuming that it's the second (in your cforms config), then its unique ID = cforms2form , consequently:

#cforms2form textarea,
#cforms2form input {
width:100px;
}
October 12, 2007
8:43 pm
Hobie
Guest

Beautiful.  Thank you.  I figured I was missing something simple.

November 5, 2007
4:30 am
bamby
Guest

o_O I've done this…  though I don't know css at all…

Thank You! :) 

—— smth like this:——- 

#cforms2form textarea, #cforms2form input {width: 410px;}

#cforms2form input.sendbutton {width: 420px}

#cforms2form input.sendbutton {margin: 15px 10 10 20px;}

—————————--

November 13, 2007
7:09 pm
Anne
Guest

I'm embarrassed to say that my brain isn't wrapping around this either. All I really need to do is to make some general cosmetic changes for my cforms2form. The basic style I've selected is the "sidebar" style. The field widths, etc. will all work just fine; I'd just like the second form to be a different color and width. I thought I could take care of it here:

#cforms2form
{
#cforms2form margin:20px auto 0 auto;
#cforms2form width: 400px;
#cforms2form border:1px solid #004A80;
#cforms2form border-left-color:#004A80;
#cforms2form border-top-color:#004A80;
#cforms2form background:#FFFFFF;
}

Really, the only truly necessary item is the width. This isn't working for me. Can you point me in the right direction?

Cforms are great! I can only see one drawback: Delicious Days is such a lovely, interesting Website that it could entice me away from my work to just linger and read. It's a keeper!

Thanks in advance,

Anne 

November 13, 2007
8:04 pm
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

What is your URL Anne?

November 13, 2007
8:05 pm
Anne
Guest

Well, I've answered my own question. This works:

#cforms2form
{
margin:20px auto 0 auto; 
width: 400px;
border:1px solid #004A80;
border-left-color:#004A80;
border-top-color:#004A80;
background:#FFFFFF;
}

 

February 21, 2008
9:01 pm
David Stembridge
Guest

Hi Oliver,

Is the unique ID something you define just by the name of the form? If not, where do you find it? Thanks, David

February 21, 2008
9:10 pm
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

David, the unique ID of a < form > element is always set, in fact you can't even turn it off :-)

you first form can be refrecned by #cformsform your 2nd with #cforms2form etc.

April 14, 2008
4:29 pm
nooozeguy
Guest

First, an obligatory yet truly sincere thanks for such a great Wordpress tool!!

This looks great-- I haven't tried it yet, but I have a question:

I want to create a second inquiry form that will go on all pages-- EXCEPT the contact page. Is there a simple way to do this? I am hesitant to use a separate page template for the contact form because then it will mean more updating (and more potential for something to go wrong) if we decide to change the look and feel of the entire site.

The Website is: http://www.thedarstgroup.com/

The contact page is: http://www.thedarstgroup.com/lets-talk-online-trad…..g-systems/.

Thanks!

-Josh

April 14, 2008
6:03 pm
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

Sure, and you wouldn't need an extra page template.

Simply add an IF clause to your current page template and only include the 'global' new form if you're not on the contact page, e.g.:

<?php

if( !is_page('123456') ){ // 123456 = contact page id

insert_cform(2); //2, or whatever the number is of the new form…

}

?>

Forum Timezone: Europe/Berlin

Most Users Ever Online: 959

Currently Online:
24 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)