EuroCMS Form generator

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<div class="top container">
  <!-- select tag
 {
  name: 'country',
  label: 'Country',
  type: 'select',
  options: [
    { value: 'us', label: 'United States' },
    { value: 'ca', label: 'Canada' },
    { value: 'mx', label: 'Mexico' }
  ],
  required: true
} -->

  <div class="form-container" id="formContainer">
    <h1 class="text-center">Request Quotation</h1>
    <progress id="file" value="72" max="100"> 32% </progress>

  </div>
</div>

CSS

html,
body {
  color: #454545;
}

.top.container {
  margin-top: 5%;
}

.text-center {
  text-align: center;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="submit"] {
  width: 100%;
  background: #F9F9F9;
}

progress {
  width: 100%;
  color: #454545;
  background-color: #EEEEEE;
  border: 1px soid #CCCCCC;
  border-radius: 5px;
}

.info-message {
  padding: 10px 5px;
}

.btn {
  width: 100%;
}

textarea {
  min-width: 100%;
  width: 100%;
  max-width: 100%;
background: #F9F9F9;
  min-height: 250px;
  height: auto;
  max-height: 450px;
}

JavaScript

// Function to generate the form dynamically
function generateForm(config) {
  const form = document.createElement('form');

  // Set form attributes (action, method, etc.)
  for (let attr in config.formAttributes) {
    form.setAttribute(attr, config.formAttributes[attr]);
  }

  // Loop through fields and create input elements
  config.fields.forEach((field) => {
    const label = document.createElement('label');
    label.setAttribute('for', field.name);
    label.textContent = field.label;

    const input = document.createElement(
      field.type === 'textarea' ? 'textarea' : 'input',
    );

    // Set common attributes for all inputs
    input.setAttribute('name', field.name);
    input.setAttribute('id', field.name);
    input.setAttribute('placeholder', field.placeholder || '');
    input.setAttribute('type', field.type || 'text');
    if (field.required) input.setAttribute('required', 'required');
    if (field.minLength) input.setAttribute('minlength', field.minLength);
    if (field.maxLength) input.setAttribute('maxlength', field.maxLength);
    if (field.pattern) input.setAttribute('pattern', field.pattern);
    if (field.value) input.value = field.value;

    // Add extra attributes for specific input types (e.g., email, checkbox)
    if (field.type === 'email') {
      input.setAttribute('type', 'email');
    } else if (field.type === 'checkbox') {
      input.setAttribute('type', 'checkbox');
      if (field.checked) input.setAttribute('checked', 'checked');
    }  else if (field.type === 'select') {
      input.setAttribute('name', 'select');
      if (field.checked) input.setAttribute('checked', 'checked');
    } else if (field.type === 'radio') {
      input.setAttribute('type', 'radio');
      input.setAttribute('name', field.name); // Group radio buttons
      if (field.checked) input.setAttribute('checked', 'checked');
    }

    // Add input to the form
    form.appendChild(label);
   ...