HelpBot Assistant

How can I help you?

Customize the appearance of PDF Form Fields in MVC PDF Viewer

10 Feb 20266 minutes to read

Styling customizes appearance only (font, color, alignment, border, background, indicator text).

Customize Appearance of Form Fields Using the UI

Use the Properties panel to adjust:

  • Font family/size, text color, alignment
  • Border color/thickness
  • Background color
    Textbox style from UI

Customize appearance Form Fields Programmatically

Use updateFormField() to apply styles:

<div style="width:100%;height:120px">
        <button id="CustomizeTextboxStyle">Update Textbox Style</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('CustomizeTextboxStyle').addEventListener('click', function () {
                var fields = pdfviewer.retrieveFormFields();
                var tb = fields.find(function (f) { return f.name === 'First Name'; }) || fields[0];
                if (tb) {
                    pdfviewer.formDesignerModule.updateFormField(tb, {
                        value: 'John',
                        fontFamily: 'Courier',
                        fontSize: 12,
                        fontStyle: 'None',
                        color: 'black',
                        borderColor: 'black',
                        backgroundColor: 'white',
                        alignment: 'Left',
                        thickness: 2
                    });
                }
            });
        });
    </script>

Set Default Styles for New Form Fields

Define defaults so fields added from the toolbar inherit styles.

<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];

            // Apply as defaults for Textbox added from toolbar
            pdfviewer.textFieldSettings = {
                name: 'Textbox',
                isReadOnly: false,
                visibility: 'visible',
                isRequired: false,
                isPrint: true,
                tooltip: 'Textbox',
                thickness: 4,
                value: 'Textbox',
                fontFamily: 'Courier',
                fontSize: 10,
                fontStyle: 'None',
                color: 'black',
                borderColor: 'black',
                backgroundColor: 'White',
                alignment: 'Left',
                maxLength: 0,
                isMultiline: false
            };
        });
    </script>

View Sample on GitHub

See also