I want to create a signup process where a user will click sign up, the sign up form will disappear, and the text “check your inbox fro confirmation” will appear. This seems really easy, but I’m struggling with such a stupid part of this which is that when I try to put the text on top of where the form is it just drags the text into the form group and messes up my formatting.
I’m sure this is a simple button I have to press or something for this to not happen… any advice would be really helpful!
This is really just a simple matter of hiding and showing groups.
Let’s say you have a group ‘sign up’ where the user signs up.
You then add another group under that called ‘verify’ or whatever you want to call it…and add a text element with whatever you want to say.
When the user clicks the sign up button you have a workflow.
In the workflow, you sign the user up and then add another action to hide the signup group and another action to show the verify group.
Added: Your ‘sign up’ group would be visible on page load and collapsed when hidden. Your ‘verify’ group would not be visible on page load and collapsed when hidden.
Thanks for the response! I don’t need help with the workflow, that part is easy. The problem is getting the confirmation text to be where the signup form is without it becoming part of the same group and messing up the formatting.
If you follow the instructions I gave you it will work.
I tried that, but unfortunately it doesn’t work. I hid the group with the form, and when I create the text and drag it to the middle of the page where I’d like it the text automatically goes somewhere into the group with the form even though it’s hidden.
You need to put the text into its own group.
You can call it group ‘verify’ or whatever you want.
You need to have a separate group for your text.
Then, you hide and show the groups as I mentioned.
I have done that, the exact same thing happens. It just takes the element that I am dragging and puts it right into the hidden group that is my sign up form.
What do you mean by dragging?
I will modify my sign up form to show you it works like I’ve said.
I’ll upload a video tomorrow because I have other things going on tonight.
By dragging I just mean moving an element to where I want it to go. I made a video that illustrates the problem that I’m having:
https://www.loom.com/share/cdcc3fe3079747b4a10ab5b13c23ac8e?sid=dd03f45b-1a42-48ac-a92d-b7279685161a
This is simple. Use align to parent. Make two groups inside of it, 1 group your first section you want to be visible on load, and the 2nd will be hidden until you make it visible.
On your “next” action, just animate the visible one hidden (fade out) and animate in the hidden element (fade in).
Make sure the hidden element (one you want visible) is on top. You can do so by right-clicking the element and clicking “Bring to Front”.
When you do that, the element will get pushed to the bottom of the group. That is intended. The last item in your groups always has the layer precedence.
Hope that helps!
Thanks for the response, but I am still unable to do what I want. I made another recording of what happens when I use align to parent. Now the groups will just swap places and I end up with the text being either well above or well below where I want it to be.
What exactly are you trying to do here?
You want the ‘check your email text’ to appear overlayed on top of the elements behind it?
Or you want just one or the other to be visible at any one time?
I’m going to create a workflow so that when a user clicks “sign up” the form disappears and the confirmation text appears. The workflow part is easy, getting the text where I want is the part that I can’t for the life of me figure out how to do.
But why do you want it in the same container as the main part of the form, if you’ll be hiding the form?
Either put it in the same container, but obviously don’t hide it, or put it below it (that’s how you do it).
I don’t care what container it’s in, I just want the form to disappear when someone signs up and the confirmation text to appear. That’s it.
So which part of that are you having trouble with? (it’s not clear from your question or your videos).
But in any case, if the ‘check email text’ is inside the container you’re hiding then obviously that will also be hidden.
As I said, you need to put the check email text OUTSIDE of the container you’re hiding (not inside it, which is what you appear to be doing).
So, in the editor, that means below it (or above it), but NOT on top of it.
I want the text to be in the same exact location as the form. When someone clicks sign up the form disappears, and the text appears. I cannot figure out how to get the text to go where I want it to.
I get that the text needs to not be in the same container. I cannot figure out how to get the text to be outside of the container I am hiding but in the same location as the container I am hiding.
Does that make sense?
You need to use layout settings to control where it appears on the screen.
Was going to upload a video on this, but I see someone else gave you a good answer.
I wish you all the best for your app.
