---
title: "Generate fillable PDF forms server-side | Nutrient"
canonical_url: "https://www.nutrient.io/guides/document-engine/pdf-generation/from-html/fillable-pdf-forms/"
md_url: "https://www.nutrient.io/guides/document-engine/pdf-generation/from-html/fillable-pdf-forms.md"
last_updated: "2026-05-25T18:42:17.707Z"
description: "Learn how to create a PDF with fillable form data using JavaScript, Python, Java, C#, and PHP in this comprehensive guide."
---
# Generate fillable PDF forms from HTML
This guide will take you through the process of generating a PDF containing fillable form data.
### JAVASCRIPT
PDF Generation allows you to create fillable PDF forms from HTML. In this guide, you’ll create a simple personalized form in JavaScript. You can use the templating language [Mustache](http://mustache.github.io/), which allows you to inject data into a previously prepared HTML file. This is how your form will look:
```html
Subject: PDF Generation FTW!
Dear {{name}}
Please fill the following form and send it back to us.
Signed John Smith, Vienna on {{date}}
```
First, the data for `{{name}}` and `{{date}}` needs to be defined. In practice, this data may come from an external source or database, but for this example, you’ll define the data in a JSON file:
```json
{
"name": "John Smith Jr.",
"date": "29 February, 2020"
}
```
Now, run the `mustache` command to produce a final HTML document with the template arguments replaced:
```js
const mustache = require("mustache");
const fs = require("fs");
const page = fs.readFileSync("page.mustache").toString();
const data = JSON.parse(fs.readFileSync("data.json").toString());
const outputHTML = mustache.render(page, data);
```
Run the JavaScript with Node.js:
```shell
node mustache-example.js
```
Once you’ve created your HTML in JavaScript, send a request to the [`/api/documents`](https://www.nutrient.io/api/reference/document-engine/upstream/#tag/Documents/operation/upload-document) endpoint, sending the [PDF Generation schema](https://www.nutrient.io/guides/product-archives-and-deprecated-solutions.md) with the HTML file you just created:
### SHELL
```shell
curl -X POST http://localhost:5000/api/documents \
-H "Authorization: Token token=" \
-F page.html=@/path/to/page.html \
-F generation='{
"html": "page.html"
}'
```
### HTTP
```http
POST /api/documents HTTP/1.1
Content-Type: multipart/form-data; boundary=customboundary
Authorization: Token token=
--customboundary
Content-Disposition: form-data; name="page.html"; filename="page.html"
Content-Type: text/html
--customboundary
Content-Disposition: form-data; name="generation"
Content-Type: application/json
{
"html": "page.html"
}
--customboundary--
```
The final PDF will look like this:
## Adding watermarks
Once you have the basics of PDF generation down, you might want to watermark your PDF. You can do this by including some additional HTML:
```html
My Watermark
Subject: PDF Generation FTW!
Dear {{name}}
Please fill the following form and send it back to us.
Signed John Smith, Vienna on {{date}}
```
This element will be rendered on all pages on top of all other content. The HTML above uses some text, but you could also use an image. The watermark can also be positioned any way you want.
## Adding a cover page
There are two ways to add a cover page to a PDF you generated: You can generate the cover page as part of the HTML, or you can use a PDF you already have.
### Using HTML
If you want to add a cover page to your generated PDF, you can do so by adding additional HTML:
```html
My Cover Page
Subject: PDF Generation FTW!
Dear {{name}}
Please fill the following form and send it back to us.
Signed John Smith, Vienna on {{date}}
```
This will add another page before the rest of the content, and you can use the new page as your cover page.
### Using a PDF
Instead of adding some HTML as a cover page, you can add a PDF. This can be done by applying an `importDocument` operation on upload:
### SHELL
```shell
curl -X POST http://localhost:5000/api/documents \
-H "Authorization: Token token=" \
-F page.html=@/path/to/page.html \
-F cover.pdf=@/path/to/cover.pdf \
-F generation='{
"html": "page.html"
}' \
-F operations='{
"operations": [
{
"type": "importDocument",
"beforePageIndex": 0,
"document": "cover.pdf"
}
]
}'
```
### HTTP
```http
POST /api/documents HTTP/1.1
Content-Type: multipart/form-data; boundary=customboundary
Authorization: Token token=
--customboundary
Content-Disposition: form-data; name="page.html"; filename="page.html"
Content-Type: text/html
--customboundary
Content-Disposition: form-data; name="cover.pdf"; filename="cover.pdf"
Content-Type: application/pdf
--customboundary
Content-Disposition: form-data; name="generation"
Content-Type: application/json
{
"html": "page.html"
}
--customboundary
Content-Disposition: form-data; name="operations"
Content-Type: application/json
{
"operations": [
{
"type": "importDocument",
"beforePageIndex": 0,
"document": "cover.pdf"
}
]
}
--customboundary--
```
The provided PDF will be appended before the first page of the HTML, and it’ll serve as your cover page.
### PYTHON
PDF Generation allows you to create fillable PDF forms from HTML. In this guide, you’ll create a simple personalized form in Python. You can use the templating language [Mustache](http://mustache.github.io/), which allows you to inject data into a previously prepared HTML file. This is how your form will look:
```html
Subject: PDF Generation FTW!
Dear {{name}}
Please fill the following form and send it back to us.
Signed John Smith, Vienna on {{date}}
```
First, you need to replace your template data with something real. Define the data to replace the template arguments in code, though in practice, this data may come from an external source or database.
To perform the replacement, you’ll use the [Chevron](https://github.com/noahmorrison/chevron) package, which is an implementation of the [Mustache](http://mustache.github.io/) templating system.
The following will stream the `page.mustache` file (the HTML seen above) into Chevron to perform the replacement of `{{name}}` and `{{date}}`:
```python
with open('page.mustache', 'r') as f:
final_html = chevron.render(f, {'name': 'John Smith Jr.', "date": "29 February, 2020"})
```
Once you’ve created your HTML in Python, send a request to the [`/api/documents`](https://www.nutrient.io/api/reference/document-engine/upstream/#tag/Documents/operation/upload-document) endpoint, sending the [PDF Generation schema](https://www.nutrient.io/guides/product-archives-and-deprecated-solutions.md) with the HTML file you just created:
### SHELL
```shell
curl -X POST http://localhost:5000/api/documents \
-H "Authorization: Token token=" \
-F page.html=@/path/to/page.html \
-F generation='{
"html": "page.html"
}'
```
### HTTP
```http
POST /api/documents HTTP/1.1
Content-Type: multipart/form-data; boundary=customboundary
Authorization: Token token=
--customboundary
Content-Disposition: form-data; name="page.html"; filename="page.html"
Content-Type: text/html
--customboundary
Content-Disposition: form-data; name="generation"
Content-Type: application/json
{
"html": "page.html"
}
--customboundary--
```
The final PDF will look like this:
## Adding watermarks
Once you have the basics of PDF generation down, you might want to watermark your PDF. You can do this by including some additional HTML:
```html
My Watermark
Subject: PDF Generation FTW!
Dear {{name}}
Please fill the following form and send it back to us.
Signed John Smith, Vienna on {{date}}
```
This element will be rendered on all pages on top of all other content. The HTML above uses some text, but you could also use an image. The watermark can also be positioned any way you want.
## Adding a cover page
There are two ways to add a cover page to a PDF you generated: You can generate the cover page as part of the HTML, or you can use a PDF you already have.
### Using HTML
If you want to add a cover page to your generated PDF, you can do so by adding additional HTML:
```html
My Cover Page
Subject: PDF Generation FTW!
Dear {{name}}
Please fill the following form and send it back to us.
Signed John Smith, Vienna on {{date}}
```
This will add another page before the rest of the content, and you can use the new page as your cover page.
### Using a PDF
Instead of adding some HTML as a cover page, you can add a PDF. This can be done by applying an `importDocument` operation on upload:
### SHELL
```shell
curl -X POST http://localhost:5000/api/documents \
-H "Authorization: Token token=" \
-F page.html=@/path/to/page.html \
-F cover.pdf=@/path/to/cover.pdf \
-F generation='{
"html": "page.html"
}' \
-F operations='{
"operations": [
{
"type": "importDocument",
"beforePageIndex": 0,
"document": "cover.pdf"
}
]
}'
```
### HTTP
```http
POST /api/documents HTTP/1.1
Content-Type: multipart/form-data; boundary=customboundary
Authorization: Token token=
--customboundary
Content-Disposition: form-data; name="page.html"; filename="page.html"
Content-Type: text/html
--customboundary
Content-Disposition: form-data; name="cover.pdf"; filename="cover.pdf"
Content-Type: application/pdf
--customboundary
Content-Disposition: form-data; name="generation"
Content-Type: application/json
{
"html": "page.html"
}
--customboundary
Content-Disposition: form-data; name="operations"
Content-Type: application/json
{
"operations": [
{
"type": "importDocument",
"beforePageIndex": 0,
"document": "cover.pdf"
}
]
}
--customboundary--
```
The provided PDF will be appended before the first page of the HTML, and it’ll serve as your cover page.
### JAVA
PDF Generation allows you to create fillable PDF forms from HTML. In this guide, you’ll create a simple personalized form in Java. You can use the templating language [Mustache](http://mustache.github.io/), which allows you to inject data into a previously prepared HTML file. This is how your form will look:
```html
Subject: PDF Generation FTW!
Dear {{name}}
Please fill the following form and send it back to us.
Signed John Smith, Vienna on {{date}}
```
First, you need to replace your template data with something real. Define the data to replace the template arguments in code, though in practice, this data may come from an external source or database.
To perform the replacement, you’ll use the [Mustache.java](https://github.com/spullara/mustache.java) package, which is an implementation of the [Mustache](http://mustache.github.io/) templating system.
The following will stream the `page.mustache` file from the resources (the HTML seen above) into Mustache to replace `{{name}}` and `{{date}}`, and the result will be written to `stringWriter`:
```java
HashMap scopes = new HashMap<>();
scopes.put("name", "John Smith Jr.");
scopes.put("date", "29 February, 2020");
InputStream is = Main.class.getClassLoader().getResourceAsStream("assets/page.mustache");
InputStreamReader mustacheFile = new InputStreamReader(is);
StringWriter stringWriter = new StringWriter();
MustacheFactory mf = new DefaultMustacheFactory();
Mustache mustache = mf.compile(mustacheFile, "example");
mustache.execute(stringWriter, scopes);
```
Once you’ve created your HTML in Java, send a request to the [`/api/documents`](https://www.nutrient.io/api/reference/document-engine/upstream/#tag/Documents/operation/upload-document) endpoint, sending the [PDF Generation schema](https://www.nutrient.io/guides/product-archives-and-deprecated-solutions.md) with the HTML file you just created:
### SHELL
```shell
curl -X POST http://localhost:5000/api/documents \
-H "Authorization: Token token=" \
-F page.html=@/path/to/page.html \
-F generation='{
"html": "page.html"
}'
```
### HTTP
```http
POST /api/documents HTTP/1.1
Content-Type: multipart/form-data; boundary=customboundary
Authorization: Token token=
--customboundary
Content-Disposition: form-data; name="page.html"; filename="page.html"
Content-Type: text/html
--customboundary
Content-Disposition: form-data; name="generation"
Content-Type: application/json
{
"html": "page.html"
}
--customboundary--
```
The final PDF will look like this:
## Adding watermarks
Once you have the basics of PDF generation down, you might want to watermark your PDF. You can do this by including some additional HTML:
```html
My Watermark
Subject: PDF Generation FTW!
Dear {{name}}
Please fill the following form and send it back to us.
Signed John Smith, Vienna on {{date}}
```
This element will be rendered on all pages on top of all other content. The HTML above uses some text, but you could also use an image. The watermark can also be positioned any way you want.
## Adding a cover page
There are two ways to add a cover page to a PDF you generated: You can generate the cover page as part of the HTML, or you can use a PDF you already have.
### Using HTML
If you want to add a cover page to your generated PDF, you can do so by adding additional HTML:
```html
My Cover Page
Subject: PDF Generation FTW!
Dear {{name}}
Please fill the following form and send it back to us.
Signed John Smith, Vienna on {{date}}
```
This will add another page before the rest of the content, and you can use the new page as your cover page.
### Using a PDF
Instead of adding some HTML as a cover page, you can add a PDF. This can be done by applying an `importDocument` operation on upload:
### SHELL
```shell
curl -X POST http://localhost:5000/api/documents \
-H "Authorization: Token token=" \
-F page.html=@/path/to/page.html \
-F cover.pdf=@/path/to/cover.pdf \
-F generation='{
"html": "page.html"
}' \
-F operations='{
"operations": [
{
"type": "importDocument",
"beforePageIndex": 0,
"document": "cover.pdf"
}
]
}'
```
### HTTP
```http
POST /api/documents HTTP/1.1
Content-Type: multipart/form-data; boundary=customboundary
Authorization: Token token=
--customboundary
Content-Disposition: form-data; name="page.html"; filename="page.html"
Content-Type: text/html
--customboundary
Content-Disposition: form-data; name="cover.pdf"; filename="cover.pdf"
Content-Type: application/pdf
--customboundary
Content-Disposition: form-data; name="generation"
Content-Type: application/json
{
"html": "page.html"
}
--customboundary
Content-Disposition: form-data; name="operations"
Content-Type: application/json
{
"operations": [
{
"type": "importDocument",
"beforePageIndex": 0,
"document": "cover.pdf"
}
]
}
--customboundary--
```
The provided PDF will be appended before the first page of the HTML, and it’ll serve as your cover page.
### C# (.NET)
PDF Generation allows you to create fillable PDF forms from HTML. In this guide, you’ll create a simple personalized form in C#/.NET. You can use the templating language [Mustache](http://mustache.github.io/), which allows you to inject data into a previously prepared HTML file. This is how your form will look:
```html
Subject: PDF Generation FTW!
Dear {{name}}
Please fill the following form and send it back to us.
Signed John Smith, Vienna on {{date}}
```
First, you need to replace your template data with something real. Define the data to replace the template arguments in code, though in practice, this data may come from an external source or database.
To perform the replacement, you’ll use the [Stubble](https://www.nuget.org/packages/Stubble.Core/) package, which is an implementation of the [Mustache](http://mustache.github.io/) templating system.
The following will stream the `page.mustache` file (the HTML seen above) into Stubble to replace `{{name}}` and `{{date}}` with `replacementData`:
```csharp
var stubble = new StubbleBuilder().Build();
var replacementData = new Dictionary
{
{
"name", "John Smith"
},
{
"date", "29 February, 2020"
}
};
using var streamReader = new StreamReader("page.mustache");
var finalHtml = await stubble.RenderAsync(await streamReader.ReadToEndAsync(), replacementData);
```
Once you’ve created your HTML in C#/.NET, send a request to the [`/api/documents`](https://www.nutrient.io/api/reference/document-engine/upstream/#tag/Documents/operation/upload-document) endpoint, sending the [PDF Generation schema](https://www.nutrient.io/guides/product-archives-and-deprecated-solutions.md) with the HTML file you just created:
### SHELL
```shell
curl -X POST http://localhost:5000/api/documents \
-H "Authorization: Token token=" \
-F page.html=@/path/to/page.html \
-F generation='{
"html": "page.html"
}'
```
### HTTP
```http
POST /api/documents HTTP/1.1
Content-Type: multipart/form-data; boundary=customboundary
Authorization: Token token=
--customboundary
Content-Disposition: form-data; name="page.html"; filename="page.html"
Content-Type: text/html
--customboundary
Content-Disposition: form-data; name="generation"
Content-Type: application/json
{
"html": "page.html"
}
--customboundary--
```
The final PDF will look like this:
## Adding watermarks
Once you have the basics of PDF generation down, you might want to watermark your PDF. You can do this by including some additional HTML:
```html
My Watermark
Subject: PDF Generation FTW!
Dear {{name}}
Please fill the following form and send it back to us.
Signed John Smith, Vienna on {{date}}
```
This element will be rendered on all pages on top of all other content. The HTML above uses some text, but you could also use an image. The watermark can also be positioned any way you want.
## Adding a cover page
There are two ways to add a cover page to a PDF you generated: You can generate the cover page as part of the HTML, or you can use a PDF you already have.
### Using HTML
If you want to add a cover page to your generated PDF, you can do so by adding additional HTML:
```html
My Cover Page
Subject: PDF Generation FTW!
Dear {{name}}
Please fill the following form and send it back to us.
Signed John Smith, Vienna on {{date}}
```
This will add another page before the rest of the content, and you can use the new page as your cover page.
### Using a PDF
Instead of adding some HTML as a cover page, you can add a PDF. This can be done by applying an `importDocument` operation on upload:
### SHELL
```shell
curl -X POST http://localhost:5000/api/documents \
-H "Authorization: Token token=" \
-F page.html=@/path/to/page.html \
-F cover.pdf=@/path/to/cover.pdf \
-F generation='{
"html": "page.html"
}' \
-F operations='{
"operations": [
{
"type": "importDocument",
"beforePageIndex": 0,
"document": "cover.pdf"
}
]
}'
```
### HTTP
```http
POST /api/documents HTTP/1.1
Content-Type: multipart/form-data; boundary=customboundary
Authorization: Token token=
--customboundary
Content-Disposition: form-data; name="page.html"; filename="page.html"
Content-Type: text/html
--customboundary
Content-Disposition: form-data; name="cover.pdf"; filename="cover.pdf"
Content-Type: application/pdf
--customboundary
Content-Disposition: form-data; name="generation"
Content-Type: application/json
{
"html": "page.html"
}
--customboundary
Content-Disposition: form-data; name="operations"
Content-Type: application/json
{
"operations": [
{
"type": "importDocument",
"beforePageIndex": 0,
"document": "cover.pdf"
}
]
}
--customboundary--
```
The provided PDF will be appended before the first page of the HTML, and it’ll serve as your cover page.
### PHP
PDF Generation allows you to create fillable PDF forms from HTML. In this guide, you’ll create a simple personalized form in PHP. You can use the templating language [Mustache](http://mustache.github.io/), which allows you to inject data into a previously prepared HTML file. This is how your form will look:
```html
Subject: PDF Generation FTW!
Dear {{name}}
Please fill the following form and send it back to us.
Signed John Smith, Vienna on {{date}}
```
First, you need to replace your template data with something real. Define the data to replace the template arguments in code, though in practice, this data may come from an external source or database.
To perform the replacement, you’ll use the [Mustache.php](https://github.com/bobthecow/mustache.php) package, which is an implementation of the [Mustache](http://mustache.github.io/) templating system.
The following will open the `page.mustache` file (the HTML seen above) from the `views` directory as a template and then call `render` to perform the replacement of `{{name}}` and `{{date}}`, which is echoed to the command line:
```php
$mustache = new Mustache_Engine(array(
'entity_flags' => ENT_QUOTES,
'loader' => new Mustache_Loader_FilesystemLoader(dirname(__FILE__).'/views')
));
$tpl = $mustache->loadTemplate('page');
echo $tpl->render(array('name' => 'John Smith', 'date' => '29 February, 2020'));
```
Once you’ve created your HTML in PHP, send a request to the [`/api/documents`](https://www.nutrient.io/api/reference/document-engine/upstream/#tag/Documents/operation/upload-document) endpoint, sending the [PDF Generation schema](https://www.nutrient.io/guides/product-archives-and-deprecated-solutions.md) with the HTML file you just created:
### SHELL
```shell
curl -X POST http://localhost:5000/api/documents \
-H "Authorization: Token token=" \
-F page.html=@/path/to/page.html \
-F generation='{
"html": "page.html"
}'
```
### HTTP
```http
POST /api/documents HTTP/1.1
Content-Type: multipart/form-data; boundary=customboundary
Authorization: Token token=
--customboundary
Content-Disposition: form-data; name="page.html"; filename="page.html"
Content-Type: text/html
--customboundary
Content-Disposition: form-data; name="generation"
Content-Type: application/json
{
"html": "page.html"
}
--customboundary--
```
The final PDF will look like this:
## Adding watermarks
Once you have the basics of PDF generation down, you might want to watermark your PDF. You can do this by including some additional HTML:
```html
My Watermark
Subject: PDF Generation FTW!
Dear {{name}}
Please fill the following form and send it back to us.
Signed John Smith, Vienna on {{date}}
```
This element will be rendered on all pages on top of all other content. The HTML above uses some text, but you could also use an image. The watermark can also be positioned any way you want.
## Adding a cover page
There are two ways to add a cover page to a PDF you generated: You can generate the cover page as part of the HTML, or you can use a PDF you already have.
### Using HTML
If you want to add a cover page to your generated PDF, you can do so by adding additional HTML:
```html
My Cover Page
Subject: PDF Generation FTW!
Dear {{name}}
Please fill the following form and send it back to us.
Signed John Smith, Vienna on {{date}}
```
This will add another page before the rest of the content, and you can use the new page as your cover page.
### Using a PDF
Instead of adding some HTML as a cover page, you can add a PDF. This can be done by applying an `importDocument` operation on upload:
### SHELL
```shell
curl -X POST http://localhost:5000/api/documents \
-H "Authorization: Token token=" \
-F page.html=@/path/to/page.html \
-F cover.pdf=@/path/to/cover.pdf \
-F generation='{
"html": "page.html"
}' \
-F operations='{
"operations": [
{
"type": "importDocument",
"beforePageIndex": 0,
"document": "cover.pdf"
}
]
}'
```
### HTTP
```http
POST /api/documents HTTP/1.1
Content-Type: multipart/form-data; boundary=customboundary
Authorization: Token token=
--customboundary
Content-Disposition: form-data; name="page.html"; filename="page.html"
Content-Type: text/html
--customboundary
Content-Disposition: form-data; name="cover.pdf"; filename="cover.pdf"
Content-Type: application/pdf
--customboundary
Content-Disposition: form-data; name="generation"
Content-Type: application/json
{
"html": "page.html"
}
--customboundary
Content-Disposition: form-data; name="operations"
Content-Type: application/json
{
"operations": [
{
"type": "importDocument",
"beforePageIndex": 0,
"document": "cover.pdf"
}
]
}
--customboundary--
```
The provided PDF will be appended before the first page of the HTML, and it’ll serve as your cover page.
## Form fields
PDF Generation supports the conversion of HTML forms into interactive PDF forms.
Conversion is handled completely internally, so there’s no need to pass any extra information to the [generation payload](https://www.nutrient.io/guides/product-archives-and-deprecated-solutions.md).
Because not all HTML form fields map directly to PDF forms, a subset of form fields is supported. The following table shows how the HTML `input` element types map to PDF form types.
| `input` type | PDF form field |
| ------------ | ------------------------------------------------- |
| `text` | Text box |
| `password` | Text box where all characters are replaced with * |
| `radio` | Radio button |
| `checkbox` | Checkbox |
| `select` | Combo box |
All other `input` types aren’t supported and won’t be converted to PDF form fields.
## Form values
All form values and radio buttons/checkboxes that are checked in HTML will be carried over to the form field values in the generated PDF.
## Form field names
The name of the form field in the generated PDF is determined based on the `id` and `name` attributes of the HTML form field. They’re both concatenated with an `_` in between. What follows are some concrete examples.
### Only ID set
Given this HTML:
```html
```
The form field name would be:
```
textInput_
```
### Both ID and name set
Given this HTML:
```html
```
The form field name would be:
```
textInput_cool
```
### Only name set
Given this HTML:
```html
```
The form field name would be:
```
id__cool
```
---
## Related pages
- [Generate a blank PDF](/guides/document-engine/pdf-generation/from-html/blank-pdf.md)
- [Create PDFs from scratch](/guides/document-engine/pdf-generation/from-html/from-scratch.md)
- [Edit a generated PDF](/guides/document-engine/pdf-generation/from-html/edit-a-generated-pdf.md)
- [Java](/guides/document-engine/pdf-generation/from-html/java.md)
- [JavaScript](/guides/document-engine/pdf-generation/from-html/javascript.md)
- [Customize the page header and footer](/guides/document-engine/pdf-generation/from-html/page-header-footer.md)
- [Python](/guides/document-engine/pdf-generation/from-html/python.md)
- [PHP](/guides/document-engine/pdf-generation/from-html/php.md)
- [HTML-to-PDF conversion server sample code](/guides/document-engine/pdf-generation/from-html/sample-code.md)
- [HTML template design for generating PDFs](/guides/document-engine/pdf-generation/from-html/template-design.md)
- [HTML-to-PDF generation schema](/guides/document-engine/pdf-generation/from-html/schema.md)