Home » Blog » Dev notes » How to design your Magento form?

How to design your Magento form?


Not everyone knows that default Magento registration form offers some additional fields. What is certain, they give us an opportunity to collect an extra information about our customers. Not all of these fields look attractive and they may not fit into our general website layout. Don’t worry! There is a way to change their design, keeping all the functionalities and Magento integration.

Let’s try to change the design of two, often used fields, Gender and Newsletter.


Gender field is presented in a form of dropdown (select input):

Magento forms

Sometimes it’s more suitable to display it as radio input:

To achieve this effect, we should modify the code, in a manner that all information added with this registration field form, will be properly saved in the system.

We can find the standard code for this field in frontend/[youtheme]/default/template/customer/widget/gender.phtml. It looks like this:

<label for="<?php echo $this->getFieldId('gender')?>">isRequired()) echo ' class="required"' ?>> <!--?php if ($this--->isRequired()) echo '<em>*</em>' ?> <!--?php echo $this--->__('Gender') ?></label>
"<!--?php if ($option['value'] == $value) echo ' selected="selected"' ?-->><!--?php echo $option['label'] ?-->
        <!--?php endforeach;?-->
<label for=""<?php">getFieldId('gender')?>"<!--?php if ($this--->isRequired()) echo ' class="required"' ?>><!--?php if ($this--->isRequired()) echo '<em>*</em>' ?><!--?php echo $this--->__('Gender') ?></label>

Saving all important variables and php code, we modify it to look like this:

<label for=""<?php">getFieldId('gender')?>"<!--?php if ($this--->isRequired()) echo ' class="required"' ?>><!--?php if ($this--->isRequired()) echo '<em>*</em>' ?><!--?php echo $this--->__('Gender') ?></label>
<input id="<?php echo $this->getFieldId('gender')?>-<?php echo $option['value'] ?>" class="radio<?php if ($this->isRequired() && $_index == $_last - 1):?> validate-one-required<?php endif; ?>" title="<?php echo $option['label'] ?>" type="radio" name="<?php echo $this->getFieldName('gender')?>" value="" checked="checked">>

What have we just done?

Label can be kept without changes.

Select field has been omitted and we generated all the information needed with php by putting it in div.

In the end, we called all available options using foreach php loop (like with select options) but we put all those options in radio inputs.

Finally, we added some custom css (depending on website design) and voila.

New look of gender field is ready and should look like this:


Default newsletter Magento form field is presented as a checkbox. It looks fine but what if we would like to display it as radio input, with Yes/No options?

Default newsletter field code can be found in various places through Magento project, for example in registration Magento form phtml file: app/design/frontend/[yourtheme]/default/template/persistent/customer/form/register.phtml :

getFormData()->getIsSubscribed()): ?> checked=”checked” class=”checkbox” />

To present this as radio input we have to change the code accordingly:

Newsletter field is required so we use value (1 or 0) to set the newsletter subscription which is saved in Magento system and eventually looks totally different:

Hope you’ll consider it to be useful. Enjoy!

+1 (No Ratings Yet)

Leave a Reply

Your email address will not be published. Required fields are marked *