Product Personalization Tutorial - Checkbox Form Element

Product Personalization Tutorial – Checkbox Form Element

Check Box Form Element

To add the check box element to the form you need to create a new node and add it to the <fields> node of the configuration file, with the <frontend_type>checkbox</frontend_type>

To open a node for the new element, decide how you’d like that element to be called… Let’s just call it checkbox_example.

1
2
3
<checkbox_example>
*** the rest of the code would go here ***
</ checkbox _example>

 

After you’ve created a node for checkbox_example, you can add its label and form element type. To have the checkbox_example form element check box, you would need to add the <frontend_type>select</frontend_type> in the checkbox_example node, like so:

1
2
3
<checkbox_example>
  <frontend_type>checkbox</frontend_type>
</checkbox_example>

 

Assuming that you’d like to have the label explaining the user what he needs to enter, you’d want to add the label to the checkbox_example node, like so:

1
2
3
4
<checkbox_example>
  <label> Example of the check box </label>
  <frontend_type>checkbox</frontend_type>
</checkbox_example>

 

And optionally, if you’d like this form field to be required, you’d want to add the required option to the checkbox_example node like so:

1
2
3
4
5
<checkbox_example>
  <label>Example of the check box </label>
  <frontend_type>checkbox</frontend_type>
  <required>true</required>
</checkbox_example>

 

And it would produce this:

10-checkbox-example

There is no limit to the number of form elements, or the number of form element type in a form. You can, for example have multiple textareas or multiple checkboxes combined in one form. You can also combine elements and order them in a form as you’d like. You can set which elements are required ( if any ) and add comments and/or labels to the form elements as you please, and you can name the form elements however it fits you best.

Share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on Pinterest

Leave a Reply

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