User Guide Cancel

Resize a web form

 

Adobe Acrobat Sign Guide

What's New

Get Started

Administer

Send, Sign, and Manage Agreements

Advanced Agreement Capabilities and Workflows

Integrate with other products

Acrobat Sign Developer

Support and Troubleshooting

Change the height and width of a web form

The height and width of a web form can be changed by editing the embed code of the web form to either a static size, based on pixels, or a relative size based on percentages of screen footprint.

Note:

This procedure only applies to the script and iframe embed codes. URL web forms cannot be resized.

By default, a web form's height and width scale with the size of the browser. This dynamic property makes it so the web form can be viewed in most screen resolutions.

To adjust the dimensions of the web form, you must first get the HTML or script code from your web form.

Editing the web form frame size depends on the code you're using:

HTML code (iframe)

HTML code provides controls within the string copied from the web form.

Below is an example iframe code string:

<iframe src="https://secure.na1.adobesign.com/public/esignWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*&hosted=false" width="100%" height="100%" frameborder="0" style="border: 0; overflow: hidden; min-height: 500px; min-width: 600px;"></iframe>
<iframe src="https://secure.na1.adobesign.com/public/esignWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*&hosted=false" width="100%" height="100%" frameborder="0" style="border: 0; overflow: hidden; min-height: 500px; min-width: 600px;"></iframe>
<iframe src="https://secure.na1.adobesign.com/public/esignWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*&hosted=false" width="100%" height="100%" frameborder="0" style="border: 0; overflow: hidden; min-height: 500px; min-width: 600px;"></iframe>

Near the end of the code string are the width="100%" and height="100%" parameters. Adjusting these parameters adjusts the frame size of the web form. Percentages can be used, or a fixed pixel size (be sure to remove the percentage symbol).

Edit the code string in any text editor and then copy and paste the edited code into your web page.

Note:

The argument ?wid= indicates the unique web form ID, and as such will be different for every web form created.

(Java)Script code  (script)

The javascript option is a little more complex in that the parameters are not already included in the string, but the idea is the same.

Below is a script example of the same web form. 

<script type='text/javascript' language='JavaScript' src='https://secure.na1.adobesign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*'>
</script>
<script type='text/javascript' language='JavaScript' src='https://secure.na1.adobesign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*'> </script>
<script type='text/javascript' language='JavaScript' src='https://secure.na1.adobesign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*'>
</script>

To adjust the frame size with a script, you must surround the <script></script> elements with a <div> element containing the frame properties. This forces the <script> to exist within the <div> container, and is thereby subject to the limitations of the <div>.

An example <div> element with a width of 600 pixels, a height of 500 pixels, and a solid black border 1 pixel wide:

<div style="height:500px; width:600px; border:1px solid black;">
</div>
<div style="height:500px; width:600px; border:1px solid black;"> </div>
<div style="height:500px; width:600px; border:1px solid black;"> 
</div>

The script must be contained within the <div> element, resulting in a complete code block that looks like:

<html>
<div style="height:500px; widget:600px; border: 1px solid black;">
<script type='text/javascript' language='JavaScript' src='https://secure.na1.adobesign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*'>
</script>
</div>
</html>
<html> <div style="height:500px; widget:600px; border: 1px solid black;"> <script type='text/javascript' language='JavaScript' src='https://secure.na1.adobesign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*'> </script> </div> </html>
<html>

    <div style="height:500px; widget:600px; border: 1px solid black;">

        <script type='text/javascript' language='JavaScript' src='https://secure.na1.adobesign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*'>

        </script>

    </div>

</html>

The resulting web form is displayed with the stated dimensions.

Other examples of how the script can be configured

Full screen 1

<body style="margin: 0; padding: 0;">
<script type='text/javascript' language='JavaScript' src='https://secure.na1.adobesign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*'>
</script>
</body>
<body style="margin: 0; padding: 0;"> <script type='text/javascript' language='JavaScript' src='https://secure.na1.adobesign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*'> </script> </body>
<body style="margin: 0; padding: 0;">

        <script type='text/javascript' language='JavaScript' src='https://secure.na1.adobesign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*'>

        </script>

</body>

Full screen 2

<div style="height:100%; width:100%; border:0px solid black;">
<script type='text/javascript' language='JavaScript' src='https://secure.na1.adobesign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*'>
</script>
</div>
<div style="height:100%; width:100%; border:0px solid black;"> <script type='text/javascript' language='JavaScript' src='https://secure.na1.adobesign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*'> </script> </div>
<div style="height:100%; width:100%; border:0px solid black;">

        <script type='text/javascript' language='JavaScript' src='https://secure.na1.adobesign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*'>

        </script>

</div>

Get help faster and easier

New user?