1

We currently have a form to sign up for our services on our page. It doesn't actually submit; we prevent the default event and then run through a series of checks, make an AJAX request, and redirect to a thank you page (or display an error message/try again).

We then decided to add the form two more times (once at the bottom of the page and one more time popping up in a modal). Is this inappropriate?

In our current state, we have the error of multiple elements using the same ID. Knowing this is bad, I've found a workaround: Possible to associate label with checkbox without using "for=id"?. The problem is even without the ID error, I'm not entirely sure having three of the exact same forms on the page is appropriate still.

How should I handle duplicate CTA's on the same page?

lm2285
  • 11
  • 1
  • 2
    Why not just omit the ID (using classes if you need an identifier)? That way you wouldn't have the problem of duplicate IDs, and could still use the same form three times. – Obsidian Age Jul 13 '18 at 04:07
  • I am actually using classes as an identifier. The only reason why I have the id is to link to the label (`for="signup-email"` on the label and `id="signup-email` on the input). Is there any repercussion from dropping both besides losing the ability to click on the label and focus on the input (readers, etc.)? – lm2285 Jul 13 '18 at 04:15
  • how are the forms being added to the page? You could try change the IDs of the from elements before or after they have been added.. – RyDog Jul 13 '18 at 05:16
  • You can define a form more than once in a page but will not be able to use the label `for` attribute. All you have to do is use class instead of ids in HTML form and after that, in the javascript event handler use `this` to select the current form – Shubham Pokhriyal Jul 13 '18 at 06:29

0 Answers0