→ zobaidul kaziex
→ HTML, CSS, and Bootstrap. This approach ...

HTML, CSS, and Bootstrap. This approach will be purely HTML and CSS without any JavaScript.

HTML:
Bootstrap Integration: Linked to Bootstrap CDN for styling.
Form Structure: Contains input fields for name, email, and message, all within a card component.

CSS:
Background Gradient: Applied to the body for a visually appealing background.
Card Styling: Rounded corners and padding for the card.
Button Styling: Custom colors for the submit button, including hover effects.

How to Use:

Create an index.html file and copy the above code into it.
Open the HTML file in your web browser to view the Contact Us form.

This bootstrap css example is contributed by zobaidul kaziex, on 05-Sep-2024. Component is made with bootstrap css v.4.6. It is responsive. similar terms for this example are Get in touch, Contact form

Tags: Form Contact us Input

Author zobaidul kaziex

985

v.4.6

Fork Fullscreen

<div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-8 col-sm-12">
                <div class="card shadow-lg">
                    <div class="card-body">
                        <h3 class="card-title text-center mb-4">Contact Us</h3>
                        <form>
                            <div class="mb-3">
                                <label for="name" class="form-label">Name</label>
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    id="name" 
                                    placeholder="Enter your name" 
                                    required 
                                />
                            </div>
                            <div class="mb-3">
                                <label for="email" class="form-label">Email address</label>
                                <input 
                                    type="email" 
                                    class="form-control" 
                                    id="email" 
                                    placeholder="Enter your email" 
                                    required 
                                />
                            </div>
                            <div class="mb-3">
                                <label for="message" class="form-label">Message</label>
                                <textarea 
                                    class="form-control" 
                                    id="message" 
                                    rows="4" 
                                    placeholder="Write your message here"
                                    required
                                ></textarea>
                            </div>
                            <div class="text-center">
                                <button type="submit" class="btn btn-primary btn-lg">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

More Examples

HTML and Bootstrap for Registration Form
HTML: Personal Information Section: Includes fields for full name, email, date of birth, bio, and profile image. Company Information Section: Includes fields for company name, company size (using a dropdown), and location. Submit Button: A button to submit the form. CSS: Background Gradient: Applied to the body. Card Styling: Styled with rounded corners and padding. Button Styling: Custom colors for the submit button. Validation Styling: Highlight invalid fields and display error messages. JavaScript: Validation Logic: Checks if required fields are filled and updates the feedback area with error or success messages. Dynamic Feedback: Updates the form with success or error messages based on validation.

Author:
zobaidul kaziex

7 months ago

4.1k

v.4.6
Contact us form

Author:
Anonymous

1 year ago

4.8k

v.4.6
Contact Us Page with Google Maps and Form Validation
HTML: Form Fields: Includes fields for name, email, and message. Google Map: A div with an id of map where the Google Map will be displayed. Feedback Elements: <div> elements for displaying validation messages and success messages. CSS: Styling: Adds padding for the contact section, sets the map height, and styles feedback and success messages. JavaScript: Google Maps Initialization: Uses the Google Maps JavaScript API to create and display a map centered at specified coordinates. Replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key. Form Validation: Validates the input fields and displays appropriate messages if the input is invalid or missing. How to Use: Replace API Key: Insert your Google Maps API key in the script tag for Google Maps. Customize Coordinates: Update the latitude and longitude in the initMap function to reflect your actual location. Validation Rules: Customize validation logic as needed for your form requirements.

Author:
zobaidul kaziex

7 months ago

4.5k

v.4.6
Form Wave
Form Wave

Author:
Rami AlAjo

1 month ago

257

v.4.6
Password Reset Form
Multi-step password reset form with email verification, code validation, and password strength meter built with Bootstrap 5.3.

Author:
Isaac Winslow

5 months ago

2.2k

v.4.6
Contact us section with Image

Author:
Anonymous

9 months ago

5k

v.4.6
User Settings Form
form with following sections - Personal Information - Profile Picture - Email Preferences - Account Settings - Change Password - Privacy Settings

Author:
Juniper

6 months ago

2.6k

v.5.3
Contact card
Company contact card with email, contact number, and social links

Author:
Mateo Rojas

4 months ago

2.9k

v.5.3
Contact Us form

Author:
Anonymous

1 year ago

4.8k

v.4.6
Simple Login form

Author:
Prajwal Hallale

1 year ago

4.9k

v.5.3
Contact Us form

Author:
Omar Khaled

7 months ago

4.5k

v.5.3
Contact us form with map

Author:
karia

1 year ago

8.2k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent