Using your own HTML form
If you want to have full control over the design of a form you can build your own HTML form and connect it to Reform. You will be able to see responses in the dashboard and enable integrations. Reform will also handle logic and routing.
Connecting to Reform
In the dashboard you can go to Share -> Headless to find a snippet for your form. The snippet has the correct form action configured and examples of how you can wire up your inputs to Reform blocks.
Blocks
To connect an input field in your form to a Reform block you need to add a name attribute. The value of the attribute should be answers[<block-id>]. You can find the block id in the form builder by clicking on block settings and then selecting Copy ID.
It's recommended to select an input that corresponds to the type of Reform block. That means you should use an <input type="number" /> for number blocks etc.
Note: It's currently not possible to use File upload blocks in Headless mode.
Validation
It's highly recommended you utilize browser validation to help your users input valid data. If a block is required in Reform you should add the required attribute. Selecting the correct input type will also help the browser understand how the input should be validated.
If you don't use browser validation and the user inputs invalid data, the user will be redirected to the hosted version of the form where error messages are displayed.
Note: For 'Select multiple' blocks it's recommended to display an <input type="checkbox" /> for each option. However using standard browser validation it's not possible to specify that one of the has to be selected and thus it's better not the make the block required in Reform.
Form flow
If you have one page in your Reform and a user submits the form in headless mode they will be redirected to the Outcome configured in Reform. If you have your own confirmation page on your website you should add that as the redirect under 'Outcome' in the form builder.
If you have multiple pages in your Reform the user will be redirected like they would on the hosted form. If a logic rule is triggered the user will be redirected based on that. If there is no logic rule that match they will be redirected to the next page in the hosted version of the form.