Bootstrap 5 Contact Form Code Snippet

Quick Links :

Building a contact form is a crucial step in creating a website that encourages user engagement and feedback. Bootstrap 5, being one of the most popular front-end frameworks, simplifies the process of designing responsive and visually appealing forms. Below is a comprehensive example of a Bootstrap 5 contact form code snippet. This snippet includes essential form elements such as name, email, subject, and message, along with a submit button.

Bootstrap 5 Contact Form

  


Basic Contact Form Structure

To create a contact form in Bootstrap 5, you will need to use the form classes provided by Bootstrap. Here's a basic structure:

```html

  

Contact Form with Bootstrap 5 Classes

Bootstrap 5 Contact Form Example

  


```html

  

    First name
    
    

      Looks good!
    
  
  

    Last name
    
    

      Looks good!
    
  
  

    Email
    

      @
      
      

        Please choose a username.
      
    
  
  

    Subject
    
    

      Please provide a valid subject.
    
  
  

    Message
    
    

      Please enter a message.
    
  
  

    Submit form
  

Validation and Feedback

Bootstrap 5 provides a simple way to add validation and feedback to your form inputs. You can add the .is-valid and .is-invalid classes to the form control to show validation feedback.

Form Validation in Bootstrap 5

  


### Custom Validation Feedback

To show custom validation feedback, you can use JavaScript to handle the form submission and check the form inputs. Here's an example:

```javascript
// Example starter JavaScript for disabling form submission on Enter keypress
(function () {
  'use strict'
  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.querySelectorAll('.needs-validation')
  // Loop over them and prevent submission
  Array.prototype.slice.call(forms)
   .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }
        form.classList.add('was-validated')
      }, false)
    })
})()

This JavaScript code will prevent the form from submitting when the inputs are not valid and add a .was-validated class to the form.

Advanced Contact Form Example

For a more advanced contact form, you might want to include additional fields like phone numbers, file uploads, or even a CAPTCHA for spam protection.

Advanced Bootstrap 5 Contact Form

  


### Example

```html

  
  

    Phone Number
    
    

      Please provide a valid phone number.
    
  
  

    Upload File
    
    

      Please select a file to upload.
    
  
  

This is just a basic example, and you can customize the form to fit your specific needs. You might also want to look into using libraries like reCAPTCHA for more advanced spam protection.