Ändern der Größe eines Webformulars

Zuletzt aktualisiert am 20. Juli 2023

Höhe und Breite eines Webformulars ändern

Die Höhe und Breite eines Webformulars können geändert werden, indem Sie den Einbettungscode des Webformulars in eine statische Größe (basierend auf Pixeln) oder eine relative Größe (basierend auf Prozentsätzen der Bildschirmauflösung) ändern.

Anmerkung

Dieses Verfahren trifft nur auf die Skript- und iframe-Einbettungscodes zu. Die Größe von URL-Webformularen kann nicht geändert werden.

Standardmäßig wird die Höhe und Breite eines Webformulars anhand der Größe des Browsers skaliert. Dank dieser dynamischen Eigenschaft kann das Webformular mit den meisten Bildschirmauflösungen angezeigt werden.

Um die Abmessungen des Webformulars anzupassen, müssen Sie zuerst den HTML- oder Skriptcode aus Ihrem Webformular abrufen.

Die Bearbeitung der Rahmengröße des Webformulars richtet sich nach dem verwendeten Code:

HTML-Code (iframe)

HTML-Code stellt Steuerelemente innerhalb der Zeichenfolge bereit, die aus dem Webformular kopiert wurde.

Unten sehen Sie ein Beispiel für eine Zeichenfolge in iframe-Code:

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

Gegen Ende der Codezeichenfolge befinden sich die Parameter width="100%" und height="100%". Durch Anpassen dieser Parameter wird die Rahmengröße des Webformulars angepasst. Sie können Prozentwerte oder eine feste Pixelgröße verwenden (entfernen Sie unbedingt das Prozentzeichen).

Bearbeiten Sie die Codezeichenfolge in einem beliebigen Texteditor. Kopieren Sie dann den bearbeiteten Code und fügen Sie ihn in Ihre Webseite ein.

Anmerkung

Das Argument ?wid= gibt die eindeutige Webformular-ID an und unterscheidet sich als solches bei jedem Webformular, das erstellt wird.

JavaScript-Code (Skript)

Die JavaScript-Option ist ein wenig komplexer, da die Parameter nicht bereits in der Zeichenfolge enthalten sind, doch das Konzept ist das gleiche.

Unten sehen Sie ein Skriptbeispiel für dasselbe Webformular. 

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

Wenn Sie die Rahmengröße mithilfe eines Skripts anpassen möchten, müssen Sie die Elemente <script></script> mit einem <div>-Element umgeben, welches die Rahmeneigenschaften enthält. Dadurch muss das <script> innerhalb des <div>-Containers existieren und unterliegt damit den Beschränkungen des <div>.

Beispiel für ein <div>-Element mit einer Breite von 600 Pixeln, einer Höhe von 500 Pixeln und einem durchgehenden schwarzen Rahmen mit einer Breite von einem Pixel:

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

Das Skript muss im <div>-Element enthalten sein, wodurch ein vollständiger Codeblock entsteht, der wie folgt aussieht:

<html>

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

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

        </script>

    </div>

</html>

Das daraus resultierende Webformular wird mit den angegebenen Abmessungen angezeigt.

Weitere Beispiele für die Konfiguration eines Skripts

Vollbildmodus 1

<body style=&quot;margin: 0; padding: 0;&quot;>

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

        </script>

</body>

Vollbildmodus 2

<div style=&quot;height:100%; width:100%; border:0px solid black;&quot;>

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

        </script>

</div>