Join the Team Forms community
T
S
A
C
H
Hey, Is it possible to Use content component Image to take up the entire PDF Page? I want to use it as a sort of Cover Page.
It is also possible to target only certain pages on the PDF template editor?
Hi Tom,
You can definitely use the content component to create a cover page for the generated PDF document. To do this you can use the steps below:
Drag and drop a content component into your form and use it to add images, headings ect which you would like on your cover page.
In the display tab of the component setting tick the "hidden" setting and untick the "hide in PDF" option. This will ensure this content component is only visible in the generated PDF and not in the form.
Drag and drop a "PDF page break" component under the content component. This will ensure the content component takes up a full page in the generated PDF.
Here is an example of the final outcome showing both the from and the PDF. Notice how the cover page only shows in the PDF and takes up a full page.
Hi Tom,
You can definitely use the content component to create a cover page for the generated PDF document. To do this you can use the steps below:
Drag and drop a content component into your form and use it to add images, headings ect which you would like on your cover page.
In the display tab of the component setting tick the "hidden" setting and untick the "hide in PDF" option. This will ensure this content component is only visible in the generated PDF and not in the form.
Drag and drop a "PDF page break" component under the content component. This will ensure the content component takes up a full page in the generated PDF.
Here is an example of the final outcome showing both the from and the PDF. Notice how the cover page only shows in the PDF and takes up a full page.
Hey Erin,
This is what I have been trying, but the issues is it doesn't cover the entire page on the pdf as it has a white border around the page, Is there a way to bypass this?
Hi Tom,
If you want, an image to cover the full page in the PDF without any margins you can use the steps outlined below.
Open the PDF tab in the form builder screen
Click the settings icon in the top left-hand corner. This will open the pdf setting which allows you to modify the mage margins (as well as many other option like pdf and template, orientation)
Reduce the margins to zero. You will notice there are a few undesirable side effects of doing this which we can fix in the next steps.
In the form builder screen warp the rest of your form inside a fieldset layout component (but not the cover page and page break). This is so we can add margin back into the rest of the form. You can do this by adding a fieldset into your form then dragging all other component into the fieldset.
Add the following CSS into your form to fix the white gap on the cover page and add margins to the rest of the form. You can do this by clicking the "..." icon in the form builder screen followed by "Custom CSS"
.form-pdf .image {
margin: 0;
}
.form-pdf fieldset {
padding: 80px;
}Here is an example of the final output. Note that the image size I used in my example was 1420 x 2008 px to fill the entire A4 page.
