Support » Knowledge Base » Help Desk »

How to customize web forms to fit your website design

To make a request-sending form look as an integral part of your website, its appearance must be modified to fit the colors and proportions used throughout the site. Several basic design settings are available for publication options "link" and "iframe". Should these settings be not sufficient for your purposes, publication option "javascript and form" may be more convenient as it allows you to completely edit the entire source code of the form, including HTML markup, CSS styles, and user event handlers written in JavaScript. We recommend you to adhere to the recommendations provided below when customizing web forms in order to ensure their correct functionality.

The following elements of a form must remain unchanged:

The lines where JavaScript files are connected to the form:

<script type="text/javascript"
src="http://mydomain.com/WG/js/jquery.js"></script>
<script type="text/javascript"
src="http://mydomain.com/WG/js/jquery.validate.js"></script>
<script type="text/javascript"
src="http://mydomain.com/WG/js/st.js"></script>
<script type="text/javascript"
src="http://mydomain.com/WG/js/contacts-rus.js"></script>

The entire FORM element:

<form class="wbs-st-form use-iframe" method="post"
action="http://mydomain.com/WG/widget.php?q=RFUyOTQ5-59090f22">

Basic elements of the form, i.e., tags FORM, INPUT, LABEL, and TEXTAREA.
Names of CSS classes: ".wbs-st-form use-iframe", ".wbs-st-form-msg", ".error".

The fragment of code responsible for displaying the CAPTCHA:

<img style="vertical-align:middle" style="display:none"
src="http://mydomain.com/common/img/loading.gif" class="captcha" />
&rarr;<input style="width: 75px" id="wbs-field-captcha" name="CAPTCHA"
type="text" class="captcha digits" maxlength="4" minlength="4" />

You may apply any custom markup to your web form provided that the tags listed above are not changed or removed. For instance, you may use DIVs instead of TABLEs.

The STYLE block with CSS rules of the web form should moved to the HEAD section of your website.
```
<head>
  <style type="text/css>
    ...
  </style>
</head>
```

Names of CSS classes should be specified with reference to the parent class wbs-st-form as shown below:

.wbs-st-form table.form { background:#F0F0F0; border-collapse:collapse;
border: 1px solid #999999}  
.wbs-st-form table.form td {padding:0.25em 0.5em; margin: 0}
.wbs-st-form table.form td.title { padding: 5px; background-color: #999999;
color: #FFFFFF}
.wbs-st-form label { display:block }
.wbs-st-form p {margin:0;padding:0;}
.wbs-st-form h4 {margin:0;padding:0;}
.wbs-st-form .text {width:100%}

If the CAPTCHA option is disabled in the form settings, the appropriate block should be hidden:
```
.wbs-st-form img.captcha { display:none;}
```
Elements <div class="error">...</div> (an error message) and <div class="wbs-st-form-msg" style="display:none">...</div> (successful submission message) must be left unchanged. You may, however, add custom styles to change their appearance, e.g.:
```
.wbs-st-form .error { color:red; }
.wbs-st-form .wbs-st-form-msg { text-align:center; font-size:1.2em; color:green; }
```

Examples of custom web form design

View form / Download source code