Hi - I am having issues getting two third-party forms to display at different times.
I have the two forms embedded as iframes right now, and they both appear correctly. However, I want the page to load without any forms showing. Then when the user clicks on a button for NEW or RETURNING, the corresponding form shows below it - with the ability to switch to the opposing form if need be.
I have tried using hide/show interactions, tabs, and jquery to get this to work. I am very new to front end dev so I am certain there is something I am missing. What is the best way to go about achieving this sort of interaction?
So it should be pretty simple to do it with the interactions built into webflow…
You need to add a mouse click interaction to each of the buttons and then set it up as follows (as an example i will use the new customer form):
this would be first click interaction
set hide/show initial state for the new customer form embed to “none”
set hide/show new customer form as show “block”,
at the same time set set hide/show returning customer form to "none, (so if it is on screen it will be hidden)
this would be the second click interaction:
set hide/show for the new customer block as “none”
repeat the same for the returning customer button interaction.
if you want to have some sort of animations you can add opacity changes and some sort of transform… (make sure you add the initial state for all the animations)
I was able to get the interaction working the way that I wanted, however the embedded code does not show. I set a background color for each embedded element to see how the interaction works.
I am wondering if something is not working correctly with the embedded code when the Display properties are toggled. Is there another solution to getting the code to run and show?
