Modify PDF Form Field Properties in MVC PDF Viewer

10 Feb 202624 minutes to read

You can modify form fields using the UI or API.

Modify PDF Form Field Properties using the UI

• Right click a field → Properties to update settings.
  
• Drag to move; use handles to resize.
• Use the toolbar to toggle field mode or add new fields.

Modify PDF Form Field Properties programmatically

Use updateFormField() to change behavior/data (including position and size):

Standalone

<div style="width:100%;height:120px">
        <button id="modifyTextbox">Apply Textbox Changes</button>
    </div>

    <div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            document.getElementById('modifyTextbox').addEventListener('click', function () {
                var fields = pdfviewer.retrieveFormFields();
                var field = fields.find(function (f) { return f.name === 'First Name'; }) || fields[0];
                if (field) {
                    pdfviewer.formDesignerModule.updateFormField(field, {
                        value: 'John',
                        fontFamily: 'Courier',
                        fontSize: 12,
                        fontStyle: 'None',
                        color: 'black',
                        backgroundColor: 'white',
                        borderColor: 'black',
                        thickness: 2,
                        alignment: 'Left',
                        maxLength: 50
                    });
                }
            });
        });
    </script>

Modify PDF Form Field Properties by Field type

Textbox

• UI: Update value, font, size, colors, border thickness, alignment, max length, multiline.
  
• API: updateFormField() for value, typography, alignment, colors, borders.

Standalone

<div style="width:100%;height:120px">
        <button id="modifyTextbox">Apply Textbox Changes</button>
    </div>

    <div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            document.getElementById('modifyTextbox').addEventListener('click', function () {
                var fields = pdfviewer.retrieveFormFields();
                var field = fields.find(function (f) { return f.name === 'First Name'; }) || fields[0];
                if (field) {
                    pdfviewer.formDesignerModule.updateFormField(field, {
                        value: 'John',
                        fontFamily: 'Courier',
                        fontSize: 12,
                        fontStyle: 'None',
                        color: 'black',
                        backgroundColor: 'white',
                        borderColor: 'black',
                        thickness: 2,
                        alignment: 'Left',
                        maxLength: 50
                    });
                }
            });
        });
    </script>

Password

• UI: Tooltip, required, max length, font, appearance.
  
• API: updateFormField() for tooltip, validation flags, typography, colors, alignment, borders.

Standalone

<div style="width:100%;height:120px">
        <button id="modifyPasswordBox">Edit PasswordBox</button>
    </div>

    <div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            document.getElementById('modifyPasswordBox').addEventListener('click', function () {
                var fields = pdfviewer.retrieveFormFields();
                var field = fields.find(function (f) { return f.name === 'Password'; });
                if (field) {
                    pdfviewer.formDesignerModule.updateFormField(field, {
                        tooltip: 'Enter your password',
                        isReadOnly: false,
                        isRequired: true,
                        isPrint: true,
                        fontFamily: 'Courier',
                        fontSize: 10,
                        color: 'black',
                        borderColor: 'black',
                        backgroundColor: 'white',
                        alignment: 'Left',
                        maxLength: 20,
                        thickness: 1
                    });
                }
            });
        });
    </script>

CheckBox

• UI: Toggle checked state.
  
• API: updateFormField() for isChecked, tooltip, colors, borders.

Standalone

<div style="width:100%;height:120px">
        <button id="modifyCheckbox">Modify CheckBox</button>
    </div>

    <div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            document.getElementById('modifyCheckbox').addEventListener('click', function () {
                var fields = pdfviewer.retrieveFormFields();
                var cb = fields.find(function (f) { return f.name === 'Subscribe'; });
                if (cb) {
                    pdfviewer.formDesignerModule.updateFormField(cb, {
                        isChecked: true,
                        backgroundColor: 'white',
                        borderColor: 'black',
                        thickness: 2,
                        tooltip: 'Subscribe to newsletter'
                    });
                }
            });
        });
    </script>

RadioButton

• UI: Set selected item in a group (same Name).

• API: updateFormField() to set selected value and border appearance.

Standalone

<div style="width:100%;height:120px">
        <button id="editRadio">Modify RadioButton</button>
    </div>

    <div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            document.getElementById('editRadio').addEventListener('click', function () {
                var fields = pdfviewer.retrieveFormFields();
                var genderRadios = fields.filter(function (f) { return f.name === 'Gender'; });
                if (genderRadios[1]) {
                    pdfviewer.formDesignerModule.updateFormField(genderRadios[0], { isSelected: false });
                    pdfviewer.formDesignerModule.updateFormField(genderRadios[1], { isSelected: true, thickness: 2, borderColor: 'black' });
                }
            });
        });
    </script>

ListBox

• UI: Add/remove items, set selection, adjust fonts/colors.

• API: updateFormField() for items, selection, borders.

Standalone

<div style="width:100%;height:120px">
        <button id="editListBox">Edit ListBox</button>
    </div>

    <div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            document.getElementById('editListBox').addEventListener('click', function () {
                var fields = pdfviewer.retrieveFormFields();
                var lb = fields.find(function (f) { return f.name === 'States'; });
                if (lb) {
                    var option = [
                        { itemName: 'Alabama', itemValue: 'AL' },
                        { itemName: 'Alaska', itemValue: 'AK' },
                        { itemName: 'Arizona', itemValue: 'AZ' }
                    ];
                    pdfviewer.formDesignerModule.updateFormField(lb, {
                        fontFamily: 'Courier',
                        fontSize: 5,
                        color: 'black',
                        backgroundColor: 'white',
                        tooltip: 'listbox',
                        options: option
                    });
                }
            });
        });
    </script>

DropDown

• UI: Add/remove items, default value, appearance.

• API: updateFormField() for items, value, borders.

Standalone

<div style="width:100%;height:120px">
        <button id="editDropDown">Edit DropDown</button>
    </div>

    <div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            document.getElementById('editDropDown').addEventListener('click', function () {
                var fields = pdfviewer.retrieveFormFields();
                var dd = fields.find(function (f) { return f.name === 'Country'; });
                if (dd) {
                    pdfviewer.formDesignerModule.updateFormField(dd, {
                        options: [
                            { itemName: 'USA', itemValue: 'US' },
                            { itemName: 'Canada', itemValue: 'CA' },
                            { itemName: 'Mexico', itemValue: 'MX' }
                        ],
                        value: 'US',
                        fontFamily: 'Courier',
                        fontSize: 10,
                        color: 'black',
                        borderColor: 'black',
                        backgroundColor: 'white'
                    });
                }
            });
        });
    </script>

Signature Field

• UI: Tooltip, thickness, indicator text, required/visibility.

• API: updateFormField() for tooltip, required, colors, borders.

Standalone

<div style="width:100%;height:120px">
        <button id="editSignature">Edit Signature</button>
    </div>

    <div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            document.getElementById('editSignature').addEventListener('click', function () {
                var fields = pdfviewer.retrieveFormFields();
                var sig = fields.find(function (f) { return f.name === 'Sign'; });
                if (sig) {
                    pdfviewer.formDesignerModule.updateFormField(sig, {
                        tooltip: 'Please sign here',
                        thickness: 3,
                        isRequired: true,
                        isPrint: true,
                        backgroundColor: 'white',
                        borderColor: 'black'
                    });
                }
            });
        });
    </script>

Initial Field

• UI: Tooltip, indicator text, thickness, required/visibility.

• API: updateFormField() for tooltip, required, colors, borders.

Standalone

<div style="width:100%;height:120px">
        <button id="editInitial">Edit Initial</button>
    </div>

    <div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            document.getElementById('editInitial').addEventListener('click', function () {
                var fields = pdfviewer.retrieveFormFields();
                var init = fields.find(function (f) { return f.name === 'Initial'; });
                if (init) {
                    pdfviewer.formDesignerModule.updateFormField(init, {
                        tooltip: 'Add your initials',
                        thickness: 2,
                        isRequired: true,
                        isPrint: true,
                        backgroundColor: 'white',
                        borderColor: 'black'
                    });
                }
            });
        });
    </script>

View Sample on GitHub

See also

• Form Designer overview
• Form Designer Toolbar
• Create form fields
• Remove form Fields
• Style form fields
• Group form fields
• Form validation
• Form fields API