Donors list from split form

1

Hello,

In the donations page I am creating I have a list of the the 10 most recent donations with donor's name, dedication and amount.

I made a form that works but I could not find out a way to separate the imput fields.

I have to separate them because each name will open and close independently and the amount will be copied from the checkout.

Is there a way to split the form into 3 fields?

Thanks!

Nomes.zip (82.5 KB)

2

The question and setup is not very clear from the download.

3

Looking at your form, you already have it in two fields, one for the name and the other for the dedication (though this has the same placeholder text as name, and is a little confusing). So I'm also not quite sure what you're trying to do since it looks like you're 2/3 of the way there :slight_smile:. It just seems like you want one more field for amount?

<form method="post" action="https://kbook.com.br/disclaimer/receive.php" target="minhabase">
	<input type="text" name="nome" class="textoTabela" placeholder="Write your name here"><br>
	<input type="text" name="dedicatoria" class="textoTabela" placeholder="Write dedication name here"><br>
	<input type="text" name="amount" class="textoTabela" placeholder="Write amount here"><br>
	<input type="submit">
</form>

You'd need to make sure that your receive.php handles the new 'amount' in the POST request.

Feel free to clarify more what you might mean if this isn't it!

4

I am sorry my question was not clear.
I wanted to know if there is a way to have the inputs of a single form to be animated independently.
I could only manage to animate them in different forms but then they can not be submitted together.
In this particular case there will be a function that will read the inputs from the forms and the amount from the checkout but my question was more generic.
I only was curious if there is a way to independently animate the inputs because it would make animating forms and fields easier.

Nomes.hype.zip (233.7 KB)

5

Now I understand the request. This might help:

6

Nice! Thank you very much.

7

From an animation perspective, it looks like you've got them working pretty independently in that example?

I'm impressed you did it all on one timeline.

I'd say if you had items that were more complex, you may want to use separate timelines. However getting the dependent y-position/height behavior may be a little tricky, though perhaps it can be managed with clever grouping somehow.

8

Thank you Jonathan, I have really strived to keep the timelines at a minimum.

At first, I had a timeline for the buttons that open/close the lines and another for the lines themselves, and they got out of sync all the time, it was a nightmare, so I copied the buttons' animation to the start of each open/close moment of the timeline, and now they are consistent all the time.

I also created a few transparent buttons that go in and out of the scene, each moving the timeline to the exact point to perform the expected movement.
I call it the poor man's javascript because it allows me to keep everything in one timeline without any function.

And you're right about the need for clever grouping. In this job, I have some elements that move on a curved path at the beginning of the main timeline and in another timeline go straight down out of the scene and back when the user clicks a button. So I grouped the elements twice and animated each group in its timeline and in this way, the timelines don't interfere with each other.

1 Like