In this tutorial we will cover mapping dropdown menus and radio buttons in your Loopfuse account.
Step 1: Build the Form
Here we are building a very basic form. The fields we are capturing are:
- First Name
- Last Name
- Radio (1,2,3)
- Dropdown (1,2,3)
First lets tackle the Radio Buttons:
You need to have 3 key ingredients set up for each radio “input”.
- id – The id of each radio choice should represent the label.
- name – The name should be the same for each selection
- value- The value should represent what you want to populate in LF.
Let’s look at the code for our sample form.
As you can see, each radio “input” has an id, name and value that when brought into LF will populate one field based on the customers selection.
Let’s move on to the Dropdown Menus
Dropdowns behave a little differently so we need to adjust our ingredients.
When you build dropdowns you’re actually making a “selection” based on “options” which is different than providing “inputs” like we did in the radio buttons.
We still need id, name, and value just not in the same places as in the radios. Let’s take a look.
That’s about it for the form. Now let’s move into Loopfuse and see what we need to do there.
Step 2: Mapping in Loopfuse
In this step we are assuming you know how to set a form capture up in Loopfuse. When you’ve set up your form you will be directed to the Mapping page (Administration > CRM Integration > Loopfuse Fields) .
WINNING TIP Loopfuse basically grabs anything it might consider to be a form field and throws it into the mix. This tends to be a little sloppy, so we recommend that you skip this section and go in and remove all the fields and manually re-enter them. This only works well on smaller forms. If you have a lot of fields on your form, this will likely not be worth the time. Entering them manually gives you the opportunity to place the fields in an order you want them to show up when viewing the spreadsheet.
Let’s say you just want to map them. Here is what that would look like:
This is all there is to it. They are now mapped.
Now let’s test the form.
Our Form
Success!
[it-rotate group=”4″]
