Starting with MagicForm

All you need to do is copy/paste the MagicForm component from this link into your Framer site. This will add the component to your site and you'll instantly be able to finetune the properties.

On the properties panel on the right side of the screen you'll see a few options:

• FormID

• Input Types

• Container

• Steps

• Styling

• Submit button

• Success

In this blog we'll take a look at all of these options.

FormID

Once you publish your site the form will be available to use for your visitors. However what happens to their submissions? It needs to be send somewhere right! That's why you'll need to enter a FormID. This formID can be found in your MagicForm Dashboard. Simply select a new form and copy/paste the FormID onto your MagicFormPro component.

Input Types

On this tab you can define everything there is about the inputs on screen. Select the type of input and fill out the options inside the form. Make sure to give each input a unique value, otherwise you'll form will duplicate the input values.

Container

Define your container styles, nothing special.

Steps

MagicForm has a multi-step feature build in. All you need to do is allow for multiple steps in the Input Types and a multi-step form has been created. In this tab you can define the visual style, plus how you'd like to show the steps on canvas.

Styling

The inputs of MagicForm are completely customisable. There are so many values and options, we won't go through them all but we do like to point out that there are dropdowns in dropdowns. So make sure to check all of the tabs to find your active and error states.

Submit button

Just like the inputs have their own styling tab, so we do for the submit button. Also this tab allows you to change the text for the submit button.

Success

There are also a few different options for a success message. Simply select the options and enjoy your form.