[Fixed] Using CSS Class in FormBuilder

[jongrant]

Hi,

Im wanting to use CSS to restrict the size of my fields in my form. I am using the latest release of FormBuilder. In the module, it says under the main section of the form; "CSS Class for this form". And within each field that I have created it has an additional part with "CSS Class for this field".

My question is, how do I use these? Ive read up about it in the forum and many people have said to use DIV tags as per what the source outputs in the web browser, but Im still confused... I have the following fields:

full_name (text input)
email_address (text input)
contact_phone (text input)
message (text area)

I want to restrict the length of the text inputs to 200px in width and also add a font and colour to it. Im also trying to make the text area be only 200px wide also, but around 50px deep.

Does anyone know of how to do this, or a tutorial of some sort online that can explain to me how and why I need to do what I need to do?

Thanks heaps, this board has already helped me alot with CMSMS so look forward to hearing your comments

Jon

[jongrant]

anyone? 

[rtkd]

hi,

i'm having the same problem (6 posts down). pls use search next time to spare some doubble posts
http://forum.cmsmadesimple.org/index.ph ... 834.0.html

[amygdela]

.yourclass input {
  width: yourwidth;
}

[jongrant]

Thanks Amy for posting. Should this go in the class input for field? How should I call it then in the template. Should I use a div tag or a span class or something? The text field is getting called with the code {myfield->input}.

Hope this helps

[Dr.CSS]

If you render the page, look at it in a browser, right click and view source, you should be able to see id="something" or class="something" with those you can call them out in your CSS, for id it's #something {your styling} for class it's .something {your styling}

[jongrant]

Mark your a genius! Worked a treat. There was one problem though, is there any special or additional code for the textarea? The id for this is id="m2_4" and I have in my stylesheet #m2_4 { font-family: Tahoma; font-size: 11px; color: 49494B; width: 200px; height: 100px} but it doesnt change to this kind of style in the browser. Is there something extra I have to put in that applies to textareas?

Thanks

[Dr.CSS]

You may have to call the div it is in... #main textarea #ms_4 {your style}

Can you paste the source code or a link to page?...

[jongrant]

When looking at the source, it doesnt show a tag at all...

The code for the form itself (after copied from the source in IE7) is:

Code: Select all

<!-- Start FormBuilder Module (0.2) -->
<form id="m2moduleform-1" name="m2moduleform-1" method="post" action="index.php" enctype="multipart/form-data"><div class="hidden"><input type="hidden" name="mact" value="FormBuilder,m2,default,0" /><input type="hidden" name="m2returnid" value="59" /></div>
<input type="hidden" name="m2form_id" value="1" />
<input type="hidden" name="m2continue" value="2" />
<input type="hidden" name="m2done" value="1" />

<table width="385" border="0" cellspacing="0" cellpadding="0" height="152" class="bodytext">
  <tr> 
    <td width="107" height="15">Full Name:</td>
    <td height="15" class="bodytext" width="277"><input type="text" name="m2_7" id="m2_7" value="" size="" maxlength="" />
</td>
  </tr>
  <tr> 
    <td width="107" height="15">Email Address:</td>
    <td height="15" class="bodytext" width="277"> <input type="text" name="m2_8" id="m2_8" value="" size="25" maxlength="128" />
</td>
  </tr>
  <tr> 
    <td width="107" height="15">Contact Phone:</td>
    <td height="15" class="bodytext" width="277"><input type="text" name="m2_9" id="m2_9" value="" size="" maxlength="" />
</td>
  </tr>
  <tr> 
    <td width="107" height="15">Message:</td>
    <td height="15" class="bodytext" width="277"> <textarea name="m2_4" cols="80" rows="15"></textarea> </td>
  </tr>
  <tr> 
    <td width="107" height="29"></td>
    <td height="29" class="bodytext" width="277"> <input name="m2submit" value="Submit" type="submit" class="fbsubmit" />
 </td>
  </tr>
</table></form>

<!-- End FormBuilder Module -->

If you want to see it live, its at http://www.standfasttkd.com/cms/index.php?page=test

Thanks

[Dr.CSS]

Try this...

#m2moduleform-1 textarea{width:50px}  50 is what ever size you need, it can be % also...

[jongrant]

Worked a treat Mark. Did exactly what I needed. Another [Fixed] tag thanks to Mark 

Thanks again