How to tie entered data from a form to a user?

@renzof
Thanks you so much for your help! This has been a tricky problem, so I greatly appreciate your solution.

This is the code that I put on my HTML landing page:

<script>
    (function(w,d,t,u,n,a,m){w['MauticTrackingObject']=n;
        w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},a=d.createElement(t),
        m=d.getElementsByTagName(t)[0];a.async=1;a.src=u;m.parentNode.insertBefore(a,m)
    })(window,document,'script','http://newsletter.smile.ws/mtc.js','mt');
    mt('send', 'pageview', {'tags':'sunshine-book'});

</script>

To test it out, I submitted a test contact on my HTML landing page.

When I log-into Mautic, and go to the contact page for the contact, the tag field is blank:

Screen Shot 2020-03-13 at 13.42.24

However, the tag does appear as an option in the tag menu:
Screen Shot 2020-03-13 at 13.43.25

How can I make it so the tag field is automatically filled with the tag?

On the tracking API page you linked to, it says the following:

The contact’s tags can be changed by using the tags query parameter. Multiple tags can be separated by comma. To remove a tag, prefix it with a dash (minus sign).

For example, mtracking.gif?tags=ProductA,-ProductB would add the ProductA tag to the contact and remove ProductB.

However, where would I put the mtracking.gif?tags=ProductA,-ProductB code? Do I need to set up a tracking pixel or can it be done via Javascript? Thanks!