By flavor on

I need to have the form below created so I can insert it into a block on my site...

http://dev.ridgeworksinc.com/custom-form

If you have experience in Forms API and CCS and think you can do this project for me quickly please contact me. I have the lasyout in a .psd file.

john(at)ridgeworksinc.com - I have been a member of the community for a long time and could use a quick resolve on this.

Thanks

⋅ Categories: Drupal 5.x

Comments

IncrediblyKenzi’s picture

IncrediblyKenzi commented

John,

If you want to save yourself some cash, you should take a look at the webform module (http://drupal.org/project/webform), which allows creation of forms using the drupal UI. This can then be embedded in a block (put in the php code: " print drupal_get_form('webform-client-form-{id of your form}'); " and themed (should be very trivial - just theme the regular block). Feel free to ping me if you get stuck.

Regards,
-=Aaron

flavor’s picture

flavor commented

I have form created in web form already.

I have it displaying where I need it - its just not themed the way the client demands - so with that I am stuck. As you can see from the dev site what it looks like now:

http://72.172.237.200/

and what it needs to look like

http://dev.ridgeworksinc.com/custom-form

are still far apart.

So I need help theming this form to look like what the client wants.

J -

http://www.ridgeworksinc.com - helping you participate in the Internet!

coreyp_1’s picture

coreyp_1 commented

Consider this a starting point:

#node-9 label {
  color: #FFFFFF;
  width: 63px;
  font-size: 11px;
  padding-left: 7px;
  clear: left;
}

#node-9 .form-item label {
  float: left;
}

#node-9 span.form-required {
position: absolute;
  left: 10px;
  color: #FFFFFF;
}

#node-9 input {
  width: 125px;
}

#node-9 .form-item {
  margin-bottom: .5em;
  margin-top: .5em;
}

#node-9 .form-submit {
  color: #FFFFFF;
  height: auto;
  width: auto;
}

#node-9 input.form-submit {
  background-color: #003333;
  border-style: inset;
  color #FFFFFF;
}

#block-block-8 {
  color: #FFFFFF;
}

#block-block-8 h3 {
  font-size: 22px;
  margin: 0 11px 0px 5px;
  border-bottom: 1px solid #FFFFFF;
}

- Corey

flavor’s picture

flavor commented

you rule - that worked awesome.

Just one simple questions and then I will go away :)

How would I get just the Text Area input field to go below the label that its has?

That way I can put my grippie back and have it be a re-sizeable text area.

as you can see its a tiny bit funky:

http://72.172.237.200/

Thanks your help up to this point seriously you really helped me

J -

http://www.ridgeworksinc.com - helping you participate in the Internet!

coreyp_1’s picture

coreyp_1 commented

Here you go:

#node-9 textarea {
  clear: both;
}

- Corey

flavor’s picture

flavor commented

Thanks for this - any idea how to make it Safari compatible - its totally hosed on Safari

http://www.ridgeworksinc.com - helping you participate in the Internet!

coreyp_1’s picture

coreyp_1 commented

It looks good to me on Safari... what are you wanting to appear different? Or have you fixed it already?

- Corey

flavor’s picture

flavor commented

I fixed what I could but its still wonky --- I still have resolve to this - the themer who I hired will not do what he said he would do so I am stuck... again I am willing to pay a small amount for this it needs to match what I have posted above.

Thanks.

J -

http://www.ridgeworksinc.com - helping you participate in the Internet!

coreyp_1’s picture

coreyp_1 commented

What *exactly* needs to be changed? Specifics are the key to getting this done quickly.

On a side note, I'm sorry that another developer left you high and dry. Unfortunately, a lot of my business comes from playing cleanup for clients when other developers have abandoned them.

- Corey

flavor’s picture

flavor commented

To see what needs to be done take a look at this:

http://dev.ridgeworksinc.com/custom-form

I have 3 images - one is what the form should look like - the next image is the form in FF and then the third is what it looks like in IE7

Its really small css tweaks which need to get done and cross browser compatibility stuff.

J -

http://www.ridgeworksinc.com - helping you participate in the Internet!

trevorwh’s picture

trevorwh commented

This should, in theory, be a really easy tweak.

All you need to do is create a custom renderer which removes the colons for a textbox, and setup another css div that has display style as block for the final portion.

To define the renderers, just use the [#theme] operator. If you want to pay me do to this, you can, but it's probably easier for you to do it yourself since it isn't really complicated.

Use the contact form if you need me :)

All the best,

Trevor White
CEO, webdevwithtrev
http://www.webdevwithtrev.com