An open API service indexing awesome lists of open source software.

https://github.com/full-stack-web-developer-and-designer/bootstrapform

Contact Form created using Bootstrap 3
https://github.com/full-stack-web-developer-and-designer/bootstrapform

bootstrap bootstrap3 css forms mirnesglamocic

Last synced: 2 months ago
JSON representation

Contact Form created using Bootstrap 3

Awesome Lists containing this project

README

          

# Bootstrap Contact Form

A clean and responsive **contact form** built with **Bootstrap** β€” perfect for collecting user details, messages, and preferences.
Live demo available here: https://full-stack-web-developer-and-designer.github.io/BootstrapForm/

---

## πŸš€ About The Project

This project showcases a fully styled contact form using Bootstrap’s UI components and form validation patterns.
It collects basic user information such as name, email address, select list choices, checkboxes, and comments β€” ideal for landing pages or portfolio sites.

πŸ’‘ Built as a front-end UI demo without backend processing.

---

## πŸ› οΈ Built With

The following technologies were used to create this project:

- **HTML5**
- **Bootstrap 3** (CSS framework for responsive design)
- **CSS** (Custom CSS)

---

## πŸ“‹ Features

- Responsive layout that adapts to all screen sizes
- Validated form fields (e.g., email, text)
- Select dropdown and checkbox inputs
- Styled submit button
- Clean, minimal design ready for integration

---

## πŸ“₯ Live Demo

You can try the working form directly here:
πŸ‘‰ https://full-stack-web-developer-and-designer.github.io/BootstrapForm/

---

### πŸ“· Screenshot

[![Mockup of project Bootstrap Contact Form by professional web developer and designer Mirnes GlamočiΔ‡](/screenshot.png)](https://full-stack-web-developer-and-designer.github.io/BootstrapForm)

---

## πŸ”§ Getting Started

To run this project locally:

### Prerequisites

You’ll need a modern web browser.

### Clone the Repository

```bash
git clone https://github.com/full-stack-web-developer-and-designer/BootstrapForm.git
```

### Open in Browser

Simply navigate to the project folder and open:

```diff
index.html
```

(or double-click the file to launch in your default browser)

---

### πŸ“Œ Usage

Use this template as a starting point for:

- Portfolio contact pages

- Landing page lead capture

- Form UI prototyping

You can connect the form to your backend or services like Formspree, Google Sheets, or custom APIs.

---

### πŸ“‚ Project Structure

```graphql
BootstrapForm/
│── index.html # Main page containing Bootstrap Contact Form
|
│── css/
| │── bootstrap.min.css # Bootstrap CSS
| └── style.css # Custom CSS
|
|── fonts/* # glyphicons fonts
|
│── js/
| │── bootstrap.min.js # Bootstrap JS
| └── jquery-2.1.4.min.js # jQuery
|
│── LICENSE # MIT LICENSE
|
│── README.md # This documentation file
|
└── screenshot.png # screenshot
```
---

### 🀝 Contributing

Contributions are welcome! Here’s how you can help:

1. Fork the repository

2. Create your feature branch:
```git
git checkout -b feature/YourFeature
```
3. Commit your changes:
```git
git commit -m "Add some feature"
```
4. Push to your branch:
```git
git push origin feature/YourFeature
```
5. Open a Pull Request

Feel free to open issues for bugs or ideas too!

---

### πŸ“„ License

This project is open source and available under the MIT License.
See the LICENSE file for details.

---

### πŸ‘€ Author

#### Mirnes GlamočiΔ‡
🌐 https://mirnesglamocic.com

πŸ“§ Contact available on the website

---

### ⭐ Acknowledgments

Thank you for trying Bootstrap Contact Form!

Feel free to send suggestions or improvements.

---

### ⭐ If you find this project helpful, please give it a star!