How to create custom form in Magento. Type fields
Posted on: December 6, 2014

How to create a custom form in magento?
What types of form fields are available in magento by default?

We will try to answer these questions.
In magento predefined are many different type of fields. All available type of form elements are located in folder lib\Varien\Data\Form\Element. The table below shows a list of them

Field Types:

Button Checkbox Checkboxes Collection Column
Date Editor Fieldset File Gallery
Hidden Image Imagefile Label Link
Multiline Multiselect Note Obscure Password
Radio Radios Reset Select Submit
Text Textarea Time

Code examples:

All the code’s written below are written in the class like Ave_Form_Block_Adminhtml_Form_Edit_Tab_Form inside the _prepareForm() function.
Here is how to add the fields to an admin form, with a list of all the options

Text Field

$fieldSet->addField(
    'title',
    'text',
    array(
        'label'              => Mage::helper('form')->__('Title'),
        'class'              => 'required-entry',
        'required'           => true,
        'name'               => 'title',
        'onclick'            => "alert('on click');",
        'onchange'           => "alert('on change');",
        'style'              => "border:10px",
        'value'              => 'hello world!!',
        'disabled'           => false,
        'readonly'           => true,
        'after_element_html' => '<small>Comments</small>',
        'tabindex'           => 1
    )
);

Time

$fieldSet->addField(
    'time',
    'time',
    array(
        'label' => Mage::helper('form')->__('Time'),
        'class' => 'required-entry',
        'name'  => 'time',
        'value' => '08,15,30'
    )
);

TextArea

$fieldSet->addField(
    'textarea',
    'textarea',
    array(
        'label' => Mage::helper('form')->__('TextArea'),
        'class' => 'required-entry',
        'name'  => 'comment',
        'value' => 'Comment will be here',
    )
);

Submit Button

$fieldSet->addField(
    'submit',
    'submit',
    array(
        'label' => Mage::helper('form')->__('Submit'),
        'value' => 'Submit'
    )
);

DropDown

$fieldSet->addField(
    'select',
    'select',
    array(
        'label'  => Mage::helper('form')->__('Select'),
        'class'  => 'required-entry',
        'name'   => 'title',
        'value'  => '1',
        'values' => array('-1' => 'Please Select..', '1' => 'Option1', '2' => 'Option2', '3' => 'Option3'),
    )
);

DropDown (another way to use)

$fieldSet->addField(
    'selectType',
    'select',
    array(
        'label'  => Mage::helper('form')->__('Select Type'),
        'class'  => 'required-entry',
        'name'   => 'title',
        'value'  => '4',
        'values' => array(
            '-1' => 'Please Select..',
            '1'  => array(
                'value' => array(
                    array('value' => '2', 'label' => 'Option2'),
                    array('value' => '3', 'label' => 'Option3')
                ),
                'label' => 'Type'
            ),
            '2'  => array(
                'value' => array(
                    array('value' => '4', 'label' => 'Option4'),
                    array('value' => '5', 'label' => 'Option5')
                ),
                'label' => 'Color'
            ),
        )
    )
);

Radio Button

$fieldSet->addField(
    'type',
    'radio',
    array(
        'label' => Mage::helper('form')->__('Radio'),
        'name'  => 'type',
        'value' => '1'
    )
);

Radio Button (another way to use)

$fieldSet->addField(
    'type',
    'radios',
    array(
        'label'  => Mage::helper('form')->__('Radios'),
        'name'   => 'type',
        'value'  => '2',
        'values' => array(
            array('value' => '1', 'label' => 'Radio1'),
            array('value' => '2', 'label' => 'Radio2'),
            array('value' => '3', 'label' => 'Radio3'),
        )
    )
);

Password Field

$fieldSet->addField(
    'password',
    'password',
    array(
        'label' => Mage::helper('form')->__('Password'),
        'class' => 'required-entry',
        'name'  => 'password',
        'value' => 'hello !!'
    )
);

Password Field (obscure)

$fieldSet->addField(
    'obscure',
    'obscure',
    array(
        'label' => Mage::helper('form')->__('Obscure'),
        'class' => 'required-entry',
        'name'  => 'obscure',
        'value' => '123456789'
    )
);

Note

$fieldSet->addField(
    'note',
    'note',
    array(
        'text' => Mage::helper('form')->__('Some Text'),
    )
);

Multiselect

$fieldSet->addField(
    'multiselect',
    'multiselect',
    array(
        'label'    => Mage::helper('form')->__('Select Type'),
        'class'    => 'required-entry',
        'name'     => 'title',
        'onclick'  => "return false;",
        'onchange' => "return false;",
        'value'    => '4',
        'values'   => array(
            '-1' => array('label' => 'Please Select..', 'value' => '-1'),
            '1'  => array(
                'value' => array(
                    array('value' => '2', 'label' => 'Option2'),
                    array('value' => '3', 'label' => 'Option3')
                ),
                'label' => 'Size'
            ),
            '2'  => array(
                'value' => array(
                    array('value' => '4', 'label' => 'Option4'),
                    array('value' => '5', 'label' => 'Option5')
                ),
                'label' => 'Color'
            ),
        )
    )
);

Multiline

$fieldSet->addField(
    'multiline',
    'multiline',
    array(
        'label' => Mage::helper('form')->__('Multi Line'),
        'class' => 'required-entry',
        'name'  => 'address',
        'value' => 'hello world!!'
    )
);

Link

$fieldSet->addField(
    'link',
    'link',
    array(
        'label' => Mage::helper('form')->__('Link'),
        'href'  => 'http://www.blog.ave-magento.com/',
        'value' => 'Magento Blog'
    )
);

Label

$fieldSet->addField(
    'label',
    'label',
    array(
        'value' => Mage::helper('form')->__('Some Label Text'),
    )
);

Image Upload

$fieldSet->addField(
    'logo',
    'image',
    array(
        'value' => 'https://www.google.com/images/srpr/logo11w.png',
    )
);

File Upload

$fieldSet->addField(
    'file',
    'file',
    array(
        'label' => Mage::helper('form')->__('Upload'),
        'value' => 'Upload'
    )
);

Date

$fieldSet->addField(
    'date',
    'date',
    array(
        'label'  => Mage::helper('form')->__('Date'),
        'image'  => $this->getSkinUrl('images/grid-cal.gif'),
        'format' => Mage::app()->getLocale()->getDateFormat(
            Mage_Core_Model_Locale::FORMAT_TYPE_SHORT
        )
    )
);

Date with time

$dateFormatIso = Mage::app()->getLocale()->getDateTimeFormat(Mage_Core_Model_Locale::FORMAT_TYPE_SHORT);
$fieldSet->addField(
    'start_date',
    'date',
    array(
        'name'         => 'start_date',
        'label'        => Mage::helper('events')->__('Start Date'),
        'title'        => Mage::helper('events')->__('Start Date'),
        'image'        => $this->getSkinUrl('images/grid-cal.gif'),
        'input_format' => $dateFormatIso,
        'format'       => $dateFormatIso,
        'time'         => true
    )
);

Checkbox

$fieldSet->addField(
    'checkbox',
    'checkbox',
    array(
        'label'   => Mage::helper('form')->__('Checkbox'),
        'name'    => 'Checkbox',
        'checked' => false,
        'value'   => '1'
    )
);

Checkbox (another way to use)

$fieldSet->addField(
    'checkboxes',
    'checkboxes',
    array(
        'label'  => Mage::helper('form')->__('Checkboxs'),
        'name'   => 'Checkbox',
        'values' => array(
            array('value' => '1', 'label' => 'Checkbox1'),
            array('value' => '2', 'label' => 'Checkbox2'),
            array('value' => '3', 'label' => 'Checkbox3'),
        ),
        'value'  => '1'
    )
);

 

Leave a Reply

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