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

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

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 htmlFor="<?php echo $this->getFieldId('gender')?>">isRequired()) echo ' class="required"' ?>> <!--?php
         if ($this--->isRequired()) echo '<em>*</em>' ?> <!--?php echo $this--->__('Gender') ?></label>

<div className="input-box"><select id="<?php echo $this->getFieldId('gender')?>"
 style="box-sizing: border-box; margin: 0px; padding: 0px; color: #636363; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 14px; line-height: 1.5; font-family: Raleway, 'Helvetica Neue', Verdana, Arial, sans-serif; text-transform: none;"
 title=""<?php" name="<?php echo $this->getFieldName('gender')?>">__('Gender') ?>"<!--?php if ($this--->isRequired()):?> class="validate-select"<!--?php endif; ?-->
<!--?php echo $this--->getFieldParams() ?>> </select></div>

<!--?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>' ?>&lt;!--?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'] ?>"
 className="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.

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 :

<div className="input-box"><input id="is_subscribed"
  style="box-sizing: border-box; margin: 4px 0px 0px; padding: 0px; color: #636363; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 14px; line-height: normal; font-family: Raleway, 'Helvetica Neue', Verdana, Arial, sans-serif;"
  title="<?php echo $this->__('Sign Up for Newsletter') ?>"
  name="is_subscribed" type="checkbox"
  value="1"/>getFormData()->getIsSubscribed()): ?> checked="checked" class="checkbox" /></div>

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

<div className="input-box newsletter"><input id="is_subscribed" className="radio" name="is_subscribed" type="radio"
  value="1"/> <label htmlFor="yes">Yes</label> <input
  id="is_not_subscribed" className="radio validate-one-required" name="is_subscribed" type="radio" value="0"/> <label
  className="form-radio-subscription" htmlFor="no">No</label></div>
</code

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!