Jump to:

2002 Posts in 1422 Topics by 616 members

Form Questions

SilverStripe Forums » Form Questions » Custom form layout

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

Page: 1
Go to End
Author Topic: 525 Views
  • arthurdent
    Avatar
    Community Member
    153 Posts

    Custom form layout Link to this post

    Hi. I'm up against it a bit here and hoping for a quick answer -- I'm doing a site that has a 'set up account' form where users can subscribe to a service. Once subscribed they will be able to login to subscriber pages from a small form (email address/password in the sidebar.

    Typically the form data is displayed in SS as:

    Name: [Textfield]
    Email: [Textfield]
    ...
    etc.

    However, in the interests of saving space in the side bar I want to go:

    [Enter your Email Address ]
    [Enter your password ]

    ie: the prompt is inside the text field and the user types over it.

    I also need to find a way to make a separate style for this form, as the fields are required to be narrower in the sidebar than on the page...

    Easy enough in HTML/CSS -- but is this even possible in SilverStripe? Has anybody dealt with this sort of thing?

  • Howard
    Avatar
    Community Member
    215 Posts

    Re: Custom form layout Link to this post

    This is easy enough.

    Firstly you can style the form any way you like using CSS. Each form gets given an ID based on the name of the function that creates it. So if you target that ID with CSS you can set the width and all other styles.

    Secondly the default text is a slightly different issue. You will need to use a little bit of javascript to clear the text when the user selects the textbox. I did this once on a site but I can't remember which one it was for - I just googled "default text input jquery" and it came up with heaps of different ways to do it.

    Does this make any sense? Hope it helps.

  • Howard
    Avatar
    Community Member
    215 Posts

    Re: Custom form layout Link to this post

    Oh just remembered where it was.

    <script type="text/javascript" language="javaScript">
    jQuery(document).ready(
       function(){
          clearsearch();
       }
    );

    function clearsearch() {
       jQuery('#SearchForm_SearchForm_Search').each(function() {
        var default_value = this.value;
        jQuery(this).css('color', '#666'); // this could be in the style sheet instead
        jQuery(this).focus(function() {
        if(this.value == default_value) {
        this.value = '';
        jQuery(this).css('color', '#333');
        }
        });
        jQuery(this).blur(function() {
        if(this.value == '') {
        jQuery(this).css('color', '#666');
        this.value = default_value;
        }
        });
       });
    }
    </script>

    You'll need to load jQuery as well.

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