- 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 are hoping there’s a solution to this… and that someone can at least point us in the right direction?
Our read-only link is here
I think you’ll need to use a method like this: How to: Use Ajax to submit forms with default actions after submit
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.
Thanks for the offer! We will try to figure this out as best we can before we trouble you again
Thanks! Gonna check this out right now
@Luca, it doesn’t look like that solution ensures a successful submission, just that the form submit action was run, am I correct?
Hey, got it working based on the video Luca suggested
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.
Would you be able to help us a little further please?
@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.
Sorry, I didn’t check the code before posting it.
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!
You can check it here https://www.sweetjs.io/.
@skinpores - I’ll try to take a look later today or tomorrow.
@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.
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
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):
What we want is:
User clicks ‘Subscribe’ button >
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
@skinpores - sorry for the slow reply here. I’ve been slammed at work. I will get back to you soon though!
We understand. There’s no rush. We are super grateful that you still remember us