Bespoke Form

If you don't have the Form Builder, but would like to have a form on your website, you can use the following code to help you do this. It is not as comprehensive as the Form Builder but will allow you to use basic commands. You will also need prior knowledge of HTML coding to use it.

On this page:

Creating a Bespoke Form
Javascript Validation

Creating a Bespoke Form

To create a bespoke form you can either:

Host a Static HTML file on your website
Create a Dynamic or Forward to a Friend Form using the Bespoke Forms feature

If using Adestra for a 'Dynamic' or 'Forward to a Friend' form you can go to the Bespoke Form tab and click 'Create Form'.

You will then have to paste in your HTML Source.

Hosting a form in an iframe

One method of hosting a form on your site is to use an iframe in the format:

<iframe src="static form link"></iframe>

This will ensure that the form on your website is the same form that's built in Adestra, i.e. all fields (Javascript, HTML, Head) will be included in this form.

When using an iframe, any changes made to the form in Adestra will be added to the website form accordingly.

Javascript Validation

By default the form is not validated. All forms—Static, Dynamic and Forward to a Friend—make use of Javascript Validation. You can do this using our Javascript or you can use your own:

Copy

<script language="Javascript1.2" src="https://www.adestra.com/form_validate2.js"></script>

This should be placed in the <head> tag. If you decide to use our Javascript the error text will appear in a pop-up.

Copy

var errorText = 'There was a problem with your request\n\nPlease fill in all fields correctly before
submitting\nThe missing/incomplete fields have been highlighted for you'

The var errorText needs to be in one consectuive line or it will break. You will also have to add an additional attribute (onsubmit) to the form tag:

Copy

<form action="https://domain.example.com/s/" method="post" onsubmit="return validateForm(this)">

Validation for Input fields

To ensure validation on certain fields you must use a validate attribute.

Any field: checks that field isn't empty.

<input type="text" name="1.firstname" validate="notempty">

Email address:checks that email address is validly formatted.

<input type="text" name="1.email" validate="email">

Radio Buttons

Copy

<tr>
<td id="driver">Do you have a valid UK driving license?</td>
<td><input type="radio" name="1.driver" value="yes" validate="checkbox" group="driver">yes</td>
<td><input type="radio" name="1.driver" value="no" validate="checkbox" group="driver">no</td>
</tr>

Note: By defining a group and associated id, if any of the above options are not selected, then the id element will be highlighted.

Check Boxes

Copy

<td id="interest">What is your area of interest? (select all that are applicable)</td>
<td>
<input type="checkbox" name="1.aoi1" value="TV" validate="checkbox" group="interest">TV<br>
<input type="checkbox" name="1.aoi2" value="Film" validate="checkbox" group="interest"> Film<br>
<input type="checkbox" name="1.aoi3" value="Radio" validate="checkbox" group="interest">Radio
</td>

Note: If any validated fields are left blank, the error message defined in var errorText will display.

Validation example

Copy

<script language="Javascript1.2" src="https://www.adestra.com/form_validate2.js"></script><script>/*Background colour for elements with missing data*/
var badCol = '#FFD055';
/*Background colour for groups with missing data*/
var badGrpCol = '#FFD055';
var errorText = 'There was a problem with your request\n\nPlease fill in all fields correctly before
submitting\nThe missing/incomplete fields have been highlighted for you'
var debug = 0;
</script>