How to Add PDF Fillable Fields
Learn how to add fillable fields to PDFs during HTML to PDF conversion.
Overview
With the PDFGate API, you can generate PDFs that include interactive fillable fields directly from your existing HTML input elements. This guide highlights important limitations when converting URLs and walks through a few practical examples, including digital signature fields.
Get started example
In this example, we’ll use the enableFormFields and html options of the HTML to PDF API. You can also send a URL instead of raw HTML, however there are some limitations on this approach and you can see the “Convert URL” section below for more details.
html: The raw HTML including the input fields we want to convert as fillable fields.enableFormFields: Enables the conversion of HTML input elements into interactive PDF form fields.
curl https://api.pdfgate.com/v1/generate/pdf \
-X POST \
-H "Content-Type: application/json" \
-H "Authorization: Bearer YOUR_API_KEY" \
--data '{
"html": "<style>.fieldContainer{display:flex;flex-direction:column;margin-top:10px;}input,textarea,select{width:350px;margin:5px 0;padding:5px;border:1px solid rgb(225,222,222);}input[type=checkbox],input[type=radio]{width:20px;}label{font-size:18px;}</style><div class=\"fieldContainer\"><label for=\"name\">Name</label><input type=\"text\" name=\"name\" /></div><div class=\"fieldContainer\"><label for=\"email\">Email</label><input type=\"email\" name=\"email\" /></div><div class=\"fieldContainer\"><label for=\"bio\">Bio</label><textarea name=\"bio\"></textarea></div><div class=\"fieldContainer\"><label for=\"occupation\">Occupation</label><select name=\"occupation\"><option>Freelancer</option><option>Government Employee</option><option>Private Sector Employee</option><option>Self-Employed</option></select></div><div class=\"fieldContainer\"><label for=\"experience\">Years of Experience</label><input type=\"number\" name=\"experience\" min=\"0\" /></div><div class=\"fieldContainer\"><label>Subscribe to newsletter</label><input type=\"checkbox\" name=\"newsletter\" /></div><div class=\"fieldContainer\"><label>Employment Type</label><div><input type=\"radio\" name=\"employment_type\" value=\"full_time\" /> Full-time</div><div><input type=\"radio\" name=\"employment_type\" value=\"part_time\" /> Part-time</div></div><div class=\"fieldContainer\"><label for=\"start_date\">Start Date</label><input type=\"date\" name=\"start_date\" /></div><div class=\"fieldContainer\"><label for=\"start_time\">Start Time</label><input type=\"time\" name=\"start_time\" /></div><div class=\"fieldContainer\"><label for=\"appointment\">Appointment</label><input type=\"datetime-local\" name=\"appointment\" /></div>",
"enableFormFields": true,
"pageSizeType": "a4"
}' \
-o output.pdf
Convert URL
To convert a URL with fillable fields, you simply have to send the url parameter instead of sending raw HTML as shown in the get started example above. In order to fully convert the html inputs of the URL, you need to ensure the fields are 100% visible on the page. For example, a page may visually display what looks like an input field, but the actual input element is hidden using CSS (such as display: none) and replaced with a styled <div> for design purposes. Even though the field appears visible to the user, the real <input /> element is not rendered on the page and therefore cannot be converted into a fillable PDF field.
Examples
Style a text field
This example shows how to customize the appearance of a text input field using PDFGate’s custom HTML attributes.
<input
type="text"
pdfgate-border-color="red"
pdfgate-border-width="1"
pdfgate-font-size="13"
pdfgate-background-color="#f2f4f7"
/>Checkbox
The checked state of the checkbox is preserved when the PDF is generated.
<input
type="checkbox"
checked
/>Digital signature
This creates an empty signature field that can be signed in compatible PDF readers.
<pdfgate-signature-field
style="width:200px;height:100px"
name="signature"
/>For a complete list of supported fields and configuration options, see the PDF Fillable Fields API Reference.
