How to build a Responsive Contact Form using Bootstrap 5

Поделиться
HTML-код
  • Опубликовано: 22 янв 2025

Комментарии • 52

  • @Jpk45
    @Jpk45 2 года назад +1

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

    • @Jpk45
      @Jpk45 2 года назад +1

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

  • @theengineergaming5383
    @theengineergaming5383 Год назад

    Very well explained Sir!You cleared all the doubts smoothly

  • @alejandrarazo7266
    @alejandrarazo7266 2 года назад +4

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

  • @HappyFalco
    @HappyFalco Год назад

    And this is the Content!

  • @BrannonSG
    @BrannonSG 2 года назад

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

  • @SuperMBARutgers2013
    @SuperMBARutgers2013 2 года назад

    great tip on text area and spacing

  • @Azamkhan-iv5es
    @Azamkhan-iv5es 2 года назад

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

  • @Habitoprofissional
    @Habitoprofissional 7 месяцев назад

    thank you, helped me very!

  • @ministryofanti-feminism1493
    @ministryofanti-feminism1493 2 года назад

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

    • @ADesignerWhoCodes
      @ADesignerWhoCodes  2 года назад

      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
      @ministryofanti-feminism1493 2 года назад

      @@ADesignerWhoCodes Thank ye, kind sire.

  • @toma1610
    @toma1610 2 года назад

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

  • @jrdicoll
    @jrdicoll 2 года назад

    Great video just looking for something like this!

  • @MarkGoldfain
    @MarkGoldfain 2 года назад

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

  • @washingtonlgois
    @washingtonlgois Год назад

    Amazing! Thank you! 😃

  • @The_Oussama_1
    @The_Oussama_1 10 месяцев назад

    thank you so much !

  • @balazsdomokos5859
    @balazsdomokos5859 2 года назад

    Thanks, you saved my life :DD

  • @bosar18
    @bosar18 2 года назад

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

  • @toma1610
    @toma1610 2 года назад

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

  • @cruzinsweetsntreats
    @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
      @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()*

  • @diraneserges6076
    @diraneserges6076 2 года назад +1

    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
      @ADesignerWhoCodes  2 года назад +1

      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/

  • @Bøølæn
    @Bøølæn 3 года назад

    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
      @ADesignerWhoCodes  3 года назад

      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/

  • @jozefkrivan3522
    @jozefkrivan3522 2 года назад +2

    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
      @ADesignerWhoCodes  2 года назад +1

      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.

  • @codyhowry
    @codyhowry 3 года назад

    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
      @ADesignerWhoCodes  3 года назад

      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.

  • @dularakavindu1743
    @dularakavindu1743 2 года назад

    thank you so much 🥰

  • @tGoldenPhoenix
    @tGoldenPhoenix Год назад

    Thank you.

  • @oikikku
    @oikikku 3 года назад

    Thank You!

  • @AnaMaria-ul9qk
    @AnaMaria-ul9qk 3 года назад

    Thank you very much!!

  • @AhmadAsifArifeen
    @AhmadAsifArifeen 2 года назад

    thank you so much

  • @kenthefley2226
    @kenthefley2226 3 года назад

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

    • @ADesignerWhoCodes
      @ADesignerWhoCodes  3 года назад +1

      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
      @kenthefley2226 3 года назад

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

  • @이집사-j1r
    @이집사-j1r 3 года назад

    Thank you!! 고마워요^^

  • @ahmedabdallah8781
    @ahmedabdallah8781 3 года назад

    thaaaaaaaaanks

  • @diraneserges6076
    @diraneserges6076 2 года назад

    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
    @syediqbalahmed3176 3 года назад

    *_good ... ok ..._*

  • @yassineserghini1645
    @yassineserghini1645 2 года назад

    Thank you very much!!