Embed Images/Signatures in a Fillable PDF

Fillable PDFs are a great way to organize information in a clean and professional format that you can trust will always look the same.  Everything works great until you find out that there is not an “image” field to use if you want to be able to embed an image in the PDF.  No worries!  We’ve got a feature that allows you to embed those images directly in your PDF, in any location.

The setup for this feature is fairly straight forward, but can take a little trial & error to align your images perfectly in the PDF.  To show you how you can embed images in your PDF, we’re going to create and sign a Federal W9 form by embedding a signature image.


To get started, we’re going to create a new Document in WebMerge and upload our W9 fillable PDF.  After we upload the document, we’re going to need to go back to the “Manage File” tab to add the settings for embedding the image.  On this page, you’ll notice a section below called “Embed Images in the PDF” with an Enable button next to it.  Go ahead and click that button.

To setup an image, you’ll want to determine the URL for the image (this could be a field,  static text, or a combination).  For this example we are going to name a new field called signature.  What we’ll need to do is choose << Other >> from the field dropdown then enter {$signature} (if you wanted to use a variable inside a url, you could enter something like “http://www.yourdomain.com/image?code={$code}” ) – then we’ll map that field to the actual signature field that is on our form.

Next, we’re going to enter the width, height, and location of the image in the PDF.  This is where it will be a little trial and error to get the correct size of the image and then the correct location.  Go ahead and enter a best guess here and we’ll come back to this.


After we have everything setup, let’s do some testing to make sure we have the image in the correct spot.  To do this, open a new tab or browser window and go to the “Test” page in WebMerge.  On this page you should see your fields.  Go ahead and find the field you used for the image and enter in any URL for an image (if you don’t have one handy, use http://www.webmerge.me/images/image.php).  Submit a test and take a look at the PDF that is generated.  If your image is off, simply go back to the Manage File tab and update the embed settings for that image.  Continue this process until you get the image just right.

That’s it!  Now, for our example, we’re going to hook this up to a Formstack form to collect the information and signature.  Here’s what the final document looks like:

Have more questions? Submit a request

5 Comments

  • Avatar
    Marc Lanz

    Such a great support! Thank you!

  • Avatar
    Brendan Graetz

    Agreed - I'm having a little trouble on the test phase - but I will get there!

  • Avatar
    Rustin Gibbs

    Hi Jeremy,

    How can I get support on this feature? I have my form made through CognitoForms with uploaded images. I then submit to Webmerge to capture the data sent and pull the proper JSON code for the fields submitted. I have then field mapped the PDF and added in the Manage File URL for each embedded image that pulls the info from the JSON field of the upload. No matter what I try, I can't get it to work.

    Please email me at tom.schiemer@lightspeedvt.com if you can help. Thanks.

  • Avatar
    Jeremy Clarke

    Hi Rustin,

    Please send an email to support@webmerge.me for help or click the "Submit a request" link at the top of this page :)

  • Avatar
    Esther Berzunza

    This worked very well thank you!

    To figure out the necessary ("default") width and height to avoid distorting the signature, I looked at the original image FormStack stored on S3.

    Just a suggestion: it would be helpful if the "embed images" settings simply defaulted to preserve the original image size; i.e., don't ask for width and height at all. But, I do appreciate the usefulness of an "override" width and height, to scale the original image into the merged PDF.

Please sign in to leave a comment.
Powered by Zendesk