How can I extend my Webflow form with more input types using the Webflow form widget and the embed widget?
TL;DR
- Add standard inputs using Webflow’s Form Block and style them as needed.
- Use the Embed element inside the form to insert custom HTML inputs with valid name attributes.
- Style custom inputs using custom CSS and test the form after publishing to ensure all fields are submitted properly.
To expand your Webflow form with input types not natively supported in the Form widget, you can combine Webflow's Form widget with the Embed element to manually insert custom HTML inputs.
1. Use the Form Widget for Standard Elements
- Add a Form Block from the Add Elements panel.
- Insert standard input types like text, email, textarea, checkbox, and submit button.
- Style these using Webflow’s Designer for consistent UI.
2. Add Custom Input Elements Using the Embed Widget
- Drag an Embed element into the form (inside the Form Block).
- Inside the Embed widget, insert custom input elements manually using HTML. For example:
<input type="range" name="volume" min="0" max="100">for a slider.<input type="color" name="colorPicker">for a color picker.<input type="date" name="appointment">for a date picker.- Ensure all embedded input elements include a name attribute, or Webflow will not submit their value.
3. Maintain Form Functionality
- All custom inputs embedded using the Embed widget will be included in Webflow’s form submission as long as they:
- Are inside the Form Block.
- Have valid name attributes.
4. Style Custom Inputs
- Webflow cannot directly style embedded HTML inputs.
- Use custom CSS within an Embed widget or in the Page Settings (inside the
<style>tag) to style these elements.
5. Test Form Submissions
- After adding custom inputs, publish the site and run a test submission.
- Check the Site Settings → Forms tab or your integrated email to confirm all custom input values are received.
Summary
You can extend Webflow forms by inserting extra input types using the Embed widget inside a Form Block. Just make sure each custom input has a valid name and is placed within the form container to be submitted correctly.