0

What is the best way to place 2 identical forms on the same page, but use the same form action and fields for each form? How can I keep response messages in the respective form area from which the data was submitted?

I'd have one form in the footer of my site, and one form in a popup on the home page of my site. I'm using a hidden div and Magnific to open the popup containing the same code from the form that is located at the footer. Essentially, both form do the same thing, and utilize the same form action.

I do not have access to the form action, or the code in the form action page.

Currently, the forms existing on the same "page" are no problem, but when I submit an email on one form, the errors and success messages show up on both the popup form as well as in the footer form.

I've read that this may be possible to do with ajax, but for completeness sake, I want to make sure that I'm building that I'm doing what I can with the form html, before moving on to studying ajax for this.

Jason
  • 133
  • 1
  • 9

1 Answers1

1

Sadly there is no nice html/liquid solution for this.

The only way is to use cookies in order to save information which form was submitted and show the error message only for that form instead of the two ones.

AJAX is not a good solution because of the Google Recaptch-a when you submit the form more than once, which is a real pain in the a** since there is no way to disable it and the form will fail if you try to submit it with ajax.

The easiest solution is to use cookies, other option is to rely on an APP for this, but it may be an overkill for this.

Forms in Shopify are... how to put it nicely... dumb... basic... not developer friendly or just not made to be tweaked in any sort of way ( excluding the front-end ).

drip
  • 12,378
  • 2
  • 30
  • 49
  • thanks for this. I agree about Shopify forms. In your 3rd paragraph, did you mean to say, “ajax is noT a good solution”? I read about the Recaptch-a issues. Would you happen to have a link so I can understand how to use cookies for this? As for the app solution, my main goal, after placing 2 forms onto the page, is to get the form to submit the customer’s email to Shopify (not into the apps own database). All the apps I have tried (and I’ve tried most of the recommended ones) have one big issue, they DO NOT post the form data INTO shopify. They store it in their own DB, for export. – Jason Mar 16 '19 at 12:57
  • @Jason you are correct it was supposed to be "not" :D You can see the answers here https://stackoverflow.com/questions/14573223/set-cookie-and-get-cookie-with-javascript where you can find functions ready to use for setting a cookie and getting it. – drip Mar 16 '19 at 13:51
  • thanks for the link. I understand setting cookies. Can you clarify if your referring to setting cookies for 1.) placing to forms on a page OR 2.) submiting the forms in relation to the Recaptch-a that Shopify has implemented? Thanks. – Jason Mar 16 '19 at 22:22
  • @Jason, no I mean, that once you click the submit button you instantly save the cookie ( for example "submitted_form", "form1") when you are redirected to the form page you just read the cookie and since you know which form was submitted using JS you show the error state ( which have display: none by default ). That's the idea. – drip Mar 16 '19 at 23:45
  • I see. So just using the cookie so the user doesn't have to "re-input" data on the form page. Understood. – Jason Mar 16 '19 at 23:47