Create a Custom Button with HTML

Create a Custom Button with HTML and add it into an outcome or the final page of your questionnaire, in order to embed a hidden hyperlink and redirect your respondents to the webpage of your choice. 


Essential âœ—
Professional âœ—
Enterprise ✓
ReportR ✓


DEFINITION

formula definition An HTML button represents a clickable button, and it can be placed anywhere in a document for accessible, standard button functionality. By clicking it the user submits his  answer or he is redirected to another webpage.

This guide will teach you:

  1. How to add a button to your survey
  2. How to style your button
  3. Example setup of HTML button and ReportR download link

1. How to add a button to your survey

Create and add a button with an embed link to your outcomes, to send the respondents that suit specific criteria to a webpage or to allow them to download their report!

Once you have created the outcome that you want to place it, you click on the Angle brackets < >, to add HTML code.

create custom button- html window


The text area will turn black as shown below, and this is where you should include the code.

create custom button- html window


Copy the example below that contains the code as well as the HTML in line styling, add the link you want to send your respondent in the href=" ", replacing the dots, and paste it as shown above.

<div class="container button-container">   
<a class="button" 
href="....." target="_blank" 
style="color:white; 
font-size:1.1em; 
width:180.81px;
height:48.03px;">
Learn More
</a>
</div>

2. How to style your button

You can style it with the colors, size, fonts and font size of your choice, just by replacing the existing values of the example code. 

  • Color: Choose the text color here, and write it either with the # or with the rgb format. For example, "color: #339966;" or "color: rgb(51, 153, 102);"
  • Background-color: Change the background color, using the save format as the text color. For example, "Background-color: #339966;" or "Background-color: rgb(51, 153, 102) ;"
  • Font-size: Adjust the font size either by using the em property or by using px. For example, "font-size: 1.1em;" or "font-size:30px;"
  • Font-family: Use the font of your choice. You can find Web safe fonts here. For example, "font-family: Verdana, sans-serif;". 
  • Width and height: Play with those two properties until you find the size that suits your page.
  • Message: Write the message that you want to be displayed instead of "Learn more". Make sure it is placed between the Angle brackets: >Learn More</a>

TIP

formula tipFor additional adjustments you can make use of CSS to further style your button. Meanwhile, do not forget to save and test your changes regularly!


3. Example setup of HTML button and ReportR download link

Now let's see an example. You have two outcomes and you want to allow your respondents to download the PDF report only if they scored higher than 76%. To do that, you have to follow the steps below.


Create a formula with the overall questionnaire score, to use it as a condition in order to set up the logic rules of the results screen later.

create custom button- formula


Create two different outcomes with the text of your choice, where you will add the variables you want, in this example the formula 1 result. Place the custom button only to the highest score outcome.

create custom button- outcome 1

create custom button-outcome 2


Select show each outcome when a condition is met. For the first outcome, use the overall score formula you created before and allow the outcome to appear if the formula's overall score is lower than 76%.

create custom button- outcome 1


For the second outcome, where the respondent is allowed to download the PDF, set the logic to be shown, if the formula's overall score is between 76% and 100%.

create custom button-outcome 2 logic


Now test your logic and your button! For the first outcome you should see a screen like this, only with a message and a score.

create custom button-  result page


For the second outcome, your final screen should be showing the download button!

create custom button-  result page

What is next?

  • To receive an email notification every time the survey is completed, you can turn on Email notifications. Enter your email address and the email address of the colleagues who need to receive the emails as well. Click to add as many email addresses as you need. Make sure to Save changes when you're finished.
  • Download your results! There are different options to download your results, either a bulk download of survey results or choose to download files relating to individual responses. To view and download all results, simply click on the date filter, and press the X to delete the filter that only shows the past month's results.
  • Use the PDF scheduler if you want to send a PDF report to specified contacts on a regular basis, send team members a weekly report, email etc. The reports sent out by the scheduler are aggregate reports with all data totaled, as opposed to personalized reports with just one set of information.


V
Vincent is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.