10+ Contact Form Designs

Cards 2 is an amazing UI kit and framework to allow you to quickly design and wireframe your next landing page using Webflow. There are over 100+ different prebuilt symbols and components included for hi-fidelity wireframing for any UI/UX designers. Create landing pages and designs faster with the Cards 2.0 UI kit directly in Webflow and ready to be published directly with code. This UI kit includes 50 new cards as Webflow components/symbols in both dark and light variations. 3 complete landing page designs in both dark and light. Symbols/components for both hero sections, features, testimonials, team, pricing pages, blog posts and more. These are responsive for all 4 breakpoints and all cards are offered in a Sketch file. This UI kit allows you to build your designs faster and begin the design process directly in Webflow.

Easily add a grainy effect to your entire site. This uses a grain png that was on a Webflow site. You can create your own grains as well to change it up.

A beautifully designed multi step form with unique animated input forms for your Webflow site. Even if you don't use the multi-step form the input label animations are a great design and perfect for any Webflow site contact form/checkout form.

This is the official starter UI kit for the Untitled UI Webflow components library driven by Relume. This project contains a styleguide with all of the necessary pre-built classes. There are no pages, no layouts and nothing that you need to delete. This Untitled UI kit uses the client-first Webflow styling system. The styleguide features all typography, H1 headings, H2 headings all the way through H6 headings. This also includes the heading classes from xxlarge to xsmall, paragraphs, links, block quotes, unordered and ordered lists. You'll find the class text sizes such as text size large, text weights, text heights, text styles, color swatches, including error, warning and success color states. Background colors, text colors, shadows, UI buttons and all necessary elements, badges, badge groups, form elements such as inputs, dropdowns, checkboxs and radios. This is the complete Untitled UI styleguide kit to jump start your next Webflow builds.

Box shadows aren't the easiest thing to create in Webflow. Here are 6 different box shadows ready to go and to be added to your projects.

A way to add a dropdown with all the countries and flags to your Webflow site. There are several examples that utilize Nice Select, including flags, no flags and a dropdown only. You can copy-paste the custom code element with a select tag with all the countries in it. Note that this is achieved via JS and you won't be able to preview this within the WEbflow designer.

Want to validate forms prior to submission in Webflow? Using this technique you'll now be able to validate form fields in Webflow prior to allow a submit using native Webflow forms. In order for this to work you'll need to add the custom code found on the Page Settings. This utilizes jqueryvalidate to validate the forms prior to submission. Jqueryvalidate offers a number of additional validation features that may relevant to your needs.

Here's a way to create a multi-step Webflow form that includes a step counter, custom confirmation animations and custom checkboxes. A perfect way to filter leads, create long forms that are filled out, and segment your lists/clients.

10+ premade contact form designs for Webflow. These premade components will allow you to easily add customized contact forms to your Webflow site. There are many different variations of labels and input form designs, and buttons that'll fit just about any type of design or requirements.

Here's a way to create a custom automatic slider for the hero section of your Webflow site. This was created with the native slider component and Webflow interactions.

Here is a custom 3D effect for cards created in Webflow. This allows you to create a hover effect that follows the mouse for your Webflow site. It turns a static div/card and then creates a 3D transformation.

A custom, automatic slider with unique animations on Webflow. It was made with Webflow with custom interactions.

A custom slider for multiple images per slide. This allows you to maximize the number of images, or items for each individual slide. Each slide has a transition preview effect and a fanning out animation upon the transition.

Here is a wonderful collection of 10+ Webflow FAQ layouts and components ready to use on your Webflow site. Included in these are accordions of varying style and design. There are versions with pop-up modals, dropdowns, expanding cards, fully expanded FAQs and just about everything you'd need to add an FAQ to your site.

Here are a collection of 16 different footer designs, all responsive and fully customizable and ready to be added to your Webflow sites. A great way to add a footer to your site quickly.

Here's a hero card hover interaction for your Webflow site. Upon hovering a circle expands to fill the entire card. Simply copy and paste this to your Webflow site.