Calculated Fields Form Blog

Printing Forms

Printing only the form, without the rest of page's content, and with the values entered or selected by the users, but preserving the form's design, can be a complex task that requires some programming skills.

In this post I'll describe some alternatives for printing the form only, with the values entered by the users and preserving the form's design.

First alternative (the basic method)

The basic way requires to includes some CSS styles in the forma and a button for printing. Please, follows the steps below:

• Enter the following CSS rules into the "Customize Form Design" attribute in the "Form Settings" tab:

@media print{
    body *{visibility:hidden;}
    form.form-for-printing *{visibility:visible !important;}
    form.form-for-printing .ignore{display:none !important;}
}

• Insert a button field in the form with the following piece of code as the onclick event:

  window.print();

• Finally, it is needed to assign the custom class name: form-for-printing to the form you want to print. To assign a class name to the form, should be included the "class" attribute to the form's shortcode with the class name. For example, if the form has the id="123", the shortcode would be:

  [CP_CALCULATED_FIELDS id="123" class="form-for-printing"]

Second alternative (the recommended one)

For this method I'll call the CP Blocks plugin to the rescue. The CP Blocks plugin includes complementary snippets of code that can be used in combination with the "Calculated Fields Form" plugin. CP Blocks includes some commercial blocks and others free, fortunately the "Print Form" block is one of free.

After installing the CP Blocks plugin on your WordPress, will be available a new control in the forms builder, called: "Insert Blocks":

Pressing it would be loaded a popup window with the list of blocks:

Scroll down the blocks list, select the "Print Form" block, and press the "Insert Block" button.

Once the block has been added to the form, insert a button control in the form and enter, as its onclick event, the following piece of code:

printForm(this.form);

and that's all.