Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Form Questions /

Custom form layout


Reply


3 Posts   594 Views

Avatar
arthurdent

Community Member, 184 Posts

12 October 2011 at 2:36pm

Edited: 12/10/2011 2:37pm

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?

Avatar
Howard

Community Member, 215 Posts

12 October 2011 at 4:25pm

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.

Avatar
Howard

Community Member, 215 Posts

12 October 2011 at 4:27pm

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.