How to capture Web form posts

CM Data allows you to capture web form input as events on your profiles. This can be set-up in a pretty simple way. For this example we will build a simple Net Promoter Score (NPS) form.

Define your web form
Set up your Event type in CM Data
Build your web form
Capture the form posts
Secure the form

1. Define your web form

First you need to determine which questions you will ask in your web form, because that is the basis for the rest of the actions. In our example we will be working with a standard NPS form. So our questions are:

What is your Email? (This will help us to link the form to an existing profile.)
On a scale from 1 to 10, how likely are you to recommend us to a friend (This should be a dropdown)
Can you explain why?

2. Set up your Event type in CM Data

To make sure the data can be received within CM Data ask your CM representative to configure the event as defined in the previous step in your CM Data instance.

To do this we will create an EventType to sent this data to. In our example the event will receive three values:

Email of type email and not optional
NPS of type string and not optional
Feedback of type number which is optional

Once the event is defined you can retrieve the form action URL from Sources page.

3 Set up Webform integration

Go to integration and open the webform adapter. If you don't see the webform adapter, you can add it. In the right-top corner you can click "new integration" from which you can add the webform adapter

Form URL: In the settings of the web form adapter you need to select the Event type you will be using, and you can define the redirect URLs (to forward the user to when the form post was successful) and the 'on error redirect url'. Basically a 'success' and an 'error' page.

You will use the resulting "Form action URL" in the next step.

4. Build your web form

Next step is to start building the web form in HTML. You know which questions you want to ask, so with some basic HTML skills you can define a web form. Look at our example NPS form below. Few things to take into consideration:

The form should be posted on submit, and the form should be posted to the URL that you retrieved from the sources page in the previous step. And this should look like <form method="post" action="{CM Data Form Post URL}">
Each of the <Input>-elements should have a name that matches the parameter on the event. So in our example we need to have three inputs that carry the names "Email", "NPS" and "Feedback". So for example <input id="element_1" name="Email" type="text"/>
The button type should be Submit, otherwise it will not post the data.
If you want to do any input validation you will need to do this with javascript on the HTML page. You can use an open source library such as ParsleyJS.

Example HTML Form

<html>
    <head>
        <title>Please give us your feedback</title>
    </head>
    <body>
        <h1><a>Please give us your feedback</a></h1>        
        <form method="post" action="{CM Data Form Post URL}">
            <p>
                <label for="element_1">What is your Email? </label>

                <input id="element_1" name="Email" type="text" maxlength="255" /> 
            </p>                
            <p>
                <label class="description" for="element_2">On a scale from 1 to 10, how likely are you to recommend us to a friend </label>

                <select id="element_2" name="NPS"> 
                    <option value="" selected="selected"></option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                </select>
            </p>            
            <p>
                <label for="element_3">Can you explain why? </label>

                <input id="element_3" name="Feedback" type="text" /> 
            </p>               
            <p>            
                <input type="submit" name="submit" value="Submit" />
            </p>        
        </form>
    </body>
</html>

5 Capture the form posts

Once this is all done all you need to do is to publish your web form (and your 'success' and 'error' pages and you are good to go. Fill in your form and click the 'Submit' button, and your form input will show up in CM Data.

6 Secure the form

There is small risk associated with this type of data capturing; that is that anybody can input any data. To limit that risk the web form adapter allows to limit to amount of request you allow from a certain IP (also called Rate limiting).

Under the Spam Prevention header of the web form adapter you can define a cooldown period. So if you set the timer (for the specific Event) to 30 minutes, you will only accept 1 form post per 30 minutes from a specific IP address. If a user tries to do more than 1 post per that time period they will be sent to the 'Error'-page.

Contact

Questions? Reach out to your dedicated Data Consultant for help!

Help