How to Place an Acrobat JavaScript Button at the Top of a PDF Page
Question details
The user wants to know the correct Acrobat JavaScript syntax to calculate page boundaries and insert an interactive button field at the top of a specific PDF page.

- Product
- Adobe Acrobat
- Device & OS
- not provided
- Scenario
- Creating an automated script to precisely anchor a mouse-up action button to the upper-left or top section of a PDF document page.
- Observed behavior
- The user requires the correct coordinate math relying on the page Crop Box and zero-based indexing to adjust the field rectangle dimensions properly.
Ensure you have access to a PDF editor with document-level JavaScript execution capabilities and verify that your document's security settings permit form field creation.
Use getPageBox and Coordinate Math to Anchor the Button
Utilize the page's Crop Box and Acrobat's coordinate system to define the exact rectangle array for the button field.
PDF page geometry uses a specific array format [Left, Top, Right, Bottom] for field rectangles. Keep in mind that Acrobat uses a zero-based index for pages, meaning the first page is page 0.
Instead of randomly guessing dimensions, extract the visible page boundaries using the Crop box, then perform basic addition and subtraction to define the margins for your button.
Use the getPageBox method to retrieve the coordinates. Enter: var fldRect = this.getPageBox("Crop", this.pageNum);
Adjust the left edge (index 0) by adding the desired margin. For example, to set it half an inch from the left, enter: fldRect[0] += 36;
Adjust the top edge (index 1) by subtracting the margin from the top boundary. Enter: fldRect[1] -= 36;
Adjust the right edge (index 2) to set the total width of the button field. Enter: fldRect[2] -= 436;
Adjust the bottom edge (index 3) to set the height relative to the top edge. Enter: fldRect[3] = fldRect[1] - 36;
Execute the addField method using the calculated rectangle array. Enter: var oFld = this.addField(cName, "button", this.pageNum, fldRect);

Easily Edit and Manage PDF Forms Visually with WPS Office
If you prefer a visual interface over writing complex JavaScript code, WPS Office offers an intuitive PDF editor to insert, edit, and manage form fields and interactive elements effortlessly.
- 1. Open PDF in WPS Office: Launch WPS Office and open your target PDF document in the PDF Editor.
- 2. Access Form Tools: Navigate to the 'Form' tab located on the top navigation toolbar to reveal interactive field options.
- 3. Select Button Tool: Click the 'Button' icon or your desired form field type from the menu.
- 4. Draw the Button: Click and drag your cursor at the top of the document page to visually draw the button exactly where you want it.
- 5. Customize Properties: Right-click the newly created button and select 'Properties' to adjust its appearance, label, and interactive actions without coding.

Frequently Asked Questions
What does the array [Left, Top, Right, Bottom] mean in PDF page coordinates?
In Acrobat JavaScript, field coordinates are defined by a bounding box array containing four values. The first value (index 0) represents the left edge, the second (index 1) is the top edge, the third (index 2) is the right edge, and the fourth (index 3) is the bottom edge of the rectangle.
Why does my script add the button to the wrong PDF page?
Acrobat JavaScript uses zero-based indexing for page numbers. This means the first page of your PDF is represented as page 0, the second as page 1, and so on. Ensure your script references the correct numerical index or uses 'this.pageNum' for the current page.
What is the Crop Box in a PDF document?
The Crop Box defines the region of the PDF page to which its contents are clipped when displayed or printed. By using 'this.getPageBox("Crop", this.pageNum)', you ensure your JavaScript calculates boundaries based on the visible area of the page rather than the entire media canvas.




