I am adding some form elements to my Weebly form via Javascript based on user choices. More specifically, I have inserted the following code into the footer of the page that has the form:
<script>
var inputField = document.getElementById("input-167878397137819290");
inputField.addEventListener('change', addInput);
function addInput () {
if (document.getElementById("new-added-input-dt")) {
return;
}
var inputValue = document.getElementById("input-167878397137819290").value;
if (inputValue === 'English to Spanish' || inputValue === 'English into Spanish') {
var newInput = document.createElement('input');
newInput.id = "new-added-input-dt"
newInput.className = "wsite-form-input wsite-input wsite-input-width-370px"
inputField.insertAdjacentElement("afterend", newInput)
var label = document.createElement('label');
label.for = "new-added-input-dt";
label.className = "wsite-form-label";
label.textContent = "which country will you use the Spanish translation(s) for?";
newInput.insertAdjacentElement("beforebegin", label);
}
}
</script>
This works. However, when the form is submitted and the email is received, the email does not contain the new input that gets added via the above JS code.
Can you please advise what would be the workaround? I would like the email from the form submission to contain the info from that newly added input?
Simply, create an input in the form itself using Weebly Editor. Hide it upon page load like
window.onload = function () {
document.getElementById('input-id').visibility = 'hidden';
}
then, based on any condition you may have, show the element with:
document.getElementById('input-id').visibility = 'visible';
You can put the whole code in the footer section of any given page. Do not forget to wrap it with script tags.
The element will always be present in emailed form submissions but it will only have a value when you need it to.