You are viewing limited content. For full access, please sign in.

Question

Question

'Filling in the blank' on a Form

asked on December 3, 2015

I am creating a form in which I need the participant to include information into a sentence - 'Fill in the Blank style'.

For example (see image attached) I would like to have a sentence that has a free text field for the participant to put in whatever information they like. The field/blank cannot be limited by a drop down of choices or options as the question could be as varied as 'My favourite food is ________' and asking a question to a potential 10,000 people could produce 10,000 individual answers.

 

I hope the above is clear and any/all suggestions on how to get the desired look and function would be greatly appreciated.

 

Apologies if the solution to the above is simple or been asked previously!

 

Christian

Fill in the gap.JPG
0 0

Replies

replied on December 3, 2015 Show version history

For the desired look and functionality, I would use a "Custom HTML" control with some CSS styling for the text box to remove the border and leave the line. Here is some code:

<div id="question1">I would like the individual to be able to hear <input type="text" class="answer" id="answer1" /> fill in an entry to a sentence which may have a number of answers - the answer may not be limited.</div>

Add the following to your "CSS and Javascript">"CSS" section of your form. The CSS for the textbox:

input.answer { outline: 0; border: 0; padding: 0; margin: 0; border-bottom: 1px solid #DED9D9;}
input.answer:focus {border-color:none;box-shadow:none;transition:none;}
.hiddens {visibility: hidden !important;position: absolute !important;}

In order for Forms to save the data though, you will have to create a Single-Line field, "hide" it (adding the "hiddens" class, do not use "display:none;" as forms will not save the data), give the field variable a name, and on the change event for "answer1" textbox, add the following javascript:

$(document).ready(function() {
    $(document).on('change', '#answer1', function() { 
        $('li[attr=nameoffieldvariable] input.singleline').val(this.value);
    });
});

 There may be better ways to do this, this is just one way of many.

0 0
replied on December 18, 2015

Did this work for you?

0 0
replied on December 13, 2017 Show version history

I am trying this as well and can not seem to get it to work. It is collecting the data but on the saved form it is blank

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.