Stay tuned Watch us Facebook Twitter

Thanks! We`ll keep in touch.

Sign up for our Peggy Journal

Get the latest Peggy Forms news, features and great offers!



How to | Integrations

We will make a simple form with three kinds of integrations: AJAX validation, AJAX population and POST submit to a webservice.

1. Start

We start with this basic form. The choice field will be populated through a HTTP request. The two inputs will be validated with a HTTP request. And if the user submits the form, we make the form do a HTTP post request to a API.

Step 1 in HTTP requests

2. Population

Lets start with the population. We use our test web API: which returns a result like:

	success: true/false,
	data: {
		{ key: 1, value: "Option 1" },
		{ key: 2, value: "Option 2" },
		{ key: 3, value: "Option 3" },

We go to the Content tab, set datatype to Dynamic and paste our url. In addition we can add some parameters if we need. In this case we do not need any parameters. But in step 3 we will do need parameters and explain this later on. We might need to ajust the data path and key and label properties in the JSON response object. Use the target button to target which data must be used as option value and option labels.

Step 2, populate a field with HTTP request

If you now press [update] the content will be requested from the url. From now on, your field will be populated with the output of this web API request.

3. Validation

For validation we use our following test API:

This request must return a JSON string with at least this information:

		message: "This validation failed and this is my custom message" // This one is optionally

The success property is needed to determine that the request is successful or not. The result must be a string with "OK" for validated and "NOK" for invalidated.
This request needs two parameters: the public key and the private key which both the user must fill in. We create the HTTP inputvalidation on the second field under the tab Advanced.
If you provide a "message" property, this will override the default validation message if the result is NOK. We use the preset HTTP request and complete the matchvalue with our url.

Step 3: http validation

Now we add the two parameters public key and private key using the target button. These parameters are used in the web API to determine the validation.

Adding http parameters


4. Using HTTP response fields in your form

For some feedback we added a Text/information field with some static text and targetted the HTTP validated field to include some dynamic response text from the HTTP response.

Our test API returns the following JSON:

		belongsTo:"Person x",
		message: "This validation failed and this is my custom message"

We want to show two properties keyStatus and belongsTo in our information field. Just use the select formfield with ajax validation button to add these values very easily:

Step 5: use http response properties
Using http properties

Quick example of the form:

Form example with http features

5. POST webhook

Finally we want to submit this form to our own web API and handle it within our businesslogic. Simply choose for the POST submit action and fill in the url and properties as explained in step 3.
For this purpose you also can use the button Autofill which will add all formfields at once. Because that is what we most likely need: all the data the user filled in.

Setting POST as submit action

Http post settings

And setup the POST request

Http post settings

6. Using POST response objects in emails and thanks page

Lets say that our POST webservice will return this JSON object:

		success: true,
		calculatedProp: 3,141592653

Now we can use this in our email body and thankyou page. Simply write {POST.calculatedProp} and the cryptic text will be replaced with the value of the HTTP POST object property. In this case 3.141592653.

7. Debugging

Debugging HTTP features is very easily done in Peggy Forms. The simple steps are as follow.

  • Open your form in a new tab
  • If there is an HTTP request posted, return to the editor and open the [Log] tab in the right.
  • On that page, open the [HTTP] tab. Here you find all HTTP requests made by your form, and their responds.

This way you can easily open the POST url in your browser to directly debug your webservice. Form POST submit works exact the same.

Debugging HTTP requests