Printing two forms together on the same page using CP Blocks

Hello @carnagelp

For printing two forms at once, I recommend you insert them into the same tag. For example, if the forms’ ids as 1 and 2, you can insert them into a div tag as follows:

<div class="my-forms-container">
[CP_CALCULATED_FIELDS id="1"]
[CP_CALCULATED_FIELDS id="2"]
</div>

Now, you can implement the onclick event of the print button as follows:

printForm(jQuery(this).closest('.my-forms-container'));

Concerning the slider controls, they are generated by javascript. So, these controls won’t be included in the PDF files.

If you want to preserve the font families in the printed version of the forms, the block with the styles’ definitions must be part of the form’s structure. Insert an “HTML Content” field in the form with a pair of <style></style> tags where define the styles.

Best regards.

So the thing about the font families is that it IS preserved for all form fields EXCEPT dropdowns. Even if I configure the font to work with the method you mentioned, it won’t show the box or the positional formatting without adding a ton of extra css code.

Is there a reason why this happens only to dropdown fields? And is there anyway to tackle that problem as a whole and make it function like the other fields on the form.

You can click the print button on the page to see what I mean.

PS: The div tag thing worked beautifully. Thanks!

Hello @carnagelp

You can try printing the page as a whole by entering the following piece of code as the onclick event of the button: window.print();

Best regards.

That won’t work because I am specifically looking to print only the form.

Do you know the reason why only the dropdown field has the problem?

Hello @carnagelp

The issue with the DropDown is happening by the way the printForm function works. It replaces the SELECT tags with the text of the selected choice.

An alternative would be to enter the following style definition through the “Customize Form Design” attribute in the “Form Settings” tab:

@media print{
.section-content >*, #thrive-header, #thrive-footer{display:none;}
.section-content section{display:block;}
}

And then enter the following piece of code as the onclick event of the button:

window.print();

Best regards.

The code above fixes the dropdown font issue and it removes the header and footer of the page. However, it does not remove any body content before or after the form. So the end result of printing just the form doesn’t happen ??

Hello @carnagelp

I’m sorry, but there are two alternatives. You can use the printForm operation, which replaces the select tags with plain texts. Or you can use CSS to hide the elements in the page you don’t want to include in the printed version of the page (like I did with the headers and footers) and use the window.print();

If you decide to use the second alternative, you should hide the other elements on your page with CSS.

Best regards.