I'm very new to Silverstripe and I'm trying to figure how to customize the form display for forms created using the userform module.

At first I though I'd be able to target elements using CSS but unfortunately, userform actually uses standard tags in the html output so that if I change "left" I change all form fields in silverstripe, i.e. The admin login fields and whatever else uses it.

Here's the output:

<div id="EditableTextField21" class="field text requiredField"><label class="left" for="Form_Form_EditableTextField21">My Form Field</label><div class="middleColumn"><input type="text" class="text requiredField" id="Form_Form_EditableTextField21" name="EditableTextField21" value="" /></div></div>

I want to target the <label> tag with CSS so I need to find a way to add custom IDs or classes to the form elements HTML out for each individual form but SS doesn't seem to provide an effective method for doing this.

What I did in the short term was add these tags around the Field name in the form builder <span id=form>Form Label</span> It worked but the output shows in the delivered email so that solution won't work for long.

I've looked at the code and googled but haven't been able to figure out where I can customize the code to simply add something like id="myfield" to the output.

Can anyone offer some advice?

Thanks in advance
G

Hi Sagelike,

One thing you could do is create a UserDefinedForm.ss template (copy content from your Page.ss) and wrap the $Form variable in the template with an ID

<div id="UserForm">
$Content
$Form
</div>

Then you could target the UserForm form fields with #UserForm ... {}. I do like the idea of customizing classes on a per form and per form field basis so I have created a ticket for it http://open.silverstripe.org/ticket/5751.

Normally when styling a SilverStripe form I pick up a tag already used by Silverstripe and apply a few .css rules.

But today my Userforms module refuses to play by those rules. Most of the form is looking right, but for some reason my checkboxes/radio buttons have a huge (like 260px huge) indent on the left hand side. I've isolated things down to the optionset tag but can't find any way to remove this space. Zeroing all margins and padding does nothing, neither does putting in a -260px margin. Frankly it shouldn't be so difficult and it has me spewing right now...

As you'll see form code snippet below, even something really silly like a -1200px margin changes nothing

Can anybody finish of Friday with a helpful suggestion? Thanks

/* CHECKBOXES
---------------------------------------- */

ul.optionset {
	overflow: hidden;
	padding: 0px;
	margin-left: -1200px;
	width: 220px;
}
	ul.optionset li {
		margin: 6px 0;
		clear: both;
	}
		ul.optionset li input {
	margin-top: 0px;
	margin-right: 6px;
	margin-bottom: 0px;
	margin-left: 6px;
	float: left;
		}
		ul.optionset li label {
			margin: 0;
}
.optionset ul{
	border: thin solid #0F0;
	margin-left: -260px;
}

A bit difficult to guess the culprit as that part of the form probably inherits styles from outside the snippet. Can you give an URL to see the entire form?

Having both ul.optionset and .optionset ul in your CSS looks strange: you have nested ul's?

No, no nested ULs, just threw that into the mix to see if it made a difference (it didn't but frustration can make one do strange things). Unfortunately site is in local development so can't post URL. However your answer has got me thinking -- I am aware of inherited styles (of course) -- but I thought that applying a new rule to a particular style took care of that -- although I can see a place now where this may not have happened... Will investigate further...

Flo Apps, you were right -- a UL style back at 'content' level was causing the problem. Guess I was dazed from banging my head on the screen... sometimes it takes a fresh perspective (and dinner always helps as well)! Cheers!

Good to hear you got this solved. Probably you're familiar with Firefox's Firebug and Chrome's Developer Tools, but they're indispensable in tracing the styles that apply to a chosen element. By clicking Inspect Element you immediately see what CSS rules apply.