How to embed an image

We have already covered file attachment and field mapping features of the PDF Forms Filler for CF7 plugin. Let’s now explore the feature which you can use to embed images into your PDF file. As an example, we will use this demo document.

There are many use cases for embedding images:

  1. User needs to add a personal photo to your PDF when filling out the form.
  2. All pages of the PDF file need to have an image in the form of your stamp or seal.
  3. User’s signature needs to be added to the PDF (additional plugin is required).

There are many different ways to use the Image Embedding Tool for embedding of images into your PDF file:

  1. Image uploaded by the user as part of the form submission
  2. Image from a URL provided by the user as part of the form submission
  3. Image provided by a static URL
  4. Image provided by a dynamic URL

Embed a User Uploaded Image File

You will need to create a file tag in your CF7 form with which the user can upload their image. The tag can be created with the file button in the CF7 form tab’s toolbar.

Access the PDF Form form-tag generator thickbox, scroll down to the Image Embedding Tool, select the file field from the CF7 field/mail-tags dropdown, select the PDF file and page that you want to embed the image into and click the Embed Image button.

Adjust the bounding box where the image will be located on the page.

Let’s see an example:

  1. In our previously created form (see Image 4) we added the [file image-embedding] tag. This creates an upload form field on the front-end (see Image 5).

  2. Let’s use the CF7 field/mail-tags dropdown in the Image Embedding Tool to select the newly created image-embedding field. We need to select the PDF file in the PDF file dropdown and 1 in the Page dropdown.

    Image 1

    We are going to click the Embed Image button and go to the next step.

  3. We now need to choose the area where the image will be embedded in the PDF file. We are going to adjust the bounding box to where the image should appear. We can change the boundaries with the cursor or using the numeric input boxes that appear below the page screenshot.

    Image 2

    Once all the settings are adjusted, we need to save the CF7 form by clicking the Return to Form button and the Save button. Now when our user fills in and submits our contact form, an email will be sent with a PDF that contains user’s uploaded image in the location where we put our bounding box.

    Image 3

Embed an Image from a User-provided URL

The URL form-tag can be used in the same way as the file form-tag. The user can then enter the URL of the image instead of uploading the file from their device.

You can also use third party CF7 add-on plugins that provide form-tags which return a URL to an image, such as the Contact Form 7 Signature Addon.

Embed an Image from a Static or Dynamic URL

You can specify a custom URL or a collection of mail-tags as a URL as the source of the image to be embedded.

If we select Custom text string... in the CF7 field/mail-tags dropdown and click the Embed Image button, we will be able to enter any string URL. For example, we can enter a URL to the plugin icon: https://raw.githubusercontent.com/maximum-software/pdf-forms-for-contact-form-7/master/assets/icon.svg.

Image 4

Similarly, instead of linking to a static image, you can use a URL to a dynamically generated image, such as a QR Code: https://api.qrserver.com/v1/create-qr-code/?data=example

Other useful information can be transmitted in the URL using special mail-tags: https://api.qrserver.com/v1/create-qr-code/?data=[_site_url]

You can find more information about special mail-tags in Contact Form 7 Docs.