Create an attractive and stylish PDF and let your respondents download it, directly after taking your questionnaire. A winning way to increase engagement and a powerful tool to generate more conversions.
Professional Enterprise 
ReportR DistributR This step-by-step guide will show you how to create more complex setups and combine different layouts and backgrounds to create a unique PDF.
- Create your PDF
- Create a cover page
- Create the second page
- Create the third page
- Create the fourth page
- Create the fifth page
1. Create your PDF
In this video we will take a look at the questionnaire settings and how you can create your PDF.
While you still have your assessment open, you can click on the Report Button and click on the +Create a new report.
A new modal will appear, where you would have to select a template. You can choose the Empty, to start from scratch.
In the new modal, select the Individual report.
Alternatively, click on the Reports button, which you'll find in the menu bar at the top of the screen.
You'll see a list of all of your current PDFs. Click Create PDF v2 (beta) and in the box that comes up, choose the questionnaire for which you want to create a PDF report.
If you have a lot of questionnaires, you can also use the search button to write the name or the suffix of the questionnaire you are looking for. Select your questionnaire and click Next. Like before, you need to select a template and then click on the Individual report.
2. Create a cover page
2.2 Add your content
2.1 Add a background image
Select your page and go to the additional settings.
Click Upload image to add a background image only to this page.
A new pop-up window will open where you can select the file you want to upload.
Once you click upload the image will be displayed on your page.
2.2 Add your content
Now that you added the background image, it is time to add some content. Drag and drop a text widget on your page.
For this PDF we will add the name of the report and 3 variables: the respondent's name, company name, and company website.
You can change the font size, color and add the variables with the help of the text editor buttons. To close the window click the Save and close button.
The font sizes that you can choose from in the text editor are xsmall, small, medium, large and xlarge. You can change the px for each size at the design tab of your editor if you open the font settings.
You can move your content on the page if you add margins. Select the text widget and then click on the gear button to open the additional settings. Now all you need to do is add values to the margin fields. In this case, we added a 10mm margin top and a 20mm margin left.
This is how the cover page looks like when you print your PDF.
3. Create the second page
3.3 Create a banner
3.1 Remove header and footer
The second page is where you can add your content and it contains a header and a footer.
For this example, we don't want header or footer text, so we are going to remove them.
Click on the Design tab, select the header & footer from the menu, and simply delete all the text. Now click the Save changes button and go back to the widgets tab.
Don't forget to save your work when you change tabs! For example, you have to save your work before leaving the widgets tab and again after you modify something at the design tab or extra options.
3.2 Add a text widget
It is time to create the second page, which is a short introduction and a thank you note. First, drag and drop a new page under the existing one and then add a text widget.
The text widget pop-up window will open, where you will add your content. After typing your text, you can add bullet points, add variables, and change font size with the help of the text editor.
When you finish click the Save and close button to preview your page. To move your content to the page click the gear button to open the additional settings and add margins.
In this case, we used a 10mm margin top, a 20mm margin left (the same as on the cover page) and because we wanted to add a banner at the bottom of the page, so we also added a 105mm margin bottom. This way we expanded the text widget width in order to place the banner all the way to the bottom of the page.
The blue line under your widget shows where the widget ends.
3.2 Create a banner
It was never easier to create a banner with your company logo and some additional information about your company, or your website link and contact information. First, you need to drag and drop the column layout that you like on your page. For this example, we will use the 4-8 column.
The next step is to drag and drop one text widget in each column. You can add your logo at the text widget to the left if you click the add image button.
A new window will open, where you will have to add your image URL. To create the URL of your logo, you can use our media library.
Click insert, and then change the dimensions of your logo, by clicking on the blue dot and dragging it.
Now add your text to the text widget of the right column. Once you finish, you can adjust the margins for the two text widgets at the additional settings. The margins we used for the logo are 7mm top, 7mm bottom and 10mm left and the margins for the widget to the right are 10mm top, 10mm left and 10mm right.
To make your banner more interesting you can add a background color to your columns. Select the column, go to additional settings, click on the color selector and pick the color of your liking.
This is how your page looks like when you print your PDF.
If when you preview your PDF the banner is displayed alone to the next page, this means that you would have to reduce the bottom margin of your first text widget (the one we added 105mm bottom margin). To estimate where your page ends, you can select the page and activate the Estimate where page breaks would occur button, at the additional settings.
4. Create the third page
The third page of this example is more complicated. This is how it will look like when you finish.
To create it you will need to:
4.1 Add a new page with a background image
4.2 Add a Text widget with the title, an image and 3 variables
4.3 Add a 2 columns layout widget with two Formula KPIs
4.4 Add a text widget with additional information
4.5 Add a banner
4.1 Add a new page with a background image
Add a new page and then add a background image (you can find the step-by-step instructions in section 2.2 Add a background image).
At the background settings, select cover to change the image size.
4.2 Add a Text widget with the title, an image and 3 variables
Drag and drop a text widget on the page and add your text and image. Use the text editor to adjust the font size, and add the variables and the image.
To center your image in a text widget you can open the code view <> and add the following code before the image: <p style="margin-left:auto;margin-right:auto;display:block;">.
After the image add </p>. This is how your code will look like:
<p style="margin-left:auto;margin-right:auto;display:block;"><img src="https://assets.surveyanyplace.com/app/editor/reports/pdf/maturity_assessment/identity.svg" ></p>
4.3 Add a 2 columns layout widget with two Formula KPIs
For the next block, you need to add a 2 columns layout widget.
Drag and drop two Formula KPIs widgets, and add your formulas. Click Add KPI and then select your formulas from the dropdown menu.
Now go to the additional settings of each column and add margins to move the KPIs evenly towards the center of the page. In this case, we added to both columns a 12mm margin left and a 12mm margin right.
4.4 Add a text widget with additional information
Drag and drop a text widget on the page and add your text.
Click on Save and close to preview your widget.
4.5 Add a banner
You can recreate the banner you had on your second page, or you can copy its widgets and transfer them to your current page.
First, add the 4-8 column widget and then copy the 2 banner widgets and transfer them. To copy a widget you can click on the page icon and to move it you can use the four arrow sign. If you want to use a different background color, just select the columns and pick another background color from the color selector.
5. Create the fourth page
It is time to add some graphs and show respondents' results at a glance. We will add 2 column charts, as the columns allow us to display data that are easily compared.
5.1 Add a text widget with a title
5.2 Add two column charts and set them up
5.1 Add a text widget with a title
Add a new page and drag and drop a text widget on it. Add your title, use the text editor to style your text, click Save and close and you are done!
5.2 Add two column charts and set them up
Now it is time to add the column charts. Drag and drop the first column chart to your page and fill in all the necessary fields.
This is what it will look like.
Now add the second chart and fill in all the necessary fields.
When you preview your PDF this is how this page looks like.
6. Create the fifth page
This is a more complex page, with a lot of different widgets and settings.
To recreate it you need to:
6.1 Add a text widget with the title
6.2 Add a three columns layout widget with one text and two formula KPI widgets
6.3 Add a pie chart
6.4 Add a text widget with an image and a background color
6.1 Add a text widget with the title
First add a new page, where you will add your title and style it, by using the text editor.
At the additional settings, you can add margins to move your widget to the left.
6.2 Add a three columns layout widget with one text and two formula KPI widgets
Now add a 3-column layout widget to the page. In the first column add a text widget with a variable, and add a formula KPI widget in each of the other two columns.
The image below shows the setup of the two formula KPI widgets.
6.3 Add a pie chart
Add a pie chart and fill in all the necessary fields.
Click Save and close to preview your chart. If you would like to change its dimensions, you can go to the additional settings and add left and right margins. The bigger the margin you add, the smaller your chart will be.
6.4 Add a text widget with an image and a background color
Add a text widget where you can add your image, title, and content. Click Save and close to preview your widget.
You can change the background color of the widget to create a more interesting block of content. Just go to the additional settings, click on the background color selector, and pick the color you like.
Set up conditional content
Now you have set up the widgets and content for your report. Let's take it to the next level and set up logic rules to display condition content based on the dynamic responses submitted by your contacts.
Check out our article Logic Rules for conditional content for more information.
What's next?
- Renewed Report Builder-Bubble chart: The bubble chart widget allows your respondents to see their results from different questions but also compare them to other components. A bubble chart stands out because it allows a comparison between three variables.
Renewed Report Builder-Bar chart: Add a Bar Chart widget to your customized report to show respondents' results or another data set at a glance. This way you will display your data with rectangular bars. It allows you to show data separated into categories with relative numbers.
Report Builder-Table: The Table widget allows you to display results clearly and concisely to your respondents. It is an easy and fast way of displaying any data in rows and columns. Rather than writing your data in text, you can make it more understandable and easy to read with this widget.
Don't want to build it yourself? Contact our professional services team
