Is it possible to add drop-down or radio buttons for different shipping options in Webflow? If not, is there a workaround available?

Published on
September 22, 2023

Yes, it is possible to add drop-down or radio buttons for different shipping options in Webflow. Here's how you can do it:

  1. Create a form: Start by creating a form element on your Webflow page. You can find the form element in the Elements panel. Drag and drop it onto your page wherever you want the shipping options to appear.

  2. Add the shipping options: Within the form element, you can add various input elements such as drop-downs or radio buttons to represent the different shipping options. To add a drop-down, drag and drop the Select Field element onto the form. To add radio buttons, drag and drop the Radio Button Field element onto the form.

  3. Customize the options: Once you've added the input elements, you can customize the options for each shipping choice. For example, if you added a drop-down, you can double-click it to edit the options. If you added radio buttons, you can simply click on each button to edit the label.

  4. Styling the form: You can style the form and the input elements to match your website's design. Use the settings panel to modify the appearance of the form, and apply any custom CSS classes or styles as needed.

  5. Submitting the form: To handle the form submission and capture the selected shipping option, you have a few options. If you're using Webflow's form submission feature, you can set up form notifications or integrations with third-party services to receive the selected option. Alternatively, you can use custom code to handle the form submission and process the selected option.

Workaround:
If you want more control over the form submission process or need to integrate with specific services, you can also consider using Webflow's custom code feature. With custom code, you have the flexibility to build a custom form using HTML, CSS, and JavaScript, and handle the form submission and processing on your own.

By using custom code, you can implement more advanced features, such as dynamically updating the shipping options based on the user's location or calculating shipping costs based on the selected option.

In summary, you can add drop-down or radio buttons for different shipping options in Webflow by creating a form element and adding the appropriate input fields. You can further customize the styling and handle the form submission using Webflow's built-in features or by using custom code.

Additional Questions:

  1. How do I customize the appearance of the shipping options in Webflow?
  2. Can I use conditional logic to show or hide shipping options based on other input selections?
  3. Are there any third-party integrations available to handle the form submission and shipping calculations in Webflow?