Pop-up Form within <form> tags are not getting submitted in Hubspot

I have added Hubspot tracking code in GTM for All pages. The tag is getting fired as well.

I have a “Request an Appoinment” pop-up form within the <form> tags and still the form submissions are not getting recorded in the Hubspot Contacts page.

Can someone please help?

Hi @akashagl

Are you trying to have Hubspot send this data via the non-Hubspot forms feature?
If so have you checked for these issues with your form implemntation: https://knowledge.hubspot.com/articles/kcs_article/forms/use-non-hubspot-forms#supported-forms

e.g. does your pop-up form load after the page loads?

Hello @MatthewShepherd ,

Yes, it says the form must be wrapped in <form> tags and as shared in my screenshot, the form is wrapped within <form> tags.

Regards,

Akash.

Hi @akashagl

The article also mentions:

If your form is supported, but HubSpot is not capturing submissions, it’s likely due to one of the following reasons:

  • Form is not enclosed in <form> tags.
  • Form is contained inside <iframe> tags.
  • 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.
  • Form was introduced after the page completed loading. The tool scans the page as soon as it loads and listens to submissions on forms that were present at that point.
  • Form contains a sensitive field, such as credit card number.
  • Form contains hidden fields. The tool does not collect information from any hidden fields.
  • The email field is not an email type input, as in: <input type=“email”>.
  • The form isn’t using a standard <input type=“submit”> button for its form submission. A generic HTML <button> will prevent HubSpot from capturing submissions.

If you can share a link to the page containing the form I can see if any of the above are the issue.

Hello @MatthewShepherd ,

There are two forms: one is a popup when clicked on “Request an Appointment” at the header, and there is another form on the right of the page.

https://www.cytecare.com/treatment/head-and-neck.php

Thank you.

Hi @akashagl

Your non-Hubspot forms are possibly failing to capture data due to these three points:

  • The email field is not an email type input, as in: <input type=“email”>.
  • 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.
  • The form isn’t using a standard <input type=“submit”> button for its form submission. A generic HTML <button> will prevent HubSpot from capturing submissions.

Your email input is a text type input instead of email type:
<input type=“text” class=“form-control” id=“land_email” name=“land_email” placeholder=“Email Id”>
Your submit button is a button element instead of a submit type input and has an onclick javascript event:
<button type=“button” class=“btn bottm-bttn” id=“page_appointment_submit” name=“page_appointment_submit” onclick=“appointment_validate_landing();”>Submit </button>
Your page also has some JavaScript errors showing in the browser console which could cause issues too.

Thank you @MatthewShepherd for the insights. I will have them fixed from our engineering team.

Have a good day!