Functionality > Publish > Self Hosting Instructions

When you choose self-host, a zip file is downloaded to your device. This contains:

Please ensure all copyright notices and licences are left unmodified and are published with their associated scripts.

How to Deploy the Form

The simplest way to deploy the form is simply to upload all the files in the zip archive to your website ensuring you maintain the folder structure. For example, you could create a folder in the root of your website called "form" and then upload the contents of the ZIP into that folder.

You can then just visit the form: https://www.yourwebsite.co.uk/form or https://www.yourwebsite.co.uk/form/index.html

Remember, you do need to create the server side script to process the form when it is submitted by the user and save it with the same name/location as you specified in: Form Settings > URL to Receive Form POST Data in the form editor.

You also need to create pages for the Success URL and Failure URL pages as entered in Form Settings in the editor.

URL to Receive Form Data

This is the server side script that you will create that processes the form.

The data is submitted using an Ajax POST request. The script that submits the POST request expects a simple JSON response from the server-side script you will create. If the form submission is processed successfully, the response required is:

{
	"response": "OK"
}

If the client-side script receives the above response, the browser redirects to the Success URL (see below).

Any other response will redirect the browser to the Failure URL (see below).

If there is no response from the server-side script because the script does not exist or it has syntax or runtime errors, the user will be informed with a pop-up notification.

Only fields that have a valid name attribute and are not disabled will be submitted. The form is only submitted if the form passes form validation (i.e. if all required fields have entries, fields with range limitations are within range, email fields have correctly formatted email addresses etc).

The formid is submitted at the same time in a POST key/value pair with the key formid. Also the record ID is sent in a POST key/value pair with the key record. In most cases the record ID is “new”.

The form data is sent as a JSON encoded string in a POST key/value pair with the key data. The JSON has the following high-level structure:

{
	"data": { },
	"replicable": { }
}

"data" lists all the fields that are enabled and have a name attribute specified. This is the structure of one example field:

{
	"Surname":
	[{
		"Value": "Smith",
		"ID": "ID_of_the_form_control",
		"ControlID": "ID_of_the_container"
	}]
}

As each data item is an array it is possible to have multiple form controls with the same name attribute. Groups of checkboxes do this automatically - but you could also have multiples of any field type with the same name. For example, on the form shown here each field has the same name attribute:

• FavouriteColours[]

When submitted, the “data” part of the JSON that would be sent to the server when this form is submitted looks like this:

{
	"FavouriteColours":
	[{
		"Value": "Red",
		"ID": "ID_of_the_form_control",
		"ControlID": "ID_of_the_container"
	},
	{
		"Value": "Green",
		"ID": "ID_of_the_form_control",
		"ControlID": "ID_of_the_container"
	}]
}

The IDs that are provided are used when repopulating a form from the JSON string (this happens when someone completing a form closes their browser or tab and then comes back and views the form again). The JSON data that is sent to the server on submission is also saved to the browser’s application local storage each time the user makes a change to the form (on blur).

"replicable" lists all the replicable containers, if used. This information is used when repopulating a form with existing data so the script knows which containers have replicas without having to parse the “data”. This is the structure:

{
	"replicablecontainerid":
	{
		"groups": 1,
		"type":"col",
		"fields":
		[
			"Field Name 1",
			"Field Name 2",
			"Field Name 3"
		]
	}
}

"groups" indicates how many replicas (including the original) have been created by the user. "type" is whether the container is a row or a column. "fields" lists the name attributes of fields within the replicable container. You don't really need this but it is used by the formstrap JavaScript when repopulating a form with existing data.

To access the data on a server side script (using PHP as an example), you would write something like this to get the first favourite colour from the example above. Note the numeric keys 0 and 1.

<?php
	// Decode the JSON string in $_POST["data"] and store in associative array
	$form=json_decode($_POST["data"],true);
	$firstfavouritecolour=$form["data"]["FavouriteColours"][0]["Value"];
	$secondfavouritecolour=$form["data"]["FavouriteColours"][1]["Value"];
	echo $firstfavouritecolour; // outputs Red
	echo $secondfavouritecolour; // outputs Green
?>

Even if there is just one value (e.g. the Surname example given earlier) it is the same format but the array index would always be 0 (first and only item).

<?php
	// Decode the JSON string in $_POST["data"] and store in associative array
	$form=json_decode($_POST["data"],true);
	$surname=$form["data"]["Surname"][0]["Value"];
	echo $surname; // outputs Smith
?>

Here is a sample PHP script to store the submitted data in a MySQL database. The advantage of the method adopted is you don’t have to create a table that has a field for each field on the form.

PHP will convert the posted data into an associative array in the superglobal variable $_POST. The script assumes you have a database table with something like this structure:

The Submission field is a JSON field type (MariaDB converts this to a LONGTEXT field with utf8mb4_bin collation and a JSON constraint). As such the field will only accept a valid JSON string.

<?php
	$connect=mysqli_connect("localhost","username","password","databasename");
	$data=json_encode($_POST["data"]);
	$data=mysqli_real_escape_string($connect,$data);
	$formid=mysqli_real_escape_string($connect,$_POST["formid"]);
	$sql="insert into `tablename` (FormID,Submission) values ('" . $formid. "','" .$data . "')";
	try
	{
		mysqli_query($connect,$sql);
		if(mysqli_affected_rows($connect)==1)
		{
			echo '{"response":"OK"}';
		}
		else
		{
			echo '{"response":"error","error":"' . mysqli_error($connect) .'"}';
		}
	}
	catch (Exception $e)
	{
		echo '{"response":"error","error":"' . $e->getMessage() . '"}';
	}
?>

Depending on your PHP version, mysql errors may or may not produce a PHP exception – hence checking for an error at two points.

Once the data has been saved you can access it by using a SELECT query to retrieve the entire JSON string. You can then convert it into an array (or a PHP object if preferred) and use PHP to extract the required data.

<?php
	$connect=mysqli_connect("localhost","username","password","databasename");
	$sql="select `Submission` from `tablename` where ID=1";
	$result=mysqli_query($connect,$sql);
	if($row=mysqli_fetch_assoc($result))
	{
		$json=json_decode($row["Submission"],true);
		echo $json["data"]["FavouriteColours"][0]["Value"];
		echo $json["data"]["FavouriteColours"][1]["Value"];
	}
?>

Alternatively you can access the data directly in MySQL using JSON_EXTRACT() e.g:

<?php
	$connect=mysqli_connect("localhost","username","password","databasename");
	$sql='SELECT JSON_UNQUOTE(JSON_EXTRACT(`Submission`, 		
		"$.data.FavouriteColours[0].Value")) AS `FirstFavouriteColour`, 
		JSON_UNQUOTE(JSON_EXTRACT(`Submission`,"$.data.FavouriteColours[1].Value"))
		AS `SecondFavouriteColour`
		FROM `tablename` where ID=1';
	$result=mysqli_query($connect,$sql);
	if($row=mysqli_fetch_assoc($result))
	{
		echo $row["FirstFavouriteColour"];
		echo $row["SecondFavouriteColour"];
	}
?>

SuccessURL

This is the URL of the page the user will be redirected to when the form is successfully saved.

FailureURL

This is the URL of the page the user will be redirected to if their form is successfully submitted BUT the server side script fails to process the form.

Host your Form on formstrap

If you are unable to set up the POST URL or create pages for Success URL and Failure URL on your website, then it is recommended you create a formstrap account and host your form on formstrap. This comes with a wide range of benefits:

• No programming or database knowledge required
• Unlimited form submissions while forms are active
• Edit your form "on the fly"
• Multiple Forms can be saved/managed in your formstrap account
• Custom JavaScript
• Google reCaptcha support
• Limit access by IP address/range
• Limit access to Email Invitees
• Usage Statistics
• Form scheduler
• Export data to Excel, CSV, PDF.
• Form to PDF Emailer
• Custom Privacy Settings
• ...and more

To register, visit formstrap.com, click to Publish your form and then click the Register Button. When you first login, your local form in the editor will be uploaded to your account.