How to Display Client Info in a PDF File

In this tutorial, we consider two cases where, after selecting a user’s data on the front end, user-related data will be transferred to a generated PDF file. 

In the first case, any user (regardless of whether they are logged in to the site) can select data from the list and generate a PDF file. In the second case, after selecting a user’s data on the front end, the logged-in user’s data is transferred to the generated PDF file.

Before you start, the JetEngine and JetFormBuilder plugins and the PDF Attachment Addon for JetFormBuilder should be installed and activated. Also, for the second case, the Formless Actions Endpoints should be installed and activated. If you have not done it yet, read the Plugin Installation guide to learn how to do it.

In addition, since we intend to display data stored in the meta boxes applied to Users, the User Profiles should be created, and meta boxes added with meta fields filled in. In this case, we created a meta box with two “Text” meta fields 一 “customer_phone” and “customer_meta”.

Add the code snippet into the functions.php file directly or use a plugin such as WPCode Lite, Code Snippets, or Simple Custom CSS and JS.

add_action( 'jet-form-builder/before-do-action/generate_pdf', function () {

    $user_id = get_current_user_id();

    if ( ! $user_id ) {
        return;
    }

    jet_fb_context()->update_request(
        get_user_meta( $user_id, 'customer_phone', true ),
        'customer_phone'
    );

    jet_fb_context()->update_request(
        get_user_meta( $user_id, 'customer_meta', true ),
        'customer_meta'
    );

} );

Once completed, save the changes.

Build a form

In this step, move to WordPress Dashboard > JetFormBuilder > Add New Form to build a form. Here, we delete the Welcome block and build the form from scratch, add the form’s name (“users”, in this case), and insert a Select Field.

More information can be found in the How to Create a Form? tutorial.

After that, move to the block’s settings and type the “customer” FIELD LABEL; the FORM FIELD LABEL will be filled in automatically.

Next, we configure the following settings: we choose the “Generate Dynamically” option in the FILL OPTIONS FROM dropdown and the “Get values list from WordPress Users” option in the GENERATOR FUNCTION dropdown.

Read the Multi-Optional Field Source Settings tutorial for more details.

After that, move to the Post Submit Actions tab in the JetForm settings. First, we add the “Save Form Record” action. 

Second, we press the “+ New Action” button and press the “Generate PDF” button in the newly appeared Add new action pop-up.

Next, we are redirected to the Edit Generate PDF pop-up.

Here, since we have not created a new template previously, we press the “Add new template” button to be redirected to the template editor.

In the template editor, we type the “pdf template for user meta “ template’s name instead of the default text.

Insert dynamic fields to populate the PDF with specific form submission data, such as the meta fields of the meta box. To do so, click on the “Insert JetFormBuilder Macros” button “[ / ]” and add the same fields to the template as they are in the meta box.

In this case, we add the values from the “customer_phone” and “customer_meta” meta fields. To learn how to customize the template and insert different fields, read the How to Generate PDF on Form Submission tutorial.

Once completed, move to the top of the page and press the “Save” button. Then, close the template editor and return to the form. Here, the name of the template will be displayed in the SELECT PDF TEMPLATE field of the Edit Generate PDF pop-up.

Fill in the FILE NAME field or press the “wrench” icon to select the form field, whose name will be used as the file name of the submitted form. In this case, we use the %_template_name% macro that returns the template’s header.

Also, enable the Save generated PDF toggle.

Then, scroll down the pop-up and insert the texts of the ERROR CREATING FILE and ERROR CREATING ATTACHMENT messages, or keep the default ones. 

Once completed, click the “Update” button.

Since, in this case, we focus only on the generation of the PDF file with the selected user data, we apply the “Save Form Record” and “Generate PDF” Post Submit Actions. However, you can apply other ones, for example, attach the created file to an email via the “Send Email” action or redirect to another page using the “Redirect to Page” action. 

Finally, insert the “Action Button” into the form and press the “Publish” button to save the changes.

Add the form to a page

Create a page or open a page/post you need and place the JetForm widget/block/element.

Select the built form in the Choose Form drop-down list. Design the page and save it.

Test the flow

Once completed, move to the front end and select the needed user in the form.

In this case, we select the “Anna Olson” user and submit the form.

Next, we move to the WordPress Dashboard > JetFormBuilder > Form Records tab and open the corresponding Form Record Page. Here, one can observe the form tracking.

Move to the Generated PDF section (the bottom right corner of the page) and press the “View” link to observe the generated file or the “Edit” link to correct it if needed. Also, you can copy the file path link under the Label & Name section and paste this link into the browser to view the created PDF file. 

In this section, we first build the form and configure the “Generate PDF” Post Submit Action. After that, we create an endpoint; finally, we build a page and insert a specific request.

Build the form

Here, we also build the form from scratch. First, after deleting the Welcome block, we type the form’s name (the “generate pdf”, in this case), and add two Hidden Fields and the Action Button. 

Then, we configure their settings as follows. We insert their names (“customer_phone” and “customer_meta”, respectively). For each field, we select the “Manual Input” options in the FIELD VALUE dropdowns and insert the Name/ID of the same fields as they are in the meta box in the VALUE fields. Thus, we add the “customer_phone” and “customer_meta” options, respectively.

In the next step, we move to the Post Submit Actions tab in the JetForm settings. First, we add the “Save Form Record” action, and then we add the “Generate PDF” action.

Next, in the newly appeared Edit Generate PDF pop-up, we select the same template and modify it in the template editor.

Once completed, we return to the Edit Generate PDF pop-up and press the “Update” button.

Create an endpoint

Go to WordPress Dashboard > JetFormBuilder > Endpoints and click the “+ Add new route” button. 

Here, in the newly appeared JetFormBuilder Actions Endpoint window, move to the Settings block and add the created form to the RELATED FORM field (the “generated pdf”, in this case).

Here, set the previously created form in the RELATED FORM field (the “generate pdf”, in this tutorial). Next, select the “WordPress AJAX” option in the ACTION TYPE dropdown.

This option activates the AJAX ACTION SLUG field, where we type the needed slug as follows: “generate-current-user-pdf”.

Next, we need to copy the sample request data.

Go to the Data Fields section on the JetFormBuilder Actions Endpoints page and click the “Sample request” tab.

The requested data will appear in the textarea field below. To copy this data, click the “Copy data for the request” button and save it; we’ll need it in one of the next steps.

Finally, click on the “Update” button.

Design the page

Open a page in the editor you prefer (here, we use Elementor). Customize the page as needed.

In the next step, add the Button widget to the page.

Test the flow

In this case, the workflow fully repeats the workflow as for the previous case. Move to the front end and select the needed user in the form. If the submission was correct, the “Form successfully submitted.” text will appear. Finally, we move to the WordPress Dashboard > JetFormBuilder > Form Records tab and open the corresponding Form Record Page. Here, one can observe the form tracking.