Attributer not working with custom forms on a React website

If you have a custom HTML form on a website built in React, then you may have noticed no data being collected when someone submits your form.

This is because React trys to ‘control’ the values in the form fields, so essentially what happens is that Attributer writes the data into the fields but React then deletes it.

The solution to this is not to have a ‘Value’ attribute on the Input fields.

So for instance, the standard HTML code for Attributer’s hidden fields is:

<input type="hidden" id="[attributer-channel]" name="[attributer-channel]" value="[channel]">
<input type="hidden" id="[attributer-channeldrilldown1]" name="[attributer-channeldrilldown1]" value="[channeldrilldown1]">
<input type="hidden" id="[attributer-channeldrilldown2]" name="[attributer-channeldrilldown2]" value="[channeldrilldown2]">
<input type="hidden" id="[attributer-channeldrilldown3]" name="[attributer-channeldrilldown3]" value="[channeldrilldown3]">
<input type="hidden" id="[attributer-channeldrilldown4]" name="[attributer-channeldrilldown4]" value="[channeldrilldown4]">
<input type="hidden" id="[attributer-landingpage]" name="[attributer-landingpage]" value="[landingpage]">
<input type="hidden" id="[attributer-landingpagegroup]" name="[attributer-landingpagegroup]" value="[landingpagegroup]">

Notice how for each form field there is a ‘Value’ attribute? For instance, on the Channel field it is value=”[channel]”

The solution is to simply remove that. So the code you would use is:

<input type="hidden" id="[attributer-channel]" name="[attributer-channel]">
<input type="hidden" id="[attributer-channeldrilldown1]" name="[attributer-channeldrilldown1]">
<input type="hidden" id="[attributer-channeldrilldown2]" name="[attributer-channeldrilldown2]">
<input type="hidden" id="[attributer-channeldrilldown3]" name="[attributer-channeldrilldown3]">
<input type="hidden" id="[attributer-channeldrilldown4]" name="[attributer-channeldrilldown4]">
<input type="hidden" id="[attributer-landingpage]" name="[attributer-landingpage]">
<input type="hidden" id="[attributer-landingpagegroup]" name="[attributer-landingpagegroup]">

Notice how there are no ‘value’ attributes for any of the fields? This will make the input “uncontrolled” (see React documentation here), which essentially means React won’t delete the values that Attributer writes into the fields.