0

I have a WFFM form with a checkbox list field.

What is your favorite ice cream?

Option-1(Checkbox)

Option-2(Checkbox)

Option-3(Checkbox)

I have to include another option to the fields which is a text box to specify the enter the choice of interest.

What is your favorite ice cream?

Option-1(Checkbox)

Option-2(Checkbox)

Option-3(Checkbox)

Option-4(textbox) - To specify any other option.

Is it possible to add add text box to checkbox list

Sitecore 8.1 Update 1 Sitecore WFFM 8

Update-1: Using MVC and Custom save action to perform some operation based on user response on WFFM form. Thanks

1

I don't think there are any out of the box fields for doing this, however you could:

1) Create your form with your checkboxes and a text field (for the 'Other Option') - this would be a separate field below the 4 checkboxes.

2) Export the form to ascx: https://doc.sitecore.net/web_forms_for_marketers/80/setting_up_and_configuring_web_forms/appearance/export_a_web_form_to_ascx

3) Create a sublayout item, Assign the sublayout item to a content item & Add a script similar to the following to the form:

<script type="text/javascript">
  var checkbox = document.getElementById("WebUserControl1_field_F2ACADD39B3C46A4A3036C63C0D60C3C");
  var textbox = document.getElementById("WebUserControl1_field_5339820707D14FAC88D66DCC8F81EB01").parentNode.parentNode;
  textbox.style.display = "none";
  checkbox.onclick = function () {
    if (checkbox.checked) {
      textbox.style.display = "block";
    }
    else {
      textbox.style.display = "none";
    }
  }
</script>

There is more info on how to do this here:

https://doc.sitecore.net/web_forms_for_marketers/80/working_with_fields_actions_and_validations/fields/show_or_hide_form_fields_depending_on_other_field_values

An alternative to this is to build you form with the additional checkbox (step 1 above) and then add classes to the fields in the form editor as shown here: https://doc.sitecore.net/web_forms_for_marketers/80/using_web_forms/creating_web_forms/add_a_field_to_a_web_form

Then using the classes to target the fields add some css to hide your textbox field by default and some javascript/jquery to the page to hide/show the textbox based on the selection of checkbox 4, e.g something like:

$('.checkbox4').change(function(){
    $(this).next('.other-textbox').toggle(this.checked);
}).change();

If you have a main js file you could include it there and scope it to a container or something so it only applies to this form.

| improve this answer | |
  • Thanks for response Adam,I cannot use export to ASCX as I am using MVC Solution and I have custom save action to perform some operation after user submits the data. – Shiva Apr 17 '18 at 6:10
  • @Shiva See the 2nd part of my answer with an alternative approach that you can use with Mvc. Build the form as usual in the form builder with some css classes on the fields and then add some custom css and js to the page. – Adam Seabridge Apr 19 '18 at 1:00
  • Thank Adam, I created additional field for text box and using javascript I am hiding and showing the text box based on the "others" check box status – Shiva Apr 19 '18 at 8:25
  • Great @Shiva I’m glad that worked for you – Adam Seabridge Apr 19 '18 at 9:01
1

I would create custom checkbox list field type that would have checkbox "Enable text option" on it as a parameter. If checkbox "Enable text option" is checked on this field, textbox will be render but it would be grayed out. If you check it on form, textbox would be enabled and you can specify value.

Use javascript to enable / disable textbox when you check the checkbox.

You can take a look further here how to create custom field in Sitecore WFFM 8.1 -> https://doc.sitecore.net/web_forms_for_marketers/81/working_with_actions_and_validations/fields/create_a_custom_field_type .

I would definetely dissesamble code for OOTB checkbox list and create your custom based on that.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.