Signup Forms is a pack of eight sets of registration and sign-up forms, designed and maintained in-house by uiCookies. Every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5.3 built on its own form controls, input groups, floating labels, cards and buttons, and Tailwind CSS 4. The sets run from simple sign-up cards and split-screen layouts to password strength meters, social plus email sign-up, event and course registration, newsletter and waitlist forms, a dark set and a set that validates with CSS alone.
A good registration form asks for as little as it can and is honest about what it needs. Every field has a visible label rather than a placeholder that disappears, the right autocomplete value so browsers and password managers can fill it, and the requirement written next to it before anyone gets it wrong. Required fields are marked in words, not colour alone. Errors appear after someone has typed or tried to submit, say exactly what to fix, sit next to the field and are linked to it with aria-describedby. Grouped choices go in a fieldset with a legend, the show password control is a real button with a pressed state, and without JavaScript the form still submits and the browser still checks it.
Free download Browse live demos All snippets
The sets
1. Simple Sign-up Forms
A classic sign-up card with stacked labels and a floating-label card, each with name, email, a password with a show and hide button, and a terms or opt-in checkbox.
Use them for the standard create account screen. A short script adds the password toggle and inline error messages on submit; without it the browser validates the form itself.
Live Demo CSS, Bootstrap & Tailwind code
2. Split-screen Registration Forms
Two split-screen registration layouts: a form beside a dark panel of plan benefits, and a membership form beside a sunset scene drawn entirely with CSS gradients and clip-path.
Use them for trial sign-ups and membership pages where the reasons to join belong next to the form. They stack on phones and need no JavaScript.
Live Demo CSS, Bootstrap & Tailwind code
3. Password Strength Sign-up Forms
A password manager sign-up with a four-segment strength meter and a rule checklist, and a team invite with a strength bar, rule chips and a confirm-password match message.
Use them wherever the password matters. The rules are plain text tied to the field and enforced by pattern, so the form works without the script, which ticks rules and announces a short summary politely.
Live Demo CSS, Bootstrap & Tailwind code
4. Social and Email Sign-up Forms
A providers-first card with full-width Continue with buttons above an email form, and an email-first card with a row of square provider buttons below an or divider.
Use them when people can sign up with an existing account. The buttons show neutral letter tiles instead of brand logos, ready for each provider’s official artwork, and the set needs no JavaScript.
Live Demo CSS, Bootstrap & Tailwind code
5. Event Registration Forms
A half marathon entry and a sourdough course booking, each split into numbered fieldsets with ticket radio cards, date fields, selects, dietary checkbox chips and contact details.
Use them for races, workshops, classes and conferences. Every group has a legend, the cards light up through :has(:checked), and there is no JavaScript.
Live Demo CSS, Bootstrap & Tailwind code
6. Newsletter and Waitlist Forms
A dark inline newsletter band with a joined pill field, a launch waitlist card, and the same card in its confirmed state.
Use them in footers, between articles and on coming-soon pages. The browser checks the address, then a few lines of script swap in the confirmation and move focus to it.
Live Demo CSS, Bootstrap & Tailwind code
7. Dark Registration Forms
A developer sign-up with a prefixed username field and plan cards, and an invite-only registration with a patterned invite code, both on dark cards with a single accent colour.
Use them in dark dashboards, developer tools and private communities. Borders and grey text are tuned to keep their contrast, and the Bootstrap version uses its own dark colour mode.
Live Demo CSS, Bootstrap & Tailwind code
8. No-JS Validation Sign-up Forms
An allotment waiting list form whose errors and green ticks appear only after interaction, and a rowing course booking with progress segments, a revealed optional field and a button that changes look when the form is ready.
Both run on HTML and CSS alone: :user-invalid and :user-valid handle the states, and :has() drives the hint, the reveal, the progress and the button.
Live Demo CSS, Bootstrap & Tailwind code
Frequently asked questions
Are these registration forms free to use?
Yes. All eight sets are free for personal and commercial projects, including client work and products you sell. Attribution is optional but always welcome. The full terms are on the uiCookies licence page.
Do the forms need JavaScript?
Sets 2, 4, 5 and 8 use no JavaScript at all. Sets 1, 3, 6 and 7 add a few lines of vanilla script for the show password button, inline error messages, the strength meter or the newsletter confirmation, with no libraries and no Bootstrap JavaScript bundle. Without the script every form still submits and the browser still validates it.
Are the forms accessible?
Every field has a visible label and an autocomplete value, required fields are marked in words or with a written key, and hints and errors are linked with aria-describedby. Grouped choices use fieldset and legend, the password toggle is a button with aria-pressed, and the strength summary is announced through a polite live region. All sets pass an axe-core WCAG 2.1 AA check, show a visible focus ring and stop transitions under prefers-reduced-motion.
Which frameworks are covered?
Every set comes as plain HTML and CSS with no dependencies, as Bootstrap 5.3.8 using .form-control, .form-floating, .form-select, .form-check, .input-group, .card and .btn restyled through Bootstrap’s CSS variables, and as Tailwind CSS 4 utility classes. The three versions of a set look the same, so you can switch stacks without redesigning.
How do I validate a registration form without showing errors too early?
Use the browser’s own constraints, such as required, type="email", minlength and pattern, and style the :user-invalid pseudo-class instead of :invalid. It only matches after someone has changed the field or tried to submit, so a fresh form shows no red. Set 8 shows the full pattern with no JavaScript, and set 1 shows the scripted alternative with custom messages.
More registration forms from the community
Examples by other designers and developers, collected before we built our own set. Each links to its original source.
Colorlib Reg Form V33
The V33 is a stylish Bootstrap registration form.
Visual aesthetics of this registration form are spot-on. You have a colorful image holder and a big registration form on one side. Drop shadow effects are used smartly to highlight the form. Unless you have any special requirements, you can use this template without making any changes. The creator has kept the code script as simple as possible for developers who want to modify it and add their own personal touch.
Signup Form V06
Those seeking a full-page registration page template will love this Bootstrap registration form.
The creator utilized the full-page layout effectively, providing ample space for the form. You also have a space to add an image on one side. If you are making a registration page for a personal coach or a professional’s website, the image space will come in handy to add the site owner’s image and improve personal branding. Big social media icon buttons are also given along with the regular registration forms to help you easily register with the social media profile option.
Signup Form V02
The V02 is a free-to-download, high-quality bootstrap registration form.
Those who want a modern registration form for their business or professional website must consider this template. Everything is chosen carefully, from the fonts to the color scheme, to maintain a business-like look. Like most other free Bootstrap registration forms in this list, this one also uses the latest CSS3 script. So, you can try all modern colors, designs, and animations on this template without any worries.
Bootstrap Registration Form v10
This cleverly designed Bootstrap registration form lets you select the profile category when registering. Allowing the user to select the profile category helps the site owners to deliver a personalized experience. The registration form in this example is neatly organized so that the audience can easily interact with this template. Basic controls like the check box, text links, and call-to-action buttons are in the default design. Take a look at our CSS link style designs collection to make your registration form even better.
Colorlib Bootstrap Registration Form v16
The V16 is a comprehensive registration form with numerous elements. If you are looking for an interactive registration form for events and meetings, the v16 form will be a good choice. Since the form was originally designed for charity events, the text fields are named accordingly. You can edit this HTML form and use it for other registration purposes. An interactive slider element is also given along with other basic form elements, making this template unique from other Bootstrap registration form examples in this list. Overall, the V16 is a modern registration form template with user-friendly elements.
Colorlib Registration Form v15
The V15 is a student registration form template. In this registration form, users can select their gender using the radio button and can use the form field to enter the relevant information. The creator has kept the registration form layout large enough to accommodate images and the lengthy registration form. If you are planning to use a full-page registration form, you can use this template’s default design. The latest web development frameworks, such as Bootstrap, HTML5, and CSS3, are used in this template, so customizations will also be easier.
Colorlib Reg Form v14
The V14 gives you a two-part registration form design. Asking too much information all at once will make your audience uncomfortable. Some developers use bootstrap wizard-style design, but if you want a simple design, the two-part registration form design like this will be a good choice. The creator has grouped the basic information into one group and the additional information into another part. You can mark the important fields as mandatory and can add field validation if you want. A calendar input option and the basic registration form elements are also given to make the interaction easier.
Colorlib Reg Form v6
The V6 is a unique registration form design. This form template is made for job registration, so the elements and form fields on this form are a bit different from other Bootstrap registration form examples in this list. Smooth floating animations are used to neatly highlight the selected form field. An option to upload a resume is also given in this template. Speaking of resumes, take a look at our bootstrap resume templates to create an effective online resume. If you are looking for a neat and professional-looking job registration form for your website, this is the best option for you.
Reg Form v1
The Reg Form v1 follows a simple and versatile registration form design. The usual uncluttered look of the registration form makes it easy to fit in any part of the website. To make the data input easier, the developer has given you drop-down options and calendar input options. Regarding the calendar, if you are looking for modern clock designs and clock widgets, look at our HTML clock design collection. The flat style design with a subtle, sleek animation effect makes this form load easier and lets you add this to any part of the website.
Colorlib Reg Form v4
You get a practically applicable registration form in this Bootstrap registration form example. With a simple design and useful form fields, this template will help you set up a proper registration form quickly. Radio buttons and calendar entry options are given to make the interactions easier with this template. If you like to give a personalized touch to the template, look at our bootstrap radio buttons collection. Since this registration form template uses the latest Bootstrap, it can handle all modern animations and design elements.
Reg Form v21
The Reg Form v21 gives you a handy, easy-to-use event registration form. Making the event registration forms as simple as possible will increase the chances of conversions. In this form, you can see the ticket pricing, pick the number of tickets, provide the details, and move on to the payment page. Users can easily register their tickets without spending much time. The creator has wisely utilized the image space to showcase the event’s center of attraction and its address. Since everything is perfect in this Bootstrap registration form, you can use it directly on your website or applications.
Reg Form v25
By default, this one is a hotel room registration form. The creator has populated this form with all the necessary fields, allowing users to quickly book their rooms. For example, you get calendar date-picking options and dropdown options for the number of people. All elements work smoothly from the front-end side, plus it is a mobile-responsive form. Hence, developers can fully focus on backend work without any worries. Like most other Bootstrap registration forms in this list, this one also runs on the latest Bootstrap version. Adding the latest features and tools to this form will be a lot easier for developers.
Reg Form v29
This one is also a ticket registration form. Image carousels on this form make it unique from other forms. Since it is a ticket booking form, you can use the carousel to show the related images of the event or the show. Using different colors for the pricing font is a wise design touch — users can see the pricing before they proceed to pay. You can choose the type of tickets in this form, but the pricing doesn’t change as per the ticket type you pick. There are a few minor logical things you have to fix in this form template before taking it to your website or application. Since this template uses the latest web development frameworks, developers can easily work with this form template.
Reg Form v36
One of the biggest challenges in designing a registration form is collecting information from the user without being intrusive. In this form, the creator has neatly organized the form fields so the user will know the information you are asking for. Dropdown form fields will help users fill out this lengthy form quickly. All elements work smoothly from the front-end side. If you want, you can adjust the form fields a little and add the custom elements you want on the form. This template’s code script is direct; hence, developers can work with this form easily.
Reg Form v30
In this split-screen registration form, the creator has used the space to add info on one side and the form on the other. Form field validations work out of the box, which will save you some time. The error messages are made bigger and brighter so that the user can easily find the form field with the wrong details. The animations on this form are subtle and sensible, which will deliver a better user experience.
Colorlib Reg Form v8
The V8 registration form is designed for business and corporate websites. On the clean white layout, the elements and texts are visible. The creator has used neat and easy-to-read fonts in this form template, so your users can clearly see the content they are adding. You get the entire code script used to make this design in the download file. If you use different fonts on your website, you can easily edit the code and add the font you want. In the password form field, you get the show/hide option to let the user clearly see their password.
Colorlib Reg Form v9
If you are looking for Bootstrap registration form examples to use on your gaming website, this form template will impress you. In the default design, the creator has given you space to add images on one side and the form on the other side. You can update the image with the gaming image you like. To show the texts clearly on the image background area, the creator has used a color overlay. Shadow and depth effects are used smartly to differentiate the important web elements from the background. Call to action buttons are placed at the bottom of the form to let the user easily signup and also to jump to the login page.
Colorlib Reg Form v12
In this bootstrap registration form example, we get a long registration form. Forms like this will be a good option for applications, user registration, and online service providing websites because the better you know the user, the better you can serve them. The creator has used smooth and gentle animation effects to present the content clearly to the audience. In the demo, the creator has used an image background, if you don’t want, you can simply use the form template alone. The only thing you need to change in this template is the font size. Compared to other bootstrap forms in this list, the font in this template is a little small to read; apart from that, everything works perfectly from the front-end.
Colorlib Reg Form v18
This is another form template with an image background. Form fields with rounded edges give a trendy look to the template. The creator has used bright colors to indicate which form field the user has chosen. To let you easily customize this template, the creator has kept the code script really simple and neat. All the basic optimizations are done in this template, so you can concentrate on the customization and integration part alone. If you are making a registration form for a fashion website or an online apparel store, then you can use this template.
Reg Form v2
The creator of this form has used a split-screen style design to let you add a corresponding image on one side. Letters are made bolder and bigger for better readability. Since both the V1 registration form and the V2 registration form are from the same creator, you get the same design and code quality. The coding of the template is kept simple so that you can easily customize and use it on your website or application. The default form is made wider so that you can enter longer texts easily. Along with regular text boxes, you also get drop-down boxes and calendar entry boxes to make data entry easier.
Reg Form v7
Reg Form v7 is a trendy looking registration form. Many startups and new brands are using illustrative design with vector characters to provide an immersive experience for users. If you are also planning to use custom-made vectors for your website, this registration form will impress you. On the clean white form design, the texts and the animation effects are clearly visible. Since this template uses the latest HTML5 and CSS3 framework, you can add animation to the vectors to give a lively registration form. For more interactive animation inspirations, take a look at our threejs animation examples. Another advantage of this form is that you get a login form along with the signup form.
Reg Form v3
Reg Form v3 is a dark theme Bootstrap registration form example. Dark themes and dark modes are widely preferred by current users. If you are also adopting a dark theme in your website or application, this form design will be a perfect fit. In this form, the designer has also followed a split-screen style design. You can use a corresponding image on the left and the form on the right. The form is fully functional from the front-end, all the elements from drop-down text input lines to calendar inputs, everything works perfectly. All you have to do is to integrate the form with your registration system.
Reg Form v5
Reg Form v5 is a proper event registration form. Since this form is designed exclusively for event registration, you get all the necessary elements. For example, you get radio buttons, drop-down options, and regular text boxes. You can add as many form fields as you want; the developer has made this Bootstrap form flexible enough for future updates. If you like to spice up your design, get inspiration from our CSS radio button collections. Unique designs and animation effects are used to make the radio buttons different from the usual designs.
Reg Form v11
Making a registration form for a service-oriented business website is a lot different from other commercial websites. If you are making a registration form for a restaurant, hotel, or travel agency website, this form will be a good choice. This form not only lets the user book a room or travel package but also lets the user easily search and find the best package for them. The developer has given you a calendar entry field and drop-down options. To make this registration form even more interactive, use a step-by-step wizard-style design. The creator has kept the code structure really simple for adding the extra features as per your demands.
Reg Form v13
Reg Form v13 is a polished version of the form V11 mentioned above. In this design example, the developer has given you all the form fields and options to make an interactive form. A split screen style design is followed in this form. Since it is designed for a restaurant website, the image space is utilized to showcase the restaurant’s features. You get all the relevant options like picking date and time, type of food you like, and the number of persons. Smooth animation effects are used to give a better user experience. If you are using this form for a restaurant or hotel website, you can add your hotel’s helpline number to let the user confirm their registration.
Reg Form v20
Reg Form v20 is a minimal and stylish-looking sign-up form. The simple design and precise size make this form a better option for applications and websites. If you are looking for a modern registration form for a salon and fashion website, this would be perfect. You can use this form in your fashion or online store website. By making a few customizations to the design, you can give a unique look to the form. Small round buttons indicate the form field selected by the user. You can add a link to the login form near the signup call-to-action buttons, which is a thoughtful design.
Reg Form v22
The default design of the Reg Form v22 makes it a perfect option for a fitness website. If you wish to use this form for other types of websites, all you have to do is to change the images. Regarding the design of the form, it features a clean and practical design. Since this bootstrap registration form is treated as an appointment booking form, the creator has given you a regular text box. The user can provide a brief note about the problem or the reason for booking an appointment. A small image holder is given at the corner of the form. If you are a personal fitness trainer, then you can add your image in the image holder.
Reg Form v24
If you are looking for a registration form to use in your kids’ school or fashion website, the Reg Form v24 will be a good choice. The form is colorful and has groovy fonts, which will attract the kids. Below the form, you have social media icons to link to your profile. For demo purposes, the creator has used a big image on the left, but you can use the form alone if you want. The creator has provided a large error message box to inform users about the error. Since this form is designed for the kids’ school website, the big error message box is a thoughtful addition.
Reg Form v26
Reg Form v26 is another trendy-looking, vector design-rich registration form. If you are making a registration form for a startup website or a website usingan illustrative design, this form will be a good choice. Companies are using modern web design to relate to their audience easily. In this bootstrap registration form example, you can see that the designer has created an environment. The design concept is simple yet effective; you can take this design and use your vectors to make it unique. Icons and form field labels are used smartly to let the user know what detail to add in a particular form field.
Reg Form v27
In Reg Form 11, we have mentioned that smart marketers and designers use wizard-like design to get long information without annoying users. In the Reg Form v27, the designer has followed the same wizard design. At each stage, you can provide relevant information and simplify the process for users. The default design is made for financial websites, but you can also use this design for other purposes. All the steps are given on the left side so that the user can easily switch between the tab they like and can edit the information easily.
Reg Form v28
Another smart design used by top brands and marketers is mentioning what the user gets from their service or products. In this bootstrap registration form design example, you can see that the designer has used the left image space to mention the benefit of their service. Since this is a subscription form, the creator has thoughtfully given a check to accept the terms and conditions. If your service is new in the market and using aggressive pricing, a design like this will improve your subscription rate. Another smart thing about this form design is that all the design and promotional elements are kept on the left side, and the form is untouched. The user can see the details they enter.
Reg Form v34
Reg Form v34 is a smart Bootstrap registration form widget with a sign-in option. The sign-in and sign-up options are presented in tabs, making it easy for the user to navigate and use the option they want. The dark color theme makes the texts visible and easy to read. Sleek and smooth animation effects indicate the form field the user selects.
Reg Form v17
Reg Form v17 is designed for online apparel stores. The creator has utilized image space to effectively showcase some of their new collections, curating the user experience. You can use the static image holder or image sliders to show some of your collections. On the clean white background, the pitch-black texts have better legibility and are easy to read, even on small-screen devices. The wider form design gives enough space to add long text. Subtle animation effects like bouncing arrows give the form a lively look.
