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.