Use the External form block for an easy way to add contacts to your flow campaign. No fuss, no muss. Link any form from your website to a flow campaign and use the info that your customers submit to create an amazing personalized campaign.
- Drag & drop the External form block to the Flow canvas.
- Hover over the block to see the settings and the delete button.
- Click on the settings button.
External form block settings
First things first - you need to map your website form fields to the Loopify contact fields. You can also add new fixed fields (not present in your json) of type string/number/date/dateTime directly from the mapping modal.
- You can map the data in two ways: Create mapping or map by simply Pasting a JSON (with all the data already in it).
- If you're using the External form click Create mapping and select Map using test request to map your data.
- Copy/paste the given post URL into the HTML form action of your website form. Don't forget to save the changes.
Here's an example:
<form name="signupform" id="signupform" method="post" action="post URL1 goes here">
<input type="text" name="Email" id="Email" placeholder="Email" />
<input type="hidden” name="redirectUrl" id="redirectUrl" value="url to receipt page" />
<input type="submit" value="Sign Up" />
</form>
- Go to your website form and fill it out and submit the information. This is necessary to trigger the mapping process. You can use your personal info or a test/dummy info. Remember, this is needed for the mapping and won't add you as a contact.
- Go back to the Loopify Flow.
- The Manage External Form mapping window should be now open and simply map your data with the Loopify fields. You can also +Add as a new campaign field or Ignore a specific field. Click OK. If you need it later, you could still Manage mapping or Restart mapping process.
- After the mapping, the post URL will change. Use this URL to copy/paste it into the HTML form action of your website form after the 'https://api.loopify.com'. This way you partly replace the previous post URL with the new one. Make sure you save the changes.
Note: If you want to map a date field to a Loopify field of type 'date', you should enter the date in the file in the following format:
Here's an example:
<form name="signupform" id="signupform" method="post" action="https://api.loopify.com/post URL2 goes here">
<input type="text" name="Email" id="Email" placeholder="Email" />
<input type="hidden” name="redirectUrl" id="redirectUrl" value="url to receipt page" />
<input type="submit" value="Sign Up" />
</form>
- Go back to the Flow. Your website form is now linked to Loopify. All the data submitted through this form will be saved to Loopify.
- Connect the External form block to another block. Send communication to the contacts and don't leave them hanging.
Note: The mapping post URL1 is the same as the post URL2 if you remove the /{userId}/map
at the end of the string. Also, the HTTP referer in the mapping post URL1 must match the trigger URL2. If this is not possible for practical reasons, contact support@loopify.com.
Tip: If your flow is active you don't have to freeze it to preview the mapping. From the block settings, you can click View mapping and a new window will pop up and show you how your data is mapped with the Loopify fields!
Server calls and External form
A webhook call (our Connect block) or a server HTTP POST call can also be used to trigger an External form. Having an open form hosted on your website, as seen in the video, makes for a clear referrer when submitting the form (and we will only accept calls from to this form from this web address). But when there is no referrer available (which is the case when you are doing a server-side HTTP Post or when you are using webhook) - a ‘secret’ must be included for identification and security reasons.
We'll do an example for which you'd need two flows in two different browser tabs. In the first flow, you have the External Form connected to Send Alert. In the second, you have a New Entry connected to Connect block.
- In the External Form block, click Create Mapping, copy the URL from the External form and paste it in the Callback URL of the Connect block. While in the Connect block, add the contact fields you want to be included in the call, add a fixed field named 'secret' and add any value to it. Having a field named secret is a must - otherwise, the call won't work.
Note! The Connect block does not have to be used. You can use your own ERP/CRM system to make the call, but in our example we'll show how to establish the connection between these two blocks. - When you have set up the Connect block, activate this Flow and send a contact to it through the New Entry block. The contact will trigger the Connect block which will open the Mapping modal of the External form if you go back in the other tab with the 1st flow.
- Map your external form (the secret will not be visible). On a successful map, the map URL will become the Trigger URL. Copy it and go back to the 2nd flow.
- Freeze it, and change the Callback URL of the Connect block to the newly-copied trigger URL.
- Unfreeze the Flow. Send another contact to this Flow. Since the connection is now fully established, you'll be receiving the Alert from the 1st Flow because the External form block in it has been successfully triggered.
This is how the Connect block can send data and trigger the External form. Of course, you can use a variety of different blocks or add contacts to the Flow in different ways. The choice is yours!
Tab reports
The summary of the tab reports can be previewed after activating the flow campaign. In an active flow, hover over the block, click the settings button and access the External form block reports through the reports tab. Here you can see the number of contacts that have submitted the form.
There is also a date picker where you can select a specific date range and see the data for the selected period. The pre-set date range is All time.
Note: You can still access the tab reports even after deactivating the flow.
Sweet! Activate the flow campaign and you're good to go. Your customers will be glad they filled out that form.
Comments
0 comments
Please sign in to leave a comment.