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!

Name
Email

index

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: https://www.peggyforms.com/api/Formbuilder.Tests.dynamicstep1 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:
https://www.peggyforms.com/api/Formbuilder.Tests.ajaxProxy

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

{ result:"OK", success:true, 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:

{ success:true, result:"NOK", keyStatus:"closed", belongsTo:"Person x", hasProp:1, 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 submit

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.

The HTTP POST request will send a parameter peggy_status. By default, you should only execute your code when you get the status complete.

When you are using more than 1 submit action, for example email and POST, Peggy Forms will send 2 HTTP requests to your API. In that case the first submitaction will be the HTTP POST request with the status init. After the last submitaction, there will be another HTTP POST request with the status complete.

  • The init request will be send before any other submit action and can block them if you send success: false back.
  • The second request with status complete will be send if all other submit actions are executed successfully.

Setting POST as submit action

Http post settings


And setup the POST request

Http post settings

The hash of the submission will always be added as 'submissionHash' in your POST request.

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
Continue reading