This component consists of six input fields that are visually grouped together.
The top two inputs have rounded edges and share a middle border.
The next four inputs form their own group. The top input shares a border with the middle two inputs, while the middle two inputs share a middle border. The bottom input shares a border with the middle two inputs. .
This layout is ideal for collecting grouped information. Please note that collecting credit card information directly in Webflow is not possible, but this grouping style is commonly associated with credit card inputs.
In this example, the top two inputs are used for collecting the first and last name, while the bottom four inputs are for collecting an address, including the street, city, state, and address line 2. It would be straightforward to add an additional input for ZIP Code, address line 3, or any other required fields.
Even though the inputs share borders, each input has its own hover state. To ensure visual consistency, I've utilized Z indexes and border color transitions to maintain a seamless appearance, even when inputs share at least one border. This styling approach also applies to select fields and text areas.
It's important to note that each input includes a data-ms-member attribute. You'll need to replace the field ID with your specific field ID in Memberstack, ensuring the component functions correctly with your Memberstack integration.