1779 Posts in 582 Topics by 556 members
|
Page:
1
|
Go to End | |
| Author | Topic: | 329 Views |
-
Custom form layout
12 October 2011 at 2:36pm Last edited: 12 October 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?
-
Re: Custom form layout
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.
-
Re: Custom form layout
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.
| 329 Views | ||
|
Page:
1
|
Go to Top |
