Mastering Form Input in Webflow CMS: A Comprehensive Guide

Webflow has revolutionized the way we design and build websites, thanks to its no-code platform and intuitive visual builder. However, as with any tool, there are certain aspects where users may need a helping hand. One such area is adding form inputs in a Webflow CMS. This might seem challenging, especially when you need different form inputs for different CMS items. But, worry not! This guide is here to help you master form input in Webflow CMS.

Understanding the Problem

Let's consider an example. Say, you're designing a website for a client who hosts voting events. You've created a CMS collection for different countries, each having a video and an input field for members to fill in their votes. Now, the problem arises when you insert a form in a Collection Item; it's the same input for all items. You want each country to have its own unique input field, but how do you do that?

Moreover, you want the form data to be sent to different email addresses or even be connected to Google Forms, another hurdle to cross. And to top it all, you want to keep using the CMS because it's efficient and all your data is already there. So, what's the solution?

Mastering Form Input: The Solution

Firstly, let's understand that each Form Block in Webflow has a unique ID, and each form inside a Collection List will have the same structure. To differentiate the input fields, you can bind a field inside a form using an embedded HTML "add field" and set the field to hidden.

Step-by-Step Guide

Here's a step-by-step process to help you understand this better:

Select the Form Block and add an Embed component inside the form but outside any input fields.
Paste this code: <input type="hidden" name="Field" value="{{webflow-field-here}}"/>
Replace 'Field' with the name of your CMS field and 'webflow-field-here' with the field's value.
Set the CSS display to 'none' so the field won't be visible on the page.
Now, when you publish and fill up the form, under forms, you'll find the 'new' Job column.

Using this method, each Collection Item will have its unique input field as the unique ID from the CMS is tied to each form.

Connecting with Google Forms

If you want to connect your input fields with Google Forms, you can embed the Google Form into your website after building it out in Google Docs. Remember to adjust the dimensions of the iframe to fit your design properly.

And there you go! You've now mastered the art of form input in Webflow CMS. Keep practicing and experimenting and you'll find yourself becoming more comfortable and efficient with Webflow. Happy designing!

The Hidden Power of Conditional Visibility

Here's a nifty trick to take your form input mastery to the next level. It's about leveraging the power of Webflow's Conditional Visibility feature. This feature allows you to show or hide elements based on the conditions you set, and it can be incredibly useful in creating dynamic, personalized forms.

Let's say, for instance, you have a form where users can choose their country from a dropdown list. Depending on their choice, you want to display a different set of questions or input fields. This is where Conditional Visibility shines.

First, add a new field to your CMS for each of the different sets of questions you want. Then, in your form, add all the different sets of questions as separate form blocks. Now, set a condition on each of these form blocks using the Conditional Visibility feature.

For example, for the form block with questions for US users, you would set the condition to 'Country equals United States'. Repeat this process for each form block, adjusting the condition to match the appropriate country. Now, only the form block that matches the user's selected country will be visible, creating a dynamic, personalized experience.