<!DOCTYPE html>
<html>
<head>
  <title>URL Builder</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>

 <style>
  .form-side-margin {
    margin: 0 40px;
  }
  .button-spacing {
    margin-top: 40px;
  }
</style>
  
<form id="url-form" class="my-5 form-side-margin">
    <label for="base-url">URL base:</label>
    <input type="text" id="base-url" class="form-control" required>
    <label for="source">Fuente:</label>
    <input type="text" id="source" class="form-control" required>
    <label for="medium">Medio:</label>
    <input type="text" id="medium" class="form-control" required>
    <label for="campaign">Campaña:</label>
    <input type="text" id="campaign" class="form-control" required>
 <button type="submit" class="btn btn-primary button-spacing">Crear URL</button>
</form>
  
  </form>
  <div id="output" class="alert alert-primary"></div>
  <script>
    // Obtén una referencia al formulario y al elemento de salida
    const form = document.getElementById('url-form');
    const output = document.getElementById('output');

    // Añade un manejador de envío al formulario
    form.addEventListener('submit', e => {
      // Previene que la página se recargue
      e.preventDefault();

      // Obtén los valores de los campos de entrada
      const baseUrl = document.getElementById('base-url').value;
      const source = document.getElementById('source').value;
      const medium = document.getElementById('medium').value;
      const campaign = document.getElementById('campaign').value;

      // Construye la URL con los tags de seguimiento
      const trackingUrl = `${baseUrl}?utm_source=${source}&utm_medium=${medium}&utm_campaign=${campaign}`;

      // Muestra la URL en el elemento de salida
      output.innerHTML = `<a href="${trackingUrl}">${trackingUrl}</a>`;
    });
  </script>

   

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.