Skip to a Section:
What Are Text Inputs & Forms?
Text Input & Forms allow your site visitors or prototype testers to type real text into a contact form or newsletter subscription so you can receive results directly to your personal e-mail address!
Text fields include input validation for Text, Email, Password, or Numbers, and you can set any of these to be required fields.
How To Create a Form
Create a text layer as a placeholder where you want users to enter their information
2. Select the text and click Text Input in the Anima plugin under the Prototype tab
(In Sketch, find Form & Text Input under the Smart Layers section)
3. Select the Text Input type from the drop-down: Text, Email, Password, Number, and check if it should be a required field or not
4. Click Save!
Then Create a Submit Button:
Select the button component in your design
Go to Submit Button in Anima plugin (In Sketch, go inside Smart Layers and click 'Forms, Text Input' and then 'Submit Button')
(Optional) Enter Email address to send notifications when visitors submit information
(Optional) Name for a Spreadsheet which you can view and download as CSV of all the entries
(Optional) Select a Success Page where to redirect visitors once their submission has been successful
(Optional) Select a Failure Page where to redirect visitors in case their submission failed
Click Save!
❗ Note: Forms only work for sites being hosted with Anima. |
Download Form Submissions
To download the information your users submitted, log into the Anima Web App --> go to your Project’s Settings --> at the bottom of the Prototype link tab, you will find the Download CSV button under Form Submissions:
❗️If you're exporting your form into code, please note:
When hosting your website on Anima, we also give you a tiny backend server to support your forms. It allows form submissions to be sent to that server and stored for you.
This server-side code cannot be simply exported and included in the code package, as it needs to run on a server rather than on the browser (which is called client-side code).
Therefore, when exporting code with forms, you’ll have to implement your own server to capture form submissions and store your data.
Video Tutorials:
Figma:
Adobe XD:
Sketch:
Get involved in our Anima Community Forum!
New to Anima?
Learn More