Security issue when redirecting non-Hubspot form

[cdesilva]

I created a non-Hubspot form in a Gatsby project that is able to submit data to Hubspot. The issue I'm running into is with the page redirect. I'm unable to use rel="noopenner" which poses a security risk for users.

Here is my form: 

            <form className="metis_apply_now_GA program-apply flex flex-col items-center">
                <label htmlFor="email">Email address</label>
                <input className="applyNowInput" type="email" name="email" placeholder="Enter your email address" onChange={handleChange} value={email} required />
                <div className="inline-block" onClick={trackGoogleAnalyticsEvent}>
                    <input className="w-40" value="APPLY NOW" id="loanAppSubmitBtn" type="submit"/>
                </div>
                <p className="mt-3 text-xs italic">Please note: clicking Apply Now will redirect this page to your application</p>
            </form>

Here is the onClick method:

    const redirectLoanApp = () => {
        window.open(url, "_blank", "noopener")
    }

    const trackGoogleAnalyticsEvent = () => {
        ReactGA.event({
            category: 'Apply Now Button',
            action: 'click',
            label: 'clicked on loan app input field or button'
          })
        redirectLoanApp()
    }

I had to wrap the input in a div and add an onClick method to it as a workaround to not being able to add JavaScript to the submit button. I'm looking to collect data from the form when a user submits while also redirecting them to the loan application. The onClick method above works fine when I apply it to other elements, but something about Hubspot's submit method looks to be overriding the noopener. 

[Derek_Gervais]

Hey @cdesilva ,

Apologies if I missed this in your question, but how exactly are you submitting this form to HubSpot? If this is just a custom HTML form you've created, then there shouldn't be any HubSpot functionality interfering with your onClick. If it's a customized embeded form, though, it's totally possible.

If this is an HTML form that does not use the embed code, are you using the v2 or v3 form submission endpoint? Also, can you link to an example page that has this form?

[cdesilva]

Hey @Derek_Gervais,

Thanks for taking a look! I made a few tweaks since posting this. Here's what I came up with as a solution:

   const redirectLoanApp = e => {
        window.open(URL, "_blank", "noopener noreferrer")
    };
       
const trackGoogleAnalyticsEvent = e => {
            ReactGA.event({
                category: 'Apply Now Button',
                action: 'click',
                label: 'submitted loan application'
              })
                redirectLoanApp()
    }
        
             <form className="metis_apply_now_GA program-apply flex flex-col items-center" method="post" action="https://forms.hubspot.com/uploads/form/v2/PORTAL_ID/FORM_ID" onSubmit={trackGoogleAnalyticsEvent}>
                <label htmlFor="email">Email address</label>
                <input className="applyNowInput" type="email" name="email" placeholder="Enter your email address" onChange={handleChange} value={email} required />
                <div className="invisible">
                    <input type="text" name="Stakeholder Type" value="Student"/>
                    <input type="text" name="Program Name" value="Data Science Bootcamp"/>
                    <input type="text" name="School" value="Metis"/>
                    <input type="text" name="Student Loan Application Status" value="BLA Click Email Submitted"/>
                    <input type="text" name="Clicked Begin Loan Application BLA" value="BLA Click"/>
                </div>
                <input className="w-40" value="APPLY NOW" id="loanAppSubmitBtn" type="submit"/>
                <p className="mt-3 text-xs italic">Please note: clicking Apply Now will open your loan application in a new tab</p>
            </form>

As far as the HubSpot functionality interfering with my form, according to the non-HubSpot form docs, it says that HubSpot may not capture submissions if:

• Form contains hidden fields. The tool does not collect information from any hidden fields.
• Form has JavaScript bound to the form submit event or submit button click event. This is how the tool captures submissions and any other events, and can prevent HubSpot from knowing when submissions occur.

I addressed the first bullet point by wrapping the inputs I wanted to be hidden in a div set to invisible. As far as the second bullet point, as you can see in my code above, I do have an onSubmit handler, but it appears that form data is still being collected. One issue I'm noticing, however, is that it still says n/a on views and submission rate. I tried submitting the form from home at a different IP address as I was told that my work IP address won't collect data, so I'm wondering if there's something missing from my code. Everything related to the form is client-side with the endpoint being in the form action.

You can check out the live Apply Now form at https://thisismetis.skills.fund/

Thanks again for the help!