Jump to:

5513 Posts in 1732 Topics by 1218 members

Customising the CMS

SilverStripe Forums » Customising the CMS » How to customize userform form display

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 3168 Views
  • sagelike
    Avatar
    Community Member
    2 Posts

    How to customize userform form display Link to this post

    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

  • Willr
    Avatar
    Forum Moderator
    5483 Posts

    Re: How to customize userform form display Link to this post

    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.

  • arthurdent
    Avatar
    Community Member
    148 Posts

    Re: How to customize userform form display Link to this post

    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;
    }

    Attached Files
  • Tapio (Flo Apps)
    Avatar
    Community Member
    7 Posts

    Re: How to customize userform form display Link to this post

    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?

  • arthurdent
    Avatar
    Community Member
    148 Posts

    Re: How to customize userform form display Link to this post

    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...

  • arthurdent
    Avatar
    Community Member
    148 Posts

    Re: How to customize userform form display Link to this post

    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!

  • Tapio (Flo Apps)
    Avatar
    Community Member
    7 Posts

    Re: How to customize userform form display Link to this post

    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.

    3168 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.