How to: style form fields

[Tim]

Hi all
If I have an event form and want to do something like
text field (distance), drop down (km, miles)
How could this be achieved, using css potentially to hook the two requisite fields and display them side by side (is there a snippet/Gist for this).

Wufoo does it easily with left/right tags for fields.

Using Genesis + News Pro

thanks
tim

[Zach Tirrell]

Hi Tim,

Currently there is no way to make two custom field appear on the same line. Since these fields are displayed in a table, a CSS solution is a bit tricky.

However, you can accomplish this with relative ease using javascript/jQuery. I put together a quick example snippet to help get you started:

[code language=”javascript”]
// find the distance field, adjust for your site, assuming here that it is field #2
$distance = jQuery( ‘input[name="_ecp_custom_2"]’ );
// find the units drop down, adjust for your site, assuming here that it is field #3
$unit_drop_down = jQuery( ‘select[name="_ecp_custom_3"]’ );
// hide the row the unit drop down is in
$unit_drop_down.closest( ‘tr’ ).hide();
// move the unit drop down to the same cell as the distance field
$unit_drop_down.appendTo( $distance.closest(‘td’) );
// make the distance field narrower so the unit drop down will fit (this could be done in CSS)
$distance.css( ‘width’, ’10em’ );
[/code]

You would want to add this snippet wherever your theme has other jQuery executing.

Does this help?

[Zach Tirrell]

It has been a while since the last time that I heard back from you so I hope that means everything is working well! 🙂 I am going to go ahead and close this thread, but if you have any further questions, don’t hesitate to open a new one!

[Author]

Posts