Custom question as dropdown input field

In case you need some predefined custom dropdown input field on your splash page, using data capture feature, here is what you can do:
/Some HTML knowledge is required to do this modification/

– Use an existing custom skin, or create a new one. (our example is based on a fresh custom Responsive Skin)
– Set up your page to display the custom fields (we will modify the custom question number 1.)
– Locate the custom field part in the custom skin files you want to modify (in our case: main_modules_free_auto.inc.html)

We will modify this part of the code (related to Custom Question 1):

<div id="capture_custom_1" class="field field_phone"> 
<div class="label">{CAPTURE_CUSTOM_1_REQ}{CAPTURE_CUSTOM_1_Q}</div>
<div class="col">
<input id="c_custom_1" class="{RESPONSIVE_ERROR_051}" name="capture_custom_1" type="text" value="{CAPTURE_CUSTOM_1_A}" />
<span class="msg">{RESPONSIVE_ERRORTEXT_051}</span></div> 
<div class="clear"></div> 
</div>

Originally this is a simple HTML input field. To make a dropdown version of the input field, we will have to change the input type to SELECT, and we will have to manually enter the OPTION fields.

After modifying to have 3 options of dropdown input field, our example code looks like this:

<div class="field field_phone" id="capture_custom_1">
<div class="label">{CAPTURE_CUSTOM_1_REQ}{CAPTURE_CUSTOM_1_Q}</div>
<div class="col">
<select name="capture_custom_1" type=text id="c_custom_1" value="{CAPTURE_CUSTOM_1_A}" class="{RESPONSIVE_ERROR_051}" onKeyUp="toggle_field2('c_custom_1')" />
<option class="example" name="capture_custom_1" value="Select" selected="selected" disabled=disabled>Please select one option</option>
<option class="example" name="capture_custom_1" value="1" >Option 1</option>
<option class="example" name="capture_custom_1" value="2" >Option 2</option>
<option class="example" name="capture_custom_1" value="3" >Option 3</option>
</select>
<span class="msg">{RESPONSIVE_ERRORTEXT_051}</span>
</div>
<div class="clear"></div>
</div>

 

3 3
Tagged:

One Comment

Leave a Reply to Guido Pettinari Click here to cancel reply.