Thiết kế website giá rẻ

Question

Let me begin by saying that the 2 Cognito forms are identical from field names to the layout they both allow you to upload an IMG. Both have 3 fields a quote number field, email field and a upload field.

This was the code that we used for one form and it worked perfectly.

<iframe src="https://www.cognitoforms.com/f/RgNQy9dW906oPSbvKfNQ_g/96" style="border:0;width:100%;" height="441"></iframe>
<script src="https://www.cognitoforms.com/f/iframe.js"></script>
<script>
  // Get Quote Number Parameter
  const queryStringPoPQuoteNumber = window.location.search;
  const urlParamsPoPQuoteNumber = new URLSearchParams(queryStringPoPQuoteNumber);
  var quotenumber = urlParamsPoPQuoteNumber.get('quote_number');
  quotenumber = quotenumber == null ? "" : quotenumber;
  console.log("quote_number = " + quotenumber);

  // Get Email Parameter
  const queryStringPoPEmail = window.location.search;
  const urlParamsPoPEmail = new URLSearchParams(queryStringPoPEmail);
  var email = urlParamsPoPEmail.get('email');
  email = email == null ? "" : email;
  console.log("email = " + email);

  // Prefill Cognito Form
  Cognito.prefill({"QuoteNumber": quotenumber, "Email": email});
</script>

I’m not a Java script expert i consider myself below a beginner. I mainly use python so i don’t know how good that code is so any suggestions on improving the code further would also be appreciated

So my first thought was to go to Chat GPT as its usually a powerful tool but If it worked I would not be here… But he suggested that I do this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Prefill Cognito Forms</title>
    <style>
        .form-wrapper {
            display: flex;
            justify-content: space-between;
        }
        .form-container {
            flex: 1;
            margin-right: 2%;
        }
        .form-container:last-child {
            margin-right: 0;
        }
        .form-container iframe {
            width: 100%;
        }
        h5 {
            text-align: center;
            font-size: 140%;
            color: #2a64af;
            font-family: 'league-spartan', sans-serif;
        }
    </style>
</head>
<body>
    <div class="form-wrapper">
        <!-- Form 1 Container -->
        <div class="form-container">
            <h5>
                <span style="font-size: 140%; color: #2a64af;">
                    <span style="font-family: league-spartan;">
                            UPLOAD AN IMAGE OF YOUR BAKKIE HERE:
                    </span>
                </span>
            </h5>
            <iframe src="https://www.cognitoforms.com/f/RgNQy9dW906oPSbvKfNQ_g/122" allow="payment" style="border:0;" height="495" id="form1"></iframe>
        </div>

        <!-- Form 2 Container -->
        <div class="form-container">
            <h5>
                <span style="font-size: 140%; color: #2a64af;">
                    <span style="font-family: league-spartan;">
                            UPLOAD YOUR PoP HERE:
                    </span>
                </span>
            </h5>
            <iframe src="https://www.cognitoforms.com/f/RgNQy9dW906oPSbvKfNQ_g/96" style="border:0;" height="441" id="form2"></iframe>
        </div>
    </div>

    <script src="https://www.cognitoforms.com/f/iframe.js"></script>

    <script>
        // Get URL Parameters
        const urlParams = new URLSearchParams(window.location.search);
        const quotenumber = urlParams.get('quote_number') || '';
        const emailParam = urlParams.get('email') || '';

        console.log("quote_number = " + quotenumber);
        console.log("email = " + emailParam);

        // Prefill Cognito Forms once they have loaded
        function prefillForms() {
            try {
                Cognito.prefill({
                    "QuoteNumber": quotenumber,
                    "Email": emailParam
                });
                console.log("Prefilled forms with: QuoteNumber = " + quotenumber + ", Email = " + emailParam);
            } catch (error) {
                console.error("Error pre-filling forms: ", error);
            }
        }

        window.addEventListener('load', () => {
            const form1 = document.getElementById('form1');
            const form2 = document.getElementById('form2');

            if (form1 && form2) {
                form1.addEventListener('load', prefillForms);
                form2.addEventListener('load', prefillForms);
            } else {
                console.error("Forms not found on the page.");
            }
        });
    </script>
</body>
</html>

but it did not work so I’m not sure what to do from here.

Thiết kế website giá rẻ

Danh mục

Im trying to prefill 2 Cognito forms that are embedded in a website using URL params but only one form keeps prefilling