Embedding an Image into a PDF File

We have previously discussed the file attachment and field mapping functionalities offered by the PDF Forms Filler for WPForms plugin. Now, let’s delve into a feature that enables you to seamlessly embed images into your PDF file. To illustrate, we will continue using the demo document from the fields mapping tutorial.

There are diverse use cases for image embedding:

  • Users may wish to incorporate a personal photo into their PDF when completing the form.
  • All pages of the PDF may require an image, such as your stamp or seal.
  • Incorporating the user’s signature into the PDF (requires an additional plugin, WPForms Signatures).

The Image Embedding Tool offers various methods to embed images into your PDF file:

  • Uploading an image as part of the form submission by the user.
  • Utilizing an image from a URL provided by the user during form submission.
  • Incorporating an image from a static URL.
  • Displaying an image from a dynamic URL.

Embed a User Uploaded Image File

To allow users to upload an image, create a File Upload field in your WPForms form. Follow these steps:

  1. Navigate to Fields > Add Fields > Fancy Fields tab in your WPForms form builder.

  2. Go to Settings > PDF Forms and find the Image Embedding Tool. Select the File Upload field from the WPForms field / smart tags dropdown. Choose the PDF file and page where you want to embed the image, then click the Embed Image button.

    Image Embedding Tool Interface

  3. Use the cursor or the number entry fields to adjust the bounding box to define the position of the image on the page.

    Adjusting Image Bounding Box

  4. After adjusting the settings, save the WPForms form by clicking the Save button.

    When a user fills and submits the contact form, an email will be sent with a PDF containing the user’s uploaded image at the specified bounding box location.

    PDF with Embedded User Image

Embed an Image from a User-provided URL

The Website / URL field can be utilized similarly to the File Upload field. Users have the option to input the image URL instead of uploading a file from their device. The Website / URL field can be generated within the WPForms form Fields > Add Fields > Fancy Fields tab.

Embedding an Image from a Static or Dynamic URL

You have the flexibility to specify either a custom URL or a set of smart tags as a URL source for the image you want to embed.

When you choose Custom text string... from the WPForms field / smart tags dropdown and click the Embed Image button, you can enter any string URL.

Custom URL for Image Embedding

Similarly, rather than linking to a static image, you can use a URL pointing to a dynamically generated image, such as a QR Code: https://qrtag.net/api/qr_12.svg?url=https://www.qrtag.net

Additional valuable information can be conveyed in the URL using special smart tags: https://qrtag.net/api/qr_12.svg?url={page_url}

For further details on special smart tags, refer to the WPForms Docs.