Headless Forms: Using your own HTML form

Users looking to embed their form directly inline, without the use of an iframe, can use Reform’s headless embed option.

NOTE: When using headless you will lose the ability to leverage Reform’s custom code features and certain integrations.

Step 1: Access the Headless Form Snippet

Locate the Snippet:

• Navigate to the form you want to embed.
• Go to Share → Headless.
• Copy the provided code snippet. This snippet includes the correct form action configured and examples for linking your inputs to Reform blocks.

Step 2: Integrate the Snippet with Your Website

Ask for the help of your developer to paste and install the headless snippet.

Step 3: Link Your Input Fields to Reform Blocks

• To connect an input field in your form to a Reform block, you need to add a name attribute to the input.
• Set the attribute value to answers[<block-id>], where <block-id> is the unique identifier of the block in Reform.
• Find the block ID in the form builder by clicking on the gear icon on the left side of the block and selecting Copy ID.

Step 4: Match Input Types

Ensure Input Types Match:

• Verify that the input types in your HTML form match the block types in Reform.
• For example, use <input type="number" /> for number blocks, etc.

Be aware that file upload blocks are not supported in Headless mode.

Step 5: Set Up Validation

Enable Browser Validation:

• It’s highly recommended to use browser validation to ensure users enter valid data.
• If a block is required in Reform, add the required attribute to your input field.
• Using the correct input type helps the browser understand how to validate the data.

Handle Invalid Data:

• If browser validation is not used and users submit invalid data, they will be redirected to the hosted version of the form to see error messages.

Step 6: Handle 'Select Multiple' Blocks

Use Checkboxes:

• For ‘Select multiple’ blocks, use <input type="checkbox" /> for each option.

Avoid Required Attribute:

• Since standard browser validation cannot enforce selection for multiple checkboxes, avoid marking these blocks as required in Reform.

Step 7: Configure Form Flow

Single-Page Forms:

• If your form is a single page, users will be redirected to the Outcome configured in Reform upon submission.
• To use your own confirmation page, set this URL as the redirect under Outcome in the form builder.

Multi-Page Forms:

• For multi-page forms, users will be redirected according to the logic rules set up in the hosted version of the form.
• If a logic rule is triggered, users will be redirected based on that rule. If no rule matches, they will be redirected to the next page as specified in the hosted version.

By following these guidelines, you can seamlessly integrate your own HTML forms with our platform while maintaining full control over their design and functionality.

If you're experiencing issues or have questions, please contact us at [email protected]. We're here to assist you!