Add div and id attributes so that contact form steps can be tracked

[Tiggerito]

What?

This is my first ever submission like this on GitHub. Please tell me if I've got it all wrong.

The contact form is single page, which means it is very hard for people to track form submissions on systems like Google Analytics. There is no success page to track it as a goal.

I've developed a way to hook into the page and detect user activity via JavaScript, this JavaScript can directly send a signal to Analytics so that it can track submissions.

But my solution, and probably anyone elses requires some minor edits to the theme.

The code needs to detect if certain elements are present. These elements indicate if the page has been submitted, or if the submission had errors (also useful to track). However the theme does not include an easy way to find those elements, and there are not always clean elements to detect.

The edits add id attributes to some div elements and add some div elements with id attributes. This makes it possible to detect if the page is a contact page and if it currently contains a success or error messages.

With that, people can write JavaScript to detect what is going on in the page. And most importantly, detect if the form was successfully submitted. With Google Analytics, events or fake page views can be sent which can be used to trigger a contact form sent goal.

Tickets / Documentation

I raised the issue a while ago.

#1114

And decided to have a go at making the fix myself.

I could not work out how to raise this change under the issue.

Screenshots (if appropriate)

Nothing is visible.

[bigbot]

Autotagging @bigcommerce/storefront-team @davidchin

[bookernath]

Makes sense to me! CC @mjschock