By Dubber Dan on

I'm using Webform on drupal 4.6 and have started to set up some forms with it as can be seen at:

http://westburygp.co.uk/registration/changes/online
http://westburygp.co.uk/appointments/cancellations
http://westburygp.co.uk/prescriptions/online

Even though I've set the field length to be different lengths through them, all fields are being displayed full width. How do I set this?

Also, I have a feedback form at http://westburygp.co.uk/feedback which was created using the feedback module. As you can see that form has colour formatting whereas the ones that are created by webform don't. It seems the feedback form is a div class="box" whereas the webform ones are div class="node".

So how do get the colour of the webforms to be the same as the feedback, or how do I get webform to use div class="box"?

⋅ Categories: Drupal 4.6.x

Comments

Dubber Dan’s picture

Dubber Dan commented

anyone?

ac’s picture

ac
Primary language English
Location Perth
commented

You need to set all these style in your theme's stylesheet. You can set the width of the forms using

#uniqueid .form-item input {
width:300px;
}

In this same manner you can control pretty much every element of form style, just check the source to get ids or classes of the elements you want to style.

------------------------------
Alex Cochrane
Spoon Media

Dubber Dan’s picture

Dubber Dan commented

Ah right, I get it, you have to create the form first and then you can get at the styling.

Dubber Dan’s picture

Dubber Dan commented

I've started doing this, but several of my forms have fields with the same names and so with the same ID. Is there a way to further define the CSS to individual pages, maybe using <form action="PAGE NAME" method="post"> ?

Vidarls’s picture

Vidarls commented

Cascading style sheets are nested, so a form item within form id "foo" can be accessed individually from a form item within the form ´with id "bar"

#foo input {
  width: 30px;
}
#bar input {
  width: 50px;
}

try www.w3schools.com for a great reference on CSS

-Olegu
http://www.zbz5.net/

Dubber Dan’s picture

Dubber Dan commented

But those have a different id. I've got the same id on different pages but I want them to look different.

ac’s picture

ac
Primary language English
Location Perth
commented

Your forms should have a unique id somewhere in the <form> tag
------------------------------
Alex Cochrane
Spoon Media

Dubber Dan’s picture

Dubber Dan commented

The only unique bit I can see is the <form action="PAGE NAME" method="post"> as I mentioned earlier, but that's not an id or class. So how do I include that into the code you suggested

#uniqueid .form-item input {
width:300px;
}

Take a look at the source for http://westburygp.co.uk/prescriptions/online to see what I mean

ac’s picture

ac
Primary language English
Location Perth
commented

How are you creating these forms? There are lots of errors.
------------------------------
Alex Cochrane
Spoon Media

Dubber Dan’s picture

Dubber Dan commented

What errors are there?

I've been creating them using the Create content > Webform

ac’s picture

ac
Primary language English
Location Perth
commented

Well this is a horrible element id

id="edit-submitted][Address (inc post code)"

Trying to style that with CSS is going to be impossible with all the spaces and unusual characters.
I can only assume webform.module makes these horrible ids for you. I would reccommend making the forms manually.

Dubber Dan’s picture

Dubber Dan commented

Address (inc post code) comes from the name of the item and webform then also uses the name to be the database key. I did think it seemed a bit unwieldy when setting up the forms but as I couldn't see a way to neatly have a label and a key field I assumed that was how it was meant to be.

Maybe your right, I should do the forms manually unless someone else can point out a way of getting more out of the webform module.

thiruppathy’s picture

thiruppathy commented

hi am using drupal 5.11.. in this module i installed webform module for designing login form... in that form the name file appear like ... label name then next line text field... but i want to show its in single line.. can i customize it.... pl reply me... and also in that form i added one password field ... that field not show encrypted password.... it shows typed password... so for this problem.. can i create password field using web form module... or i need to install any other module to set password field.....

quineto’s picture

quineto commented

Hi,

I am trying to theme the email that webform sends but i can not use any design with HTML just plain text.

Have u tried to send the webform email with html code? please let me know if you guys have done something like this

When I either print it with PHP or embed it with the PHP code it comes out the HTML code and not the design, I guess that it may be a problem of the X-Mailer and comes out the bare code:

any ideas please?

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html> <head>    <title>Requisicion de Personal</title>    <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> <!--    .style2 {font-size: 24px}       -->     </style>  </head><body><table width="581" border="1">  <tr>    <td colspan="2"><div align="center" class="style2">Requisicion de Personal</div></td>  </tr>  <tr>    <td width="250" bgcolor="#339999"><div align="right">Fecha de Env&iacute;o: </div></td>    <td width="315" bgcolor="#339999">2006-10-07 00:12</td>  </tr>  <tr>    <td bgcolor="#339999"><div align="right">De la maquina con IP</div></td>    <td bgcolor="#339999">131.178.31.195</td>  </tr>  <tr>    <td colspan="2"><hr></td>  </tr></table><table width="580" border="1">  <tr>    <td width="233">Unidad de negocio solicitante:</td>    <td width="171"> SCALMAC Huichihuayán, S.L.P.</td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr></table><p>&nbsp;</p></body></html>