How to build a Responsive Contact Form using Bootstrap 5
HTML-код
- Опубликовано: 2 июн 2024
- Bootstrap 5 makes building a contact form a breeze. I'll show you how to can easily build a responsive form using all of the tools bootstrap 5 provides. In addition, I'll show you how to make specific fields required vs optional as well as setting placeholder text (like I do with the phone field).
Purchase & download the source code:
buy.stripe.com/bIYbM42Ab17X2r...
Table of Contents:
00:00 What this video is about
01:02 Setting up 2 columns
02:42 First and Last Name fields
05:02 Adding Email and Phone fields
09:10 Adding a comments section (textarea)
11:38 The submit button
14:02 The power of the Container
Thanks!
Haydn
- - - - - -
⤵ Download ALL of my source codes & more!
Introducing ADWC PRO
pro.adesignerwhocodes.com
ADWC Pro provides you with:
• Access to all the source codes for ALL projects
• Bootstrap Bootstrap online course (retail $79) w/ supplied source code
• All future online courses (Gatsby v5 course coming soon)
• Updates of ADWC and the web dev business
• and more!
Price:
Just $6/mo. or $49/year (32% off monthly)
-------
Got a question for me?
adesignerwhocodes.com/contact/
Excellent tutorial. And thanks for providing the source code as well.
Very well explained Sir!You cleared all the doubts smoothly
great tip on text area and spacing
Amazing! Thank you! 😃
Thank you this was very helpful & easy to follow!! 😃
Stoked! You are very welcome Alejandra.
Thanks a lot I was having a problem understanding the 12 Column design now my knowledge in these area is solidified
I was working on a vue application and the knowledge helped a lot
thank you so much !
Great video just looking for something like this!
Stoked!
Thank You!
thank you so much 🥰
Thank you very much!!
You are so welcome!
And this is the Content!
thank you so much
Thanks, you saved my life :DD
So welcome! I've been there.
Question: Where is declared the class “.NEEDS-VALIDAITON”, please? In the Bootstrap.css? Somewhere in the Bootstrap.js?
Really awesome it helps me a lot in my ist bootstrap project.
keep it up, sir...😍😍😍😍😍
Stoked. You are so welcome.
Thank you.
Thank you!! 고마워요^^
welcome!
I was looking for something using the fieldset tag, within Bootstrap 5.
Great
So far I still have some difficulties to assimilate the responsive. You just created a login form but you just used col-md and I don't understand why you didn't define col-lg as well as col-sm
For me I would define as follows:
for a line having the name and the first name
Name
First name
Does this correspond to responsive design?
Bootstrap is mobile first. So I by default it is mobile (xs) first. So anything at md or higher does what I want it to do. The size below sm is mobile or xs in a previous iteration. React-bootstrap still uses the xs: react-bootstrap.github.io/layout/grid/
Hi there,
Maybe my question about "Responsive Contact Form using Bootstrap 5" will be looking like very basic... Please should you explain me one thing:
- when built and make submit where will be go? there is not email to be sent to, right?
- How I can collect what user sent to me using this form?
I like to hear from you, many thanks in advance! Jozef
Here's essentially part 2:
ruclips.net/video/Yg6POD0M30w/видео.html
It walks you through how to connect your form up so you can receive emails.
Nice tutorial. . . . and Ricky, don't lose that number.
Haha! Exactly.
If I would want say the date on the first line by itself how would i do that? It would look dumb to use a full row just for the date. How can you skip to the next line?
Bootstrap works off of a 12-column design. So in theory you could add a longer form next to the date. Say the date is 3 cols and maybe an email is 9. Here's a video on the grid if you're curious: ruclips.net/video/ubVhIeVPwfQ/видео.html
I agree it would look dumb to add the date on it's own line, too.
thaaaaaaaaanks
Welcome!
In order ensure that he layout if good for desktop screens, would it be necessary to use media queries?
If your design goes past the mobile size, maybe. I’d have to look at my code, but I believe it is built ready for mobile by default.
Don’t forget that bootstrap has mobile, desktop, tablet sizes built in
@@ADesignerWhoCodes Thank ye, kind sire.
can you please tell how to get the data from the form cause.. if we want to get this work... we need api token and for that we have to buy their premium plan
so can you tell me how to ge that for free of alternative method to get this working
Sure. I love using Netlify Forms. Here's the details in the mean time before I make a video on how to use it: docs.netlify.com/forms/setup/
Do you know of a way to add a mask to the phone number field without bringing in jQuery?
Hmmm. I've largely left the phone number fairly empty as so many countries have different phone number setups. I'll have to look around and see what I can see.
@@ADesignerWhoCodesIt might be a good video. There has to be a vanilla js solution or free service somewhere. It does make more sense for non international sites.
*_good ... ok ..._*
doesnt work use regex please i need to know how because like you cant use a @ in a name]
*required* notices pop up on desktop, but on direct mobile, the notice doesn't show up. So need to put a different method in place for mobile contact requests. 06/07/2023 0202 PT
Update: 6/12/23 1830
What I did over the weekend, was to put the common visual of the asterisk at the beginning of the placeholder value, that generally references to an entry being required. placeholder="*First Name"
On a calculated form, with auto response answers, I learned to add *disabled* to the input, and it locks out entry. I have it show the base rate in one field, then the calculation of total cost in another, as the mileage is entered, via *onkeyup()*
Well here is how I will define my responsive design and I would like to know if it works in this case
Email address
Password
Submit
Thank you very much!!
You're welcome!