Customise Form Actions to use the <button> tag

Tweet

12 June 2010 | Barry Keenan | Forms

1 4

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