Building a Typeform like form in Framer.
Stop embedding forms into your Framer sites. You can easily create a native form that looks like Typeform.
What you'll learn
Getting started with MagicForm requires only a few minutes. All you need is the MagicForm component in your Framer site and an account on our dashboard. In this academy session we will guide you every step of the way.
Getting the component
Start with a template.
Getting the MagicForm component in your Framer project is very easy. Simply copy the component from our Template library and paste it straight into your Framer project.
Don't want to go over to the template section. Simply click the button below and we attach our Contact form to your clipboard.
Now that you have the MagicForm component in your project. You can go ahead and customize it any way you want.
Framer pastes the MagicForm component inside a component in your project. Simply double-click the component and select: Unlink and Detach all.
Customize the component
Completely on brand.
Styling the component is all done through the Framer properties panel. Simply select the MagicForm component on canvas and scroll a bit down on the properties panel on the right. You'll see a few different menu options which you can pick from.
Creating the form is mainly done in the Input Types tab. In there you can simply select one of the 15+ input types, add validations, decide the width of the input, add conditional logic and a whole bunch of other options.
After you've customised all of the inputs it's time to open the Styling tab. When clicking on this tab you'll see a variety of new tabs. Your main styling of the inputs is done in the Inputs tab and all other tabs help you to style specific elements like the fonts or specific input types.
Styling the Active and Error states of your MagicForm component can be found by opening the: Styling > Inputs tab and scrolling down to the bottom of the list.
Last but not least you can style the Submit button and how to handle success in the tabs all the way to the bottom.
Receiving submissions
Create your own account.
When you've customised your MagicForm component just the way you like it, it is time to start receiving submissions. MagicForm is the only form solution for Framer that also takes care of all of your submissions within our own platform. This means you don't need anything else for your forms then MagicForm.
Simply sign up for an account by clicking that gorgeous looking button in our navigation - or click here.
Once you have created your account and logged in you will create a new form in the dashboard. That will be the form where your submissions will be stored. Each form in the dashboard will have a specific Form ID and all you need to do is enter that form ID in the MagicForm component inside Framer.
You don't need to do anything extra if you want to receive files with your MagicForm component. Simply make sure the File input is setup on your component and the Form ID is correct.
Create new form
Enter form name
Receive email notifications in your inbox.
Cancel
Submit
Workflow enhancements
Get notified and connected.
Now that you're successfully receiving form submissions, it's time to plan ahead. By opening a specific form tab in MagicForm dashboard you can navigate towards the Integrations and Settings tab.
Integrations: Allow you to automatically add contact/subscribers to a variety of CRM systems. By enabling the integration you'll receive new submissions automatically in your CRM.
Please note; you'll first need to have received one submissions inside your form. This is necessary for the mapping of the fields towards the integration.
Settings: Enables you to tweak your email notifications. There are three different settings you can choose from:
Receive email on submission - Sends a email on each new submission to your own email.
Add Email to notification List - Sends email(s) on each new submission to all email addresses added to this input.
Send email to subscriber - Allows you to draft a mail that will be send towards the email address that is included in the form submission.