Click on a button and add new form using bootstrap

Here is an example of how you can add a new form using Bootstrap when a button is clicked:

HTML:

<!-- The button to add a new form -->
<button id="add-form-btn" class="btn btn-primary">Add New Form</button>

<!-- The container to hold the new form -->
<div id="new-form-container"></div>

JavaScript:

// Get the button and container elements
const addButton = document.getElementById('add-form-btn');
const newFormContainer = document.getElementById('new-form-container');

// Add an event listener to the button
addButton.addEventListener('click', () => {
  // Create a new form element
  const newForm = document.createElement('form');
  newForm.className = 'form-horizontal';

  // Add form fields to the new form
  const formFields = [
    { label: 'Name', type: 'text', name: 'name' },
    { label: 'Email', type: 'email', name: 'email' },
    { label: 'Message', type: 'textarea', name: 'message' }
  ];
  formFields.forEach((field) => {
    const label = document.createElement('label');
    label.textContent = field.label;
    label.htmlFor = field.name;

    const input = document.createElement('input');
    input.type = field.type;
    input.name = field.name;

    newForm.appendChild(label);
    newForm.appendChild(input);
    newForm.appendChild(document.createElement('br'));
  });

  // Add the new form to the container
  newFormContainer.appendChild(newForm);
});

CSS:

#new-form-container {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-horizontal {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-horizontal label {
  display: block;
  margin-bottom: 10px;
}

.form-horizontal input[type="text"],
.form-horizontal input[type="email"],
.form-horizontal textarea {
  width: 100%;
  height: 30px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

This code creates a button that, when clicked, adds a new form to the page. The form has three fields: name, email, and message. The form is styled using Bootstrap classes.

You can customize the form fields and styling to fit your needs.

Note: This code uses vanilla JavaScript and Bootstrap CSS. If you're using a framework like React or Angular, you may need to modify the code accordingly.