"Speech Bubbles" on Text Controls

We are often asked how can I make the text controls look a bit fancy. Here is a way to add "Speech Bubbles" around a Text Input. This sample uses content from the very cool tutorial by Nicolas Gallagher. You'll need WSC MR Premium or Ultimate in order to have both Theme Editor and Scripting options to use this tutorial.

Adjust your Theme

The first thing you need to do is copy your theme. This is because you'll need to add some custom CSS to your theme to handle the different parts of the "Speech Bubble" display. So, copy a theme so you can edit it or pick and existing editable theme and place the following CSS into the CSS section of your theme.


.triangle-border {
	position:relative;
	padding:15px;
	margin:1em 0 3em;
	margin-top:25px;
	border:5px solid #ffd100;
	color:#333;
	background:#fff;
	/* css3 */
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

/* Variant : for left positioned triangle
------------------------------------------ */

.triangle-border.left {
	margin-left:30px;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-border.right {
	margin-right:30px;
}

.triangle-border:before {
	content:"";
	position:absolute;
	bottom:-20px; /* value = - border-top-width - border-bottom-width */
	left:40px; /* controls horizontal position */
	border-width:20px 20px 0;
	border-style:solid;
	border-color:#ffd100 transparent;
	/* reduce the damage in FF3.0 */
	display:block;
	width:0;
}

/* creates the smaller  triangle */
.triangle-border:after {
	content:"";
	position:absolute;
	bottom:-13px; /* value = - border-top-width - border-bottom-width */
	left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
	border-width:13px 13px 0;
	border-style:solid;
	border-color:#fff transparent;
	/* reduce the damage in FF3.0 */
	display:block;
	width:0;
}

Insert a script on Page Load

The next thing you need to do is create a scripting section on any page that you want to have a speech bubble around a text input. You also need to give each of the text questions an ACCESS code so you can access them from script.

The script for every input is more-or-less the same save for the ACCESS code and perhaps the width parameters to adjust the inputs.


var question = wscScripting.getQuestionByDataPipingCode('MYTEXTQUESTIONACCESSCODE');
if (question) {
        $('#' + question.identity).parent().addClass('triangle-border topleft');
        // Optionally only show this when not on mobiles
        if (wscScripting.getDisplayType() != 'mobile') {
                // Set the Width of the input and the DIV
                $('#' + question.identity).parent().css('width','650px');
                $('#' + question.identity).css('width','645px');
        }
}
args.isValid = true;

And that's about it. You'll need to apply the script to each text input and control the different widths and other options you can with the CSS. There are other similar tutorials and CSS methods to create other effects and these will give you great scope to enhance the look and feel of your surveys.