SSbits - Home page
Site by Carbon Crayon
Submit a Post >

Snippets - Little bits of code to make you happy

Customise Form Actions to use the <button> tag

By Default, SilverStripe uses the <input type="submit"> tag for it's form actions. However, sometimes you may want to use the <button> tag to give you a little more control over styling. This snippet shows you how, as well as giving you code to achieve the same thing in UserForms!

General Forms

I wanted more control over the styling of submit buttons in the userforms module. The standard button use either an <input> tag or a <button> tag. I needed an extra span so I could style the button super pretty, à la:

 

<button><span>Submit!</span></button>

 

To do this on a form contructor function, simply do the following:

 

//Create form Action
$submit = new FormAction("doregister");
//Set it to use button
$submit->useButtonTag = true;
$submit->setButtonContent('<span>Lets do it!</span>');
		
$actions = new FieldSet($submit);

 

Notice that we are adding <span>Button text</span> as the button content. This is one of the advantages of using a <button> over an <input>: you can add html inside it.

User Forms Module

To get this working in UserForms, I extended UserDefinedForm by putting the file 'MyForm' in mysite/code:

MyForm.php

class MyForm extends UserDefinedForm {
	
}
class MyForm_Controller extends UserDefinedForm_Controller {
	
	/**
	 * Customise User Defined Form. Add a prettier submit button
	 *
	 * (Actually overriding the model, but template calls this controller function)
	 *
	 * @return Form
	 */
	public function Form() {
		$form = parent::Form();
		
		$submit = new FormAction("process", $form->SubmitButtonText);
		$submit->useButtonTag = true;
		$submit->setButtonContent('<span>Submit</span>');
		
		$form->actions = new FieldSet($submit);
		
		return $form;
	}
	
}

 

 

 

 

  • Francisco Arenas
    22/10/2010 9:37pm (4 years ago)

    nice :) we are using this snippet for an internal application of ours

Post a comment ...

You cannot post comments until you have logged in. Login Here.

Advertisement

Site of the Month

Find SSbits on

Top Contributers

Rank Avatar Name
1 article image Aram Balakjian
2 article image Daniel Hensby
3 article image Marcus Dalgren
4 article image Hamish Campbell
5 article image njorndare
6 article image Ty Barho
7 article image Martijn van Nieuwenhoven
8 article image Darren-Lee
9 article image Roman Schmid
10 article image Matt Clegg

View full leaderboard


Advertisement