Skip to content

Add a text watermark (without Editor)

Use this snippet to automatically overlay text on the bottom-left of every uploaded image if you don’t have the Image Hopper Editor add-on enabled. If you do have the Editor, see Add a text watermark automatically for an alternative approach.

Automatically add a text watermark to the bottom-left of every image:

// Add a text watermark to the bottom-left corner.
gform.addFilter('image_hopper_filepond_config', function (config, FilePond, $form, currentPage, formId, fieldId, entryId, files, inputField) {
  FilePond.setOptions({
    fileMetadataObject: {
      // The `markup` property defines our watermark.
      markup: [
        [
          'text',
          {
            top: '95%',
            left: '3%',
            text: new Date().toLocaleDateString(),
            textAlign: 'left',
            fontColor: '#000000',
            fontSize: '20pt',
          }
        ],
      ]
    }
  });
  config.imageTransformOutputQualityMode = 'always';
  return config;
});

Note: To use the server time instead of the client time, create a hidden Gravity Forms field with a default value of {date_mdy}, then retrieve its value: document.getElementById('input_formID_fieldID').value.