FeedbackForm module - setting form column sizes

[Darwin Web Design]

Hi there,
I've installed the FeedbackForm module (0-9-12) and I have created a form but it has pushed my page design out of shape somewhat.  I was wondering where I can adjust the table width and column widths somewhere easily and if so, where would I do this?  I would like to set it as percentages so it doesn't push everything around and make a mess.

Also can I control how the groups of radio buttons appear?  At this stage they are displayed side by side but it would be great if I could list them vertically. 

I assume the text/colour styling would be taken care of in a css somewhere - I have yet to look into this.  Have only ever created forms in Dreamweaver so just trying to get my head around this new way of doing this.

Thanks in advance 

[Darwin Web Design]

Hi it's me again,
Just thought perhaps as I didn't get a reply, the Form Building module wasn't so popular?...  I am considering not using it now and just doing forms separately using Dreamweaver and a PHP script.  I noticed in the Development/Modules section the following "News" item:

"FormBuilder/FormBrowser 0.1 beta Release
Samuel Goldstein - 2006-07-09 18:54  -  Form Builder
Time to bid farewell to that buggy old FeedbackForm module, and welcome in its newer, better, and probably buggier child, The Form Builder.

Form Builder is templated and improved in various ways. It can also save form output to a database table. This table, in turn, can be displayed and edited using the Form Browser module. "

As it appears to be 'buggy' would you recommend I give it a miss?  Must admit, has turned me off the idea somewhat and common sense is telling me it isn't good to use.  Has anyone had any experience to urge me to go ahead and use the Forms module or just leave it and do it the 'old fashioned' way.  It would be nice to keep the whole website within CMSMS and not do separate things but may have to.

Thanks

[Dr.CSS]

this is a 5 page questionaire with multiple inputs and check buttons, is this what you mean?
http://blueoakom.com/index.php?page=questionaire

[Darwin Web Design]

Yes, just wondering how you controlled the width of the columns and the layout generally...

Thanks 

[Dr.CSS]

default install has a CSS called Forms... that one is this... (my changes?) if you make the page then look at it rendered, open in webbrowser, you can look thru the source to find the class' of the diff. parts and style them that way... most of what i do is done by getting a page up and then looking at the source and then in Firefox i have the Web Dev extention toolbar and i clik the edit CSS button and it shows it on the left and i edit it till i get what i want and then copy/paste those changes into the CSS...

all this under here is from the edit CSS bar, i didn't have to loggin to the admin to get it...

/* FORM ELEMENTS */
/*things for no borders*/
th {
font-weight: bold;
text-align: center;
                border-bottom:none;
}
tr {

}
td {
font-size: 1em;
              border-left:none;
              border-bottom:none;
}
/* no boreders*/
form {
margin:0;
padding:0;
}
form div,
form p {
font-size: 1em;
margin: 0 0 1em 0;
padding: 0;
}
label {
font-weight: bold;
}
fieldset {
border: 1px solid #eee;
padding: 5px 10px;
margin: 0 0 1.5em 0;
}
fieldset legend {
color: #666;
font-size: 1.1em;
font-weight: bold;
margin: 0 0 0 0px;
padding: 0;
background-color: white;
}
* html fieldset legend {
margin: 0 0 10px -10px;
}
fieldset ul {
list-style: none;
margin: 0 0 1.5em 0;
padding: 0;
}
fieldset ul li {
list-style: none;
margin: 0 0 0.5em 0;
padding: 0;
}
   

input, select, textarea {
font-size:1em;
font-family: arial, helvetica, verdana, sans-serif;
       
        margin: 0;
padding: 2px;
}

input, select {
vertical-align:middle;
}
textarea {
width: 200px;
height: 8em;
}

input.check {
border: none;
width: auto;
height: auto;
margin: 0;
}
input.radio {
border: none;
width: auto;
height: auto;
margin: 0;
}
input.file {
height: auto;
width: 250px;
}
input.readonly {
background-color: transparent;
border: none;
}
input.button {
width: 10em;
border:1px solid black;
background-color: #ddd;
}
input.image {
border: none;
width: auto;
height: auto;
}

    form div.submit {
margin: 1em 0;
}
    form div.submit input {
height: 2em;
        width: 15em;
}
/* END FORM ELEMENTS */

[Darwin Web Design]

Thank you for this info, I shall give it a go!

[Darwin Web Design]

Hi Mark (or whoever else may be able to help),

As an experiment I copied your stylesheet into the "Forms" CSS file and ensured that my template had the Forms CSS attached.  For some reason none of the items are reflected on the form.  When I change colours, sizes etc... nothing happens.  I did not change the name of the css file.

Is there some way I can connect the two apart from assigning it to the template?

I also notice when you build a form it asks for "class" - I've tried leaving this blank and also entering 'forms' but nothing happens either.  So not sure what to put in this field.

Thanks in advance...

[Dr.CSS]

if i'm having trouble with some thing taking a style...
i render the page, open it in a browser, and rite clik to view source and look for div ids os clsses or some thing else i can pick on to make the style stick...
that's one of the beauties of Firefox if you use it with the Web Developer extension you can edit the CSS in real time and see it change before your eyes  , that along with the source view can go a long way in finding a way to style something... HTH for now...
do you have a link or is this self hosted, on your comp.,....

BTW: what do you mean by  "assigning it to the template?"

[Darwin Web Design]

I just downloaded the Firefox extension, looks excellent.  I see what you mean, it will tell me all the css info and you can change it all in real time, this will be so handy for designing generally.  Hopefully I'll get the forms to work from this - will give it a try.

What I mean about assigning the CSS to the template - in admin, when you link the hook up the css styles to each template I just made sure my template had the form css linked to it.  But I guess this isn't relevant to the forms because it is automatically looking for that forms.css file that comes with CMSMS anyway?  Main confusion is how changing this stylesheet properties doesn't have any effect on the form itself - but I'll try the Fireworks Bizzo and then I'll just have to work out where to paste the new changes to - shouldn't be hard.

Another Fireworks extension which looks interesting is one that allows you to view your page as it would look in IE - all from Firefox.  Very handy so you wouldn't have to keep switching between the 2 browsers to check the design.  Not sure if it's good but sounds alright to me.

Thanks,
Eva

[Dr.CSS]

oh yea i use that also...
when you get the WD ext. going you might find you have the form CSS in duplicate....
i check someones site to help them and they had about 8 CSS calls for the same thing in it, and more than one thing was called that many times... 

[Darwin Web Design]

Hi again
I have fiddled with the form and the Firefox extension (which is very good by the way) but am nearly going crazy...

I am going to do the form in dreamweaver - mainly because I could not control the column sizes.  There was a class for left and right but I saw it nowhere and when I tried to create it, it didn't work.  When I created a list of checkboxes for the form, they were not listed vertically but more cells were added to the right so everything got pushed around.  There comes a point where I figure perhaps I'll just do my main feedback form in Dreamweaver and call it a day...

but I'm wondering how to style the CMSMS generated forms that I have no control over for example, piSearch box and search button plus the FE Users - login,password,submit.  Looking at the source code generated by these small forms, they do not use any classes.  I did see a post somewhere that says to wrap your own form class tag around it, and I can do this but...

I realise that I can alter the standard html form tags input, select, textarea and form and this is working ok, but can I make the button look a certain way - because usually you have to assign a class to do this.  I'd like all my forms within my site to all have matching buttons if possible as I find that default grey one a bit big and clumsy looking.

Thanks for your patience... still learning css too and I've usually used the wysiwyg of Dreamweaver for all my web work til now. 

Eva

[Dr.CSS]

do you have a link that i can hit for a little fun/shot at it?... 

wish i had had the chance to use Dreamweaver... went from hand coding to CMSMS, well after trying too many others that layed out the template and CSS structure way too confusingly, little input boxes for the styling? whoa just give me a sheet i can put my style calls in...
and one to put the template down on that i can see the structure of... enuf rambling... hope you get it worked out 

[Darwin Web Design]

Unfortunately I don' t have a link yet as I'm developing on my localhost.  I will be uploading to the server within the next couple of days(which might require more questions to the forum as I've never done this before either - I'm hoping it will go smoothly  ).

Thanks for your help though!

[Dr.CSS]

http://forum.cmsmadesimple.org/index.ph ... l#msg25513

[musicscore]

I use the form Builder and want to style 2 different textarea's with CSS

I cann't use

Textarea {
width: 100px;
color: red;
}

because this styles both the textarea's.

I want to style the two textarea's different.

How can i adres the correct textarea in CSS.

Please Help !!!!!

Musicscore