Print page with help of CP Blocks

Hello @rusu,

The process is really simple.

I’ll assume you have installed the “CP Blocks” plugin in your website, and now appears the “Insert Block” button in the forms builder.

Press this button, and then, in the popup window with the blocks, select the “Print Form” block and insert it in the form.

After insert the “Print Form” block in the form, you should insert a button field and enter the following piece of code as its onclick event:

printForm(jQuery(this).closest('form'));

and that’s all.
Best regards.

Hello @rusu,

Please, send me the URL to the webpage where form is inserted.

Best regards.

Hello @rusu,

The issue is simple and it is not caused by our plugin.

As you have said in a previous ticket the form can be printed fine in the form’s preview but not in the public website, but even if you go to the browser, and press the print option in browser’s menu (I’m not referring to the button in the form), you will see your webpage is in blank too.

So, where the issue is? The answer is simple, in the forms’ preview are loaded only the styles of the plugin, in website pages are loaded all website’s styles, included the websites defined in the theme active. If you visit the following link to the style.css file on the theme active in your website:

http://www.rusu.co.in/wp-content/themes/twentyseventeen/style.css

You will see that your theme includes the following block of code to hide all forms’ elements when a webpage is printed:

@media print {

	/* Hide elements */

	form,
	button,
	input,
	select,
	textarea,
	.navigation-top,
	.social-navigation,
	#secondary,
	.content-bottom-widgets,
	.header-image,
	.panel-image-prop,
	.icon-thumb-tack,
	.page-links,
	.edit-link,
	.post-navigation,
	.pagination.navigation,
	.comments-pagination,
	.comment-respond,
	.comment-edit-link,
	.comment-reply-link,
	.comment-metadata .edit-link,
	.pingback .edit-link,
	.site-footer aside.widget-area,
	.site-info {
		display: none !important;
	}

	.entry-footer,
	#comments,
	.site-footer,
	.single-featured-image-header {
		border: 0;
	}

	/* Font sizes */

	body {
		font-size: 12pt;
	}

	h1 {
		font-size: 24pt;
	}

	h2 {
		font-size: 22pt;
	}

	h3 {
		font-size: 17pt;
	}

	h4 {
		font-size: 12pt;
	}

	h5 {
		font-size: 11pt;
	}

	h6 {
		font-size: 12pt;
	}

	.page .panel-content .entry-title,
	.page-title,
	body.page:not(.twentyseventeen-front-page) .entry-title {
		font-size: 10pt;
	}

	/* Layout */

	.wrap {
		padding-left: 5% !important;
		padding-right: 5% !important;
		max-width: none;
	}

	/* Site Branding */

	.site-header {
		background: transparent;
		padding: 0;
	}

	.custom-header-media {
		padding: 0;
	}

	.twentyseventeen-front-page.has-header-image .site-branding,
	.twentyseventeen-front-page.has-header-video .site-branding,
	.home.blog.has-header-image .site-branding,
	.home.blog.has-header-video .site-branding {
		position: relative;
	}

	.site-branding {
		margin-top: 0;
		margin-bottom: 1.75em !important; /* override styles added by JavaScript */
	}

	.site-title {
		font-size: 25pt;
	}

	.site-description {
		font-size: 12pt;
		opacity: 1;
	}

	/* Posts */

	.single-featured-image-header {
		background: transparent;
	}

	.entry-meta {
		font-size: 9pt;
	}

	/* Colors */

	body,
	.site {
		background: none !important; /* Brute force since user agents all print differently. */
	}

	body,
	a,
	.site-title a,
	.twentyseventeen-front-page.has-header-image .site-title,
	.twentyseventeen-front-page.has-header-video .site-title,
	.twentyseventeen-front-page.has-header-image .site-title a,
	.twentyseventeen-front-page.has-header-video .site-title a {
		color: #222 !important; /* Make sure color schemes don't affect to print */
	}

	h2,
	h5,
	blockquote,
	.site-description,
	.twentyseventeen-front-page.has-header-image .site-description,
	.twentyseventeen-front-page.has-header-video .site-description,
	.entry-meta,
	.entry-meta a {
		color: #777 !important; /* Make sure color schemes don't affect to print */
	}

	.entry-content blockquote.alignleft,
	.entry-content blockquote.alignright {
		font-size: 11pt;
		width: 34%;
	}

	.site-footer {
		padding: 0;
	}
}

The solution, edit the CSS file in your theme, or create a child theme, to allow the forms’ elements be visible when the website be printed.

Note: After edit the online files you should clear the browser’s cache.

Best regards.

Hello @rusu,

You can delete the piece of code for testing.

Remember to clear the browser’s cache after edit the online files.

Best regards.

Hello @rusu,

I’m sorry, but I’m not the developer of the theme active on your website.

If the theme active on your website hides the tags when the page is printed, you should contact to the theme’s developers, or you can redefine the styles of the theme.

To redefine the theme’s styles there are different alternatives, you can enter the new styles into the attribute: “Customize Form Design” in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png), or you can create a child theme where redefine the styles (additional information in the following link: https://codex.wordpress.org/Child_Themes)

The styles to apply when the pages are printed must be defined into a @media rule:

@media print{
/* Your styles definitions here */
}

If you need a custom coding service to redefine the styles of the theme active in your website, I can offer you a custom coding service from my private website:

https://services.dwbooster.com/pricing#request-custom-block

Best regards.