Following our last post, we have been told what we wanted to achieve needs a bit of javascript:
Person enters email into the form and clicks ‘Subscribe’
Only if submission is successful, the ‘Share this’ section disappears, then success message appears in the yellow box, and the ‘Share this’ section appears inside the yellow box, underneath the success message.
Right now, we got the Italic part resolved with a mouse-click trigger. This is as far as we can figure out on our own as newbies/non-coders. The issue now is that regardless of whether an email address is entered, or whether the submission is successful or not, the latter part of Step 2 will happen if someone clicks on the ‘Subscribe’ button.
We don’t know how to use javascript to get this to only work if the form submission is successful.
We are hoping there’s a solution to this… and that someone can at least point us in the right direction?
Unfortunately it will require some coding to complete, but it is definitely achievable. I’m happy to take a look at it later today and provide more guidance.
Hello again,
So after testing it out this morning, we got to see if the social media icons would show up if the form’s error message occurs. We weren’t able to pre-record, and despite doing the exact same thing to trigger the error message, we ended up getting successful form submissions.
So, to force trigger an error message, we used the script suggested from this post
And found that the share icons ended up just sitting on top of the ‘Subscribe’ button.
@skinpores - look at the article I posted. In the code you’ll see the success and error callbacks, which trigger based on successful or failed submission (since it’s Ajax you actually get a response from the server without page reload). In the success and error functions you could hide, elements, add classes, etc…to trigger whatever you want to have happen visually on the screen.
I am really busy right now but the finsweet team offers free support on Slack for all their custom code products. They will be able to help you better than I could!
Hello!
Sorry to be bugging you again.
We got through Ajax Intro at W3Schools (since we are not coders here), but we clearly are super far from figuring this out on our own. We also tried googling on the forum other Ajax related post to at least take a guess through process of elimination…But this is all challenging
All we know is that now that we included the code, it stopped the trigger action we had set with Webflow.
We also plan to connect the form to Mailchimp, which we had been told to use ‘POST’ instead of ‘GET’ method. We don’t know if that changes the Ajax code.
We are pretty defeated. Would you be able to advise us a little more please?
@skinpores, after looking a bit more closely, I think I need to ask a few more questions to fully understand your goal:
Do you need to be sure that the submission is successful? When I say successful, I don’t mean just that the user passed the form validation, but that the data being submitted made it successfully to the server.
If the answer to 1 is “yes”, do you need to do something else if the form errors out? Again, not just form validation for bad user entry, but if the data fails to post (which will probably be very rare).
Where is the data going? Just to Webflow backend or to some third party service?
In my opinion you have three options.
You can use the code that @Luca linked to trigger an interaction on submit, which may cover your bases. You can probably hide some hidden share buttons inside the success div, and then reveal them using the interaction while hiding the ones on the bottom.
Another option is to have the form submit using the code I linked to above, which will probably require that you send the data to a third party service using Zapier. In this scenario you can do something entirely custom when the form is successfully submitted. This route will require some more development, but is also relatively easy to do, but it kind of depends on your requirements.
You could also do all of your animation / DOM manipulation using the finsweet code as well, just by modifying what happens when the form is submitted using javascript.
Sorry, I know this probably isn’t the simplest answer, but without fully understanding your requirements it’s a bit hard to say which is the right direction. If you want to avoid code (as much as possible) just use the finsweet code and tinker with your interaction a bit more.
Hi! Thanks again for taking the time to have a look at this further. We really appreciate this
In answering your questions:
1 & 3. Yes, we want the submission to be successful. We plan to connect the form to Mailchimp to capture all the email addresses (upon successful submission). We had set this up before with Mailchimp’s automation campaign, where successful subscriber will automatically get a double-opt-in email to confirm their subscription before being officially on our mailing list. Right now, we have uninstall this as we are on a free plan with Mailchimp, and every test submission is eating up the email capture limit we have. Sorry! Hopefully this doesn’t make things harder for you to help us.
2. If the error message appears, we got a hyperlink in the message to email us. That’s pretty much it. We have the hyperlink setting set to Email and have included an email address. We tested the hyperlink out, and got Webflow’s 404 page instead. We’ll need to fix that, of course. But that’s another issue perhaps for another time
Luca’s option
We implemented this earlier. The issue we have is that because ‘Share this’ animation is tied to clicking ‘Subscribe’, the animation also takes place when we receive the error message. So we ended up having the ‘Share this’ section stacking on top of the ‘Subscribe’ button, like the following (circled in green):
if successful submission > Success message appears where ‘Sign up for our newsletter’ is > ‘Share this’ animation takes place as we have designed
if error submission > ‘Share this’ remains as is i.e. below the yellow box. Error message shows up where "sign up for our newsletter’ is.
We are open to modifying the finsweet code, so that the trigger for the animation is when success message appears, rather than the click of the’Subscribe’ button. But - and we are a bit embarrassed to say this even though we are noobs - we don’t know how or what exactly we need to tweak in the code
The other option
So sorry… All we know is that Zapier, bottom line, is like a middleman. We are happy to learn on the go on any coding necessary to achieve (as close to) what we want.
As we are no experts, we rely on your expertise on the best solution for us
