-2

I have an iframe embedded on my site (built with elementor) and I want to pass all utm parameters from the URL the iframe is embedded on to the iframe.

(The iframe later sends the utms via webhook)

Therefore, I have two codes:

  1. The code which is embedded through the iframe and which gets the parameters and gives it to the webhook.

  2. The iframe code itself, which reads out the parameters and sends it to Code 1.

However, it is only working when I append utms directly to the URL where Code 1 is hosted.

Whenever I place Code 1 on the real website, with Code 2, it doesn't work.

CORS cannot be the problem, because Code 1 is hosted on the same domain.

Here are the two codes:

1. The code which is embedded through the iframe:

<!DOCTYPE html>
<html>
<head>
  <title>Mehrstufiges Formular</title>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Montserrat', sans-serif;
    }
    .form-box {
      width: 100%;
      margin: 0 auto;
      padding: 0px;
      border: 0px solid #ccc;
      border-radius: 15px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: auto; /* Verhindert das Abschneiden von Inhalten */
    }
    .form-step {
      display: none;
      width: 100%;
      text-align: center;
    }
    .form-step.active {
      display: block;
    }
    .form-step h2 {
      font-weight: normal;
      margin-bottom: 20px;
    }
    .form-step input {
      text-align: center; /* Zentriert den Text in den Eingabefeldern */
      border: 2px solid #284a6b; /* Border-Farbe und -Dicke */
      border-radius: 5px;
    }
    .form-step input::placeholder {
      color: #808080; /* Graue Farbe */
    }
    .form-step .tooltip {
      display: none;
      margin-bottom: 10px;
      color: red;
    }
    .form-step button {
      font-weight: normal;
      margin: 20px auto; /* Zentriert den Button */
      display: block; /* Button wird als Block-Element angezeigt */
      border: 0px solid #ccc;
      box-shadow: 1px 1px 10px #ccc;
      color: #fff; 
      background-color: #e07242; 
      border-radius: 5px;
    }
    #myForm button[type="submit"] {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50px; /* Höhe des Buttons */
    }
    #myForm label {
      margin-bottom: 15px; /* Erhöht den Abstand unter den Labels */
    }
    
    /* Desktop */
    @media (min-width: 1025px) {
      .form-step button {
        height: 40px;
        width: 80px;
      }
      .form-step input {
        width: 90%; /* Länge des Eingabefelds auf Desktop-Geräten*/
        height: 40px;
      }
      .form-step .tooltip {
        font-size: 16px; /* Anpassung der Schriftgröße für Desktop-Geräte */
        margin-top: 8px;
      }
      .form-step h2 {
      font-weight: bold;
      margin-bottom: 20px;
      font-size: 17px;
      }
      #myForm label {
      margin-bottom: 20px; /* Erhöht den Abstand unter den Labels */
      font-size: 15px;
      }
      #step5 input[type="text"], #step5 input[type="email"], #step5 input[type="tel"], #step5 input[type="number"] {
        margin: 10px auto; /* Zentriert die Eingabefelder */
        margin-bottom: 25px;
        width: 100%; /* Reduziert die Breite der Eingabefelder auf 80% der Breite des Formulars */
        height: 40px;
      }
    }
    
    /* Tablet */
    @media (min-width: 768px) and (max-width: 1024px) {
      .form-step button {
        height: 40px;
        width: 80px;
      }
      .form-step input {
        width: 65%; /* Länge des Eingabefelds auf Tablet-Geräten */
        height: 40px;
      }
      .form-step h2 {
      font-weight: bold;
      margin-bottom: 20px;
      font-size: 16px;
      }
      .form-step .tooltip {
        font-size: 15px; /* Anpassung der Schriftgröße für Tablet-Geräte */
        margin-top: 8px;
      }
      #myForm label {
      margin-bottom: 20px; /* Erhöht den Abstand unter den Labels */
      font-size: 15px;
      }
      #step5 input[type="text"], #step5 input[type="email"], #step5 input[type="tel"], #step5 input[type="number"] {
        margin: 10px auto; /* Zentriert die Eingabefelder */
        margin-bottom: 25px;
        width: 100%; /* Reduziert die Breite der Eingabefelder auf 80% der Breite des Formulars */
        height: 40px;
      }
    }
    
    /* Mobile */
    @media (max-width: 767px) {
      .form-step h2 {
        line-height: 1.5; /* Anpassung der Zeilenhöhe für Überschriften auf Mobilgeräten */
      }
      .form-step button {
        height: 40px;
        width: 80px;
      }
      .form-step input {
        width: 100%; /* Reduziert die Breite der Eingabefelder auf 80% der Breite des Formulars */
        height: 40px;
      }
      .form-step .tooltip {
        font-size: 14px; /* Anpassung der Schriftgröße für Mobilgeräte */
        margin-top: 8px;
      }
      .form-step h2 {
      font-weight: bold;
      margin-bottom: 20px;
      font-size: 14px;
      }
      #step5 label {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      #myForm label {
      margin-bottom: -15px; /* Erhöht den Abstand unter den Labels */
      font-size: 14px;
      }
      #step5 input[type="text"], #step5 input[type="email"], #step5 input[type="tel"], #step5 input[type="number"] {
        margin: 10px auto; /* Zentriert die Eingabefelder */
        margin-bottom: 25px;
        width: 100%; /* Reduziert die Breite der Eingabefelder auf 80% der Breite des Formulars */
        height: 40px;
      }
    }
    button {
      cursor: pointer;
    }
    iframe {
      overflow: hidden;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div class="form-box">
    <form id="myForm" onsubmit="sendData(event)">
<div id="step1" class="form-step active">
        <h2>Anzahl Mitarbeiter</h2>
        <input type="text" id="A1" required placeholder="120">
        <div id="tooltip1" class="tooltip">Feld ist leer</div>
        <button type="button" onclick="nextStep(1)">Weiter</button>
      </div>      
            <div id="step2" class="form-step">
        <h2>Anzahl Führungskräfte</h2>
        <input type="text" id="A2" required placeholder="15">
        <div id="tooltip2" class="tooltip">Feld ist leer</div>
        <button type="button" onclick="nextStep(2)">Weiter</button>
      </div>
      <div id="step3" class="form-step">
        <h2>Mitarbeitergehalt/ Jahr</h2>
        <input type="text" id="A3" required placeholder="45.000">
        <div id="tooltip3" class="tooltip">Feld ist leer</div>
        <button type="button" onclick="nextStep(3)">Weiter</button>
      </div>
      <div id="step4" class="form-step">
        <h2>Umsatz/ Jahr</h2>
        <input type="text" id="A4" required placeholder="45.000.000">
        <div id="tooltip4" class="tooltip">Feld ist leer</div>
        <button type="button" onclick="nextStep(4)">Weiter</button>
      </div>
      <div id="step5" class="form-step">
        <h2>Kontaktinformationen</h2>
        <label for="fname">Vorname:</label><br>
        <input type="text" id="fname" name="fname" required placeholder="Max"><br>
        <label for="lname">Nachname:</label><br>
        <input type="text" id="lname" name="lname" required placeholder="Mustermann"><br>
        <label for="email">Email:</label><br>
        <input type="email" id="email" name="email" required placeholder="max@maxmustermann.de"><br>
        <label for="phone">Handynummer:</label><br>
        <input type="tel" id="phone" name="phone" required placeholder="+4912345678"><br>

    <!-- Versteckte Formularfelder für UTM-Parameter -->
        <input type="hidden" name="utm_source" id="utm_source" value="">
        <input type="hidden" name="utm_medium" id="utm_medium" value="">
        <input type="hidden" name="utm_campaign" id="utm_campaign" value="">
        <input type="hidden" name="utm_content" id="utm_content" value="">
        <input type="hidden" name="utm_term" id="utm_term" value="">

        <button type="submit">Weiter</button>
      </div>
</form>
  </div>
  
  <script>

function getUTMParameters() {
  var params = {};
  window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str, key, value) {
    params[key] = decodeURIComponent(value); // Verwenden von decodeURIComponent, um die Werte zu dekodieren
  });
  return {
    utmSource: params['utm_source'] || '',
    utmMedium: params['utm_medium'] || '',
    utmCampaign: params['utm_campaign'] || '',
    utmContent: params['utm_content'] || '',
    utmTerm: params['utm_term'] || ''
  };
}

console.log("UTM Parameters:", getUTMParameters());



  var currentStep = 1;

  function formatNumber(n) {
    return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
  }

  $('input[type="text"]').on('input', function(e) {
    var value = $(this).val().replace(/\./g, '');
    $(this).val(formatNumber(value));
  });

  function nextStep(step) {
    var inputValue = $('#A' + step).val().replace(/\./g, '');
    if (!inputValue) {
      $('#tooltip' + step).show();
      $('#A' + step).focus();
      return;
    }
    $('#tooltip' + step).hide();
    $('#step' + step).removeClass('active');
    $('#step' + (step + 1)).addClass('active');
    currentStep = step + 1;
  }


  
    function sendData(event) {
  event.preventDefault();

 // UTM-Parameter abrufen
  var utmParams = getUTMParameters();
  console.log("UTM Parameters abrufen:", utmParams);

  // UTM-Parameter in die versteckten Formularfelder setzen
  $('#utm_source').val(utmParams.utmSource);
  $('#utm_medium').val(utmParams.utmMedium);
  $('#utm_campaign').val(utmParams.utmCampaign);
  $('#utm_content').val(utmParams.utmContent);
  $('#utm_term').val(utmParams.utmTerm);

// Loggen Sie die UTM-Parameter, nachdem sie in die versteckten Formularfelder gesetzt wurden
console.log("UTM Parameters set in hidden fields:", {
  utm_source: $('#utm_source').val(),
  utm_medium: $('#utm_medium').val(),
  utm_campaign: $('#utm_campaign').val(),
  utm_content: $('#utm_content').val(),
  utm_term: $('#utm_term').val()
});

  var A1 = parseFloat($('#A1').val().replace(/\./g, ''));
  var A2 = parseFloat($('#A2').val().replace(/\./g, ''));
  var A3 = parseFloat($('#A3').val().replace(/\./g, ''));
  var A4 = parseFloat($('#A4').val().replace(/\./g, ''));

  var E1 = Math.round(0.24 * 0.34 * A3);
  var E2 = Math.round(1.19 * (A4 / A1) - (A4 / A1));
  var E3 = Math.round((E1 + E2) * A1);
  var E4 = Math.round(6490 * A2);
  var E5 = Math.round(E3 / E4);

  var formData = {
    A1: A1.toLocaleString('de-DE'),
    A2: A2.toLocaleString('de-DE'),
    A3: A3.toLocaleString('de-DE'),
    A4: A4.toLocaleString('de-DE'),
    E1: E1.toLocaleString('de-DE'),
    E2: E2.toLocaleString('de-DE'),
    E3: E3.toLocaleString('de-DE'),
    E4: E4.toLocaleString('de-DE'),
    E5: E5.toLocaleString('de-DE'),
    fname: $('#fname').val(),
    lname: $('#lname').val(),
    email: $('#email').val(),
    phone: $('#phone').val(),
    utm_source: $('#utm_source').val(),
    utm_medium: $('#utm_medium').val(),
    utm_campaign: $('#utm_campaign').val(),
    utm_content: $('#utm_content').val(),
    utm_term: $('#utm_term').val()
  };

console.log("Form data before sending:", formData);


    $.post('webhookUrl', formData, function(data, status) {
      console.log('Data: ' + data + '\nStatus: ' + status);

// URL für die "Dankeseite" mit den UTM-Parametern erstellen
        var redirectUrl = new URL('myUrl');
  redirectUrl.searchParams.set('utm_source', formData.utm_source);
  redirectUrl.searchParams.set('utm_medium', formData.utm_medium);
  redirectUrl.searchParams.set('utm_campaign', formData.utm_campaign);
  redirectUrl.searchParams.set('utm_content', formData.utm_content);
  redirectUrl.searchParams.set('utm_term', formData.utm_term);

        // Zur "Dankeseite" umleiten
        // window.top.location.href = redirectUrl.toString();
  });

// ... (restlicher Code)

// Event-Listener für Nachrichten von der übergeordneten Seite
window.addEventListener('message', function(event) {
  console.log("Received message from Parent Page:", event.data);

  document.getElementById('utm_source').value = event.data.utmSource;
  document.getElementById('utm_medium').value = event.data.utmMedium;
  document.getElementById('utm_campaign').value = event.data.utmCampaign;
  document.getElementById('utm_content').value = event.data.utmContent;
  document.getElementById('utm_term').value = event.data.utmTerm;
}, false);
    
  }
  </script>
</body>
</html>

2. The iframe code itself:

<center>
<iframe id="myFormIframe" src="https://wpstaging.grundl-institut.de/wp-content/uploads/2023/08/index.html" width="600" height="400"></iframe>

<script>
  function sendUTMParametersToIframe() {
  var iframe = document.getElementById('myFormIframe');
  var utmParameters = {
    utmSource: getUrlParameter('utm_source'),
    utmMedium: getUrlParameter('utm_medium'),
    utmCampaign: getUrlParameter('utm_campaign'),
    utmContent: getUrlParameter('utm_content'),
    utmTerm: getUrlParameter('utm_term')
  };
  console.log("Preparing to send UTM Parameters to iFrame:", utmParameters); // Zum Testen

  iframe.onload = function() {
    console.log("Sending UTM Parameters to iFrame after it's loaded:", utmParameters); // Zum Testen
    iframe.contentWindow.postMessage(utmParameters, '*');
  };
}
  
</script>
</center>
Prajwal Kulkarni
  • 1,480
  • 13
  • 22
Lorenz Höppner
  • 1
  • Please reduce the amount of code you are showing there - for example, all of that CSS is very unlikely to have anything to do with the problem. You are supposed to show a [mre], with unnecessary "noise" removed. – CBroe Aug 14 '23 at 09:55
  • "Doesn't work" does not really work for us, as a problem description. What have you do so far to try and debug this? Have you checked the browser console for errors, for a start? – CBroe Aug 14 '23 at 09:57
  • what is `getUrlParameter()`? did you declare it somewhere? – GrafiCode Aug 14 '23 at 10:36

0 Answers0