Product Personalization Tutorial - Textarea Form Element

Product Personalization Tutorial – Textarea Form Element

Textarea Form Element

To add the textarea element to the form you need to create a new node and add it to the node of the configuration file, with the textarea To open a node for the new element, decide how you’d like that element to be called… Let’s say that you want the user to enter its name in the personalization form field.

Logical conclusion would be to name that form element something like user_name, like so:

1
2
3
<user_name>
*** the rest of the code would go here ***
</user_name>

 

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

1
2
3
<user_name>
  <frontend_type>textarea</frontend_type>
</user_name>

 

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 user_name node, like so:

1
2
3
4
<user_name>
  <label>User Name </label>
  <frontend_type>textarea</frontend_type>
</user_name>

 

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

1
2
3
4
5
<user_name>
  <label>User Name </label>
  <frontend_type>textarea</frontend_type>
  <required>true</required>
</user_name>

 

So that the whole config file would look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0"?>
<config>
  <personalization>
    <groups>
      <general>
      <label>Additional information</label>
      <frontend_type>text</frontend_type>
      <sort_order>10</sort_order>
      <fields>
        <user_name>
        <label>User Name </label>
        <frontend_type>textarea</frontend_type>
        <required>true</required>
        </user_name>
      </fields>
    </general>
  </groups
</personalization>
</config>

 

And it would produce this:

06-user-name-field-example

As you can see, you have the option to customize the textarea filed of the “Personalize Form” to your liking, including the label text, the actual name of the field and the option for the field to be required or not. You can also add multiple textarea fields to the form ( please make sure that the names are different though ) and the positioning of the form fields by editing the config file.

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 *