Magento provides a simple user account signup page. However, someonline stores might want to collect relevant customer informationfor more targeted and personal interactions with their customers.Some examples of details that could be collected include shoe size,clothing size or favourite colour.
Adding your custom fields on the signup form is not difficult, butit is not trivial either, since one cannot use the Magento backendfor the task. As an example of how it can be done, I willdemonstrate the addition of a new custom field to the signup formasking new users to enter their favourite ice cream flavour.
-
We need to make a module to extend the functionality of thecustomer model. Start by adding the module xml file tothe<wbr></wbr>
app/etc/modules/
<wbr></wbr>directory.You need to decide on a module name. In this example we will usethe Fontis scope, and call the module 'Customer'. Therefore we needto create a file named<wbr></wbr>Fontis_Customer.xml
<wbr></wbr>andadd the following content:<config> <modules> <Fontis_Customer> <active>true</active> <codePool>local</codePool> </Fontis_Customer> </modules> </config>
-
Adding the above file means that Magento is now aware of a newcustom module. Now, we need to create the module itself, which mustbe located in the
app/code/local/Fontis/Customer
<wbr></wbr>directory.Inside this directory, create an<wbr></wbr>etc
<wbr></wbr>directoryand copying the following file inside:app/code/core/Mage/Customer/etc/config.xml
Edit the file and change :
<modules> <Mage_Customer> <version>x.x.x</version> </Mage_Customer> </modules>
to:
<modules> <Fontis_Customer> <version>1.0.0</version> </Fontis_Customer> </modules>
-
This file contains two different<wbr></wbr>
<fieldsets>
<wbr></wbr>-one in<wbr></wbr><config><admin>
<wbr></wbr>andone in<config><global>
.At the end of the second one, in the<wbr></wbr><config><global><fieldsets><customer_account>
<wbr></wbr>scope,add:<flavour><create>1</create><update>1</update></flavour>
In this example<wbr></wbr>
flavour
<wbr></wbr>isthe chosen attribute code. The attribute code that you choose herewill be important in all the following steps. -
Now we need to add the attribute to the Customer Entity SetupModel. To do this, copy the
getDefaultEntities
<wbr></wbr>methodfromapp/code/core/Mage/Customer/Model/Entity/Setup.php
<wbr></wbr>fileto a new file,Model/Entity/Setup.php
<wbr></wbr>inour module. Put the method inside the following class:class Fontis_Customer_Model_Entity_Setup extends Mage_Customer_Model_Entity_Setup
Then add the following code at the end of the attributes arrayinside the customer arrray:
'flavour' => array( 'label' => 'Ice Cream Flavour', 'visible' => true, 'required' => true, ),
In this case the new attribute is set as compulsory byadding<wbr></wbr>
'required'<wbr></wbr>=><wbr></wbr>true,
<wbr></wbr>tothe end of that array. If you want the attribute to be optional,remove the<wbr></wbr>required
<wbr></wbr>lines. -
The new attribute needs to be added to the Magento database. Thebest way to do this is to tell Magento to insert it for you. Youcan either create your own script that uses the Magento code or youcan just drop the following code into one of your templatefiles:
$setup = new Mage_Eav_Model_Entity_Setup('core_setup'); $setup->addAttribute('customer', 'flavour', array( 'label' => 'Ice Cream Flavour', 'type' => 'varchar', 'input' => 'text', 'visible' => true, 'required' => true, 'position' => 1, ));
A handy place to add the above code is the
<theme>/template/customer/form/register.phtml
<wbr></wbr>filesince it needs to be edited to add a custom field for the newattribute. Make sure the above code is enclosed with<?php ... ?>
To add the attribute (ie. run this code) view the register newcustomer page. Once you have viewed the page this code can beremoved.
In this example the attribute type is set to<wbr></wbr>
varchar
<wbr></wbr>andthe input is set to<wbr></wbr>text
.This needs to be modified to match the requirements of eachspecific attribute. -
At this point, the attribute is installed and it will show up inthe backend. We need to modify the frontend, so that the customerscan enter values for the custom attribute. There are two fairlysimilar phtml files:
<theme>/template/customer/form/register.phtml <theme>/template/customer/form/edit.phtml
As a minimum, you need to add a new text box in the<wbr></wbr>
register.phtml
<wbr></wbr>file,since that is what customers see on the register page. You can addthe same text box in the<wbr></wbr>edit.phtml
<wbr></wbr>fileso that customers can make changes to the original entry that theyhave made on sign-up. Make sure that the ID and name of the newinput text box match the attribute code chosen in step 3. In thiscase it is 'flavour'. The following shows the sample code that addsa new text box with a label:<div class="input-box"> <label for="flavour"><?php echo $this->__('Favourite Ice Cream Flavour') ?><span class="required">*</span></label><br /> <input type="text" name="flavour" id="flavour" value="<?php echo $this->htmlEscape($this->getFormData()->getFlavour()) ?>" title="<?php echo $this->__('Flavour') ?>" class="required-entry input-text" /> </div>
Address details
If you only want to add fields for address details you are in luck.Those fields are already setup in thetemplate/customer/form/register.phtml
<wbr></wbr>file,but they are disabled by an inactive<wbr></wbr>if
statementthat so far has not actually been linked to anything else inMagento. Therefore to enable the address related fields you simplyneed to comment out or delete the following statements:
<?php if($this->getShowAddressFields()): ?>
and
<?php endif; ?>
Note that there are two occurrences of this<wbr></wbr>if
<wbr></wbr>statement.One is around the area where the customer actually inputs theirdata and the other is at the bottom of the file. The firststatement shows all the areas for the customer to enter their dataand the second statement is around some JavaScript code that setsup the State/Province select.
Removing phone number field
One final issue relates to the telephone number field. By defaultit is considered a required field and that is hard-coded in theinput validation function. If you do not want the telephone fieldto be mandatory (or any other field for that matter), you need toremove the relevant statement from:
magento/app/code/core/Mage/Customer/Model/Address/Abstract.php
This is the code that needs to be removed from<wbr></wbr>publicfunction validate()
:
if (!Zend_Validate::is($this->getTelephone(), 'NotEmpty')) { $errors[] = $helper->__('Please enter telephone.'); }
In order to make sure that your Magento installation still worksproperly after you do an upgrade, rather than changing the corefile, the safest option is to copy the above file into thefollowing file structure:
magento/app/code/local/Mage/Customer/Model/Address/Abstract.php
Since files in<wbr></wbr>/local
<wbr></wbr>don'tget affected when you run upgrades, it means your signup form willwork as expected after an upgrade.