How to build a Responsive Contact Form using Bootstrap 5

[@Jpk45]

Thanks a lot I was having a problem understanding the 12 Column design now my knowledge in these area is solidified

[@Jpk45]

I was working on a vue application and the knowledge helped a lot

[@HappyFalco]

And this is the Content!

[@theengineergaming5383]

Very well explained Sir!You cleared all the doubts smoothly

[@SuperMBARutgers2013]

great tip on text area and spacing

[@alejandrarazo7266]

Thank you this was very helpful & easy to follow!! 😃

[@ADesignerWhoCodes]

Stoked! You are very welcome Alejandra.

[@Habitoprofissional]

thank you, helped me very!

[@MarkGoldfain]

Nice tutorial. . . . and Ricky, don't lose that number.

[@ADesignerWhoCodes]

Haha! Exactly.

[@BrannonSG]

Excellent tutorial. And thanks for providing the source code as well.

[@The_Oussama_1]

thank you so much !

[@Azamkhan-iv5es]

Really awesome it helps me a lot in my ist bootstrap project. keep it up, sir...😍😍😍😍😍

[@ADesignerWhoCodes]

Stoked. You are so welcome.

[@washingtonlgois]

Amazing! Thank you! 😃

[@tGoldenPhoenix]

Thank you.

[@jrdicoll]

Great video just looking for something like this!

[@ADesignerWhoCodes]

Stoked!

[@balazsdomokos5859]

Thanks, you saved my life :DD

[@ADesignerWhoCodes]

So welcome! I've been there.

[@AhmadAsifArifeen]

thank you so much

[@dularakavindu1743]

thank you so much 🥰

[@diraneserges6076]

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?

[@ADesignerWhoCodes]

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/

[@oikikku]

Thank You!

[@toma1610]

Question: Where is declared the class “.NEEDS-VALIDAITON”, please? In the Bootstrap.css? Somewhere in the Bootstrap.js?

[@AnaMaria-ul9qk]

Thank you very much!!

[@ADesignerWhoCodes]

You are so welcome!

[@toma1610]

I was looking for something using the fieldset tag, within Bootstrap 5.

[@jozefkrivan3522]

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

[@ADesignerWhoCodes]

Here's essentially part 2: kzbin.info/www/bejne/j5iZgYJ6ZbJmZtk It walks you through how to connect your form up so you can receive emails.

[@ministryofanti-feminism1493]

In order ensure that he layout if good for desktop screens, would it be necessary to use media queries?

[@ADesignerWhoCodes]

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

[@ministryofanti-feminism1493]

@@ADesignerWhoCodes Thank ye, kind sire.

[@이집사-j1r]

Thank you!! 고마워요^^

[@ADesignerWhoCodes]

welcome!

[@bosar18]

doesnt work use regex please i need to know how because like you cant use a @ in a name]

[@codyhowry]

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?

[@ADesignerWhoCodes]

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: kzbin.info/www/bejne/q5O5mXybi7WqnLM I agree it would look dumb to add the date on it's own line, too.

[@cruzinsweetsntreats]

*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

[@cruzinsweetsntreats]

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()*

[@Bøølæn]

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

[@ADesignerWhoCodes]

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/

[@kenthefley2226]

Do you know of a way to add a mask to the phone number field without bringing in jQuery?

[@ADesignerWhoCodes]

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.

[@kenthefley2226]

@@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.

[@ahmedabdallah8781]

thaaaaaaaaanks

[@ADesignerWhoCodes]

Welcome!

[@diraneserges6076]

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

[@syediqbalahmed3176]

*_good ... ok ..._*

[@yassineserghini1645]

Thank you very much!!

[@ADesignerWhoCodes]

You're welcome!