Using HTML code in your surveys
Valid HTML can be used almost anywhere in the survey. You can use HTML code as part of:
- Questions or answers
- The header and footer of the survey
- The 'Finish Options' or on the 'Thank you' page
- Email invitations, thank you email notification, or in the admin confirmation email
With HTML, every open tag requires a separate close tag, except for self-closing tags with a trailing slash (/) within the tag.
If you've ever copied and pasted some HTML code or added HTML tags in a survey, you might have faced a few challenges. However, QuestionPro lets you add HTML code into quizzes and questionnaires easily. Some of the tags you can use to format your text.
- <p style='color:red'> Text </p>: Applies the color mentioned in the quotes to the text. You can specify the absolute color name as in the above example or the HEX codes for the colors.
- <p style='font-size: 16pt'>Text</p>: Changes the font size of the text. For instance, the size of 'Text' in this code will be 16 points.
- <p style='text-align:center'>Text</p>: Changes the alignment of the text. For instance, the 'Text' in this code will be center-aligned. You can choose to align the text to the left, center, or right side.
- <br>: Adds a line break.
- <a href='www.questionpro.com'>QuestionPro </a>: Adds a link to the text. When the respondent clicks on the link, it will open the URL in the same window.
- <a href='www.questionpro.com' target='blank'>QuestionPro</a>: Adds a link to the text. When the respondent clicks on the link, it will open the URL in the new window.
- <img src='https://www.questionpro.com/userimages/site_media/survey-icon7357906.svg' alt='icon'/>: Fetches the image from the path mentioned in the source attribute and display on the survey.
- <b>Bold text</b>: Embolden the text with the opening and closing tags.
- <u>Underlined text</u>: Underlines the text with the opening and closing tags.
- <ol><li>Apples</li></ol>: Displays items as a numbered list.
- <ul><li>Apples</li></ul>: Displays items as a bulleted list.
- <table><tr><td>Row 1, Column 1</td></tr><tr><td>Row 2, Column 1</td></tr></table>: Creates new table, 'tr' begins a new row and 'td' begins a new column in the present row.
Note: You can also use the rich content editor to format the text and add HTML elements.
Example of formatted HTML in surveys
Consider the below example in which the survey admin wants to stress on the word 'Not' so that the respondents do not make any mistake while understanding the question.
Uses of HTML in surveys
- Branded surveys: HTML tags can be used to customize the look and feel of the text in the questionnaire. For instance, you can use custom fonts that match your brand voice.
- Custom formating: You can add code to format the text as you like. For example, you can change the font color to any color of your choice by using its HEX code.
Advantages of using HTML code in surveys
- Better presentation: Using coding tags, you can format the text the way you like. It improves the presentation and hence the chances of respondents answering the survey.
- Better respondent experience: Better presentation leads to improved respondent experience. The questionnaires that look polished give a great experience of taking the survey to respondents.
How to add HTML code in your surveys?
Learn how to set up and use this feature with our help file on using HTML in surveys.