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:
- User needs to add a personal photo to your PDF when filling out the form.
- All pages of the PDF file need to have an image in the form of your stamp or seal.
- 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:
- Image uploaded by the user as part of the form submission
- Image from a URL provided by the user as part of the form submission
- Image provided by a static URL
- 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.
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:
Let’s use the
CF7 field/mail-tagsdropdown in the
Image Embedding Toolto select the newly created
image-embeddingfield. We need to select the PDF file in the
PDF filedropdown and
We are going to click the
Embed Imagebutton and go to the next step.
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.
Once all the settings are adjusted, we need to save the CF7 form by clicking the
Return to Formbutton and the
Savebutton. 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.
Embed an Image from a User-provided URL
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.
Similarly, instead of linking to a static image, you can use a URL to a dynamically generated image, such as a QR Code: https://qrtag.net/api/qr_12.svg?url=https://www.qrtag.net
Other useful information can be transmitted in the URL using special mail-tags: https://qrtag.net/api/qr_12.svg?url=[_site_url]
You can find more information about special mail-tags in Contact Form 7 Docs.