Creating a multi-choice poll with a conditional "tell me more" text box

Hey all, 

Here's a quick guide on how to create a poll where you can ask users for more information when they select a certain option. We are going to do this with a custom code block in our guide, and in this example, it is set to expand when "Other" is selected.

 

Here's the video walkthrough.

Github Article.

Keep in mind, this is a custom code block so we don't guarantee that it works, as with any custom code, you will need to verify for yourself if it works.

9

Comments

16 comments
  • We are interested in a similar function to ask a guide participant for additional feedback if they select "No" in the Yes/No poll at the end of our guide to gauge if it was helpful or not.  We want to have a textbox display when No was selected to provide comments.  I am curious if this could work similarly and where the comments are stored in the guide?

    2
  • Hey Wes Barnes, it should work if you update the custom code to read "No" instead of "Other" but if the poll is Yes/No, I think it could be useful to have an open feedback text box regardless of if they select Yes or No to get more comprehensive user feedback.

    1
  • Good point.  We might as well just ask for feedback anytime someone wants to give some. 

    1
  • Is there a way to do the same for CSAT scores (number blocks from 1-5) e.g. conditionally show the text box in case number 1 or 2 are selected? 

    0
  • Frederik Raudies I imagine that's possible, but as a disclaimer, we don't provide direct support for these custom code snippets. I believe it is related to the lines that mention "Other", so you can probably tweak it to reference 1 or 2. (I'm definitely not a technical expert so take my advice with a grain of salt).

    1
  • Hi Angus Yang in the end we solved it with this which works pretty well!

    var pollTitle = pendo.dom('div[class*="_pendo-open-text-poll-question"]')[0];
    var pollTextarea = pendo.dom('textarea[class*="_pendo-open-text-poll-input"]')[0];if(!pendo.designerEnabled) {
    pollTitle.style.display = "none";
    pollTextarea.style.display = "none";
    }pendo.dom('input.pendo-radio').on('click', '.pendo-radio', function(e) {
    var value = e.target.value
    if (value == 1 || value == 2) {
    pollTitle.style.display = "block";
    pollTextarea.style.display = "block";
    } else {
    pollTitle.style.display = "none";
    pollTextarea.style.display = "none";
    }
    });
    4
  • That's awesome to hear Frederik Raudies, appreciate you sharing your solution! I'm sure this will be helpful for others trying to accomplish something similar :) 

     

    1
  • I haven't had any luck combining this thread's workflow with this workflow. I can get it to be multi-select, and I can hide the Other text entry box. But the Guide Metrics for the multi-select options aren't coming through.

    The data should be coming through like displayed below. But mine is blank. 

    Here's what my broken implementation looks like so far, 2MB upload limit; sorry for the low quality:

     

     

    0
  • To get around the lack of logic support, we typically reword our options to account for this. For example, the "Other" option becomes "Other (fill in below)", and reduce the open text field's height.

    1
  • I would like to use this on mobile but custom code blocks are not supported 

    0
  • Frederik, I used your code on a number scale. It's working fine, but upon clicking rating buttons 3, 4, 5, the SUBMIT button doesn't work.

    Ca anyone tell me what wrong with this code:

     

    var pollTitle = pendo.dom('div[class*="_pendo-open-text-poll-question"]')[0];
    var pollTextarea = pendo.dom('textarea[class*="_pendo-open-text-poll-input"]')[0];if(!pendo.designerEnabled) {
    pollTitle.style.display = "none";
    pollTextarea.style.display = "none";
    }pendo.dom('input.pendo-radio').on('click', '.pendo-radio', function(e) {
    var value = e.target.value
    if (value == 1 || value == 2) {
    pollTitle.style.display = "block";
    pollTextarea.style.display = "block";
    } else {
    pollTitle.style.display = "none";
    pollTextarea.style.display = "none";
    }
    });
    0
  • @Rajat
    This code displays the hidden text block when you click on options 1 or 2, but hides it when other or no options are chosen.. If you don't have a text-block below, I assume it could block the submit button (since it might be the only next element).. 
    What are you trying to do? 

    0
  • Hi All, 

    How do I disable Submit button, until user selects radio button options or Other (text box)?

    0
  • Dang... I can't get this to work! When I preview it, I see the backdrop darken the screen, but the survey itself doesn't appear.

    0
  • chaya vishwanath

    How do I disable Submit button, until user selects radio button options or Other (text box)?

    https://support.pendo.io/hc/en-us/community/posts/360078022131-Require-poll-questions

    0
  • Is it possible to do more than one of these on a guide step or do you need to separate each for the code to work?

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

New post