Move and resize PDF form fields in JavaScript

12 Feb 20261 minute to read

  • Move: Drag the form field to reposition it.
  • Resize: Use the resize handles to change width and height.

Moving and resizing a form field

Move and resize fields programmatically (API)

You can set absolute bounds or move fields by a delta.

Set absolute bounds

<button id="resizeMove">Resize and Move form fields</button>
// Move & resize by setting absolute bounds
document.getElementById('resizeMove').addEventListener('click', function () {
  // Retrieve form fields collection
  var fields = pdfviewer.retrieveFormFields();
  // Find the textbox field by name (Here field name is First Name)
  var field = (fields || []).find(function (f) { return f && f.name === 'First Name'; }) || (fields || [])[0]; // Update Name accordingly
  if (field) {
    // Update bounds to move or resize form fields
    pdfviewer.formDesignerModule.updateFormField(field, {
      bounds: { X: 140, Y: 210, Width: 220, Height: 24 } // new absolute position & size
    });
  }
});

See also