I’m building a form in webflow with special requirements.
The form has a checkbox to consent for receiving a newsletter.
If the checkbox is checked, the action of the form should be set to a certain value (which will kick off the newsletter opt-in process of our newsletter tool).
If the checkbox isn’t checked, the webflow default action should be executed.
I wrote the following javascript for this case:
<script>
function checkboxActive() {
var checkboxNL = document.getElementById("checkboxNL");
if(checkboxNL.checked == false) {
document.getElementById("lead").action = "";
}
return true;
}
</script>
The source code of the form looks like this:
<form id="Lead" name="wf-form-Bestellformular-lead" data-name="Lead Form" method="post" action="ACTIONURL" onsubmit="checkboxActive()">
<div class="w-embed"><input type="hidden" name="SUBSCRIPTION" value="testliste">
<input type="hidden" name="HTTP_REDIRECT" value="URL-SUCCESS">
<input type="hidden" name="HTTP_REDIRECT_ERROR" value="URL-ERROR">
<input type="hidden" name="CHARSET" value="ISO-8859-1">
<label>Anrede*</label>
<select name="ANREDE" required="" class="select-field w-select">
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<label>Vorname*</label>
<input type="text" name="VORNAME" class="text-field w-input" placeholder="Vorname eingeben" required="">
<label>Nachname*</label>
<input type="text" name="NACHNAME" class="text-field w-input" placeholder="Nachname eingeben" required="">
<label>Firmenname (optional)</label>
<input type="text" name="PRODUKTNAME" class="text-field w-input" placeholder="Firmenname eingeben">
<label>E-Mail*</label>
<input type="text" name="email" class="text-field w-input" placeholder="E-Mail eingeben" required="">
<label>Telefonnummer (optional)</label>
<input type="text" name="KDNR" class="text-field w-input" placeholder="Telefonnummer eingeben">
<label>Bevorzugte Form der Kontaktaufnahme? (optional)</label>
<div class="w-radio">
<input type="radio" name="ID" value="1" class="radio-button w-radio-input">
<label class="label--radiobutton w-form-label">Per E-Mail</label>
</div>
<div class="w-radio">
<input type="radio" name="ID" value="2" class="radio-button w-radio-input">
<label class="label--radiobutton w-form-label">Per Telefon</label>
</div>
<label for="anfrage">Ihre Anfrage*</label>
<textarea name="ZUSATZINFO" placeholder="Nachricht eingeben" maxlength="5000" class="text-field w-input"></textarea>
<div class="w-checkbox">
<input id="checkboxNL" type="checkbox" name="OPT_IN" class="radio-button w-checkbox-input" value="true">
<input type="hidden" name="unsetOPT_IN" value="false">
<label class="label--radiobutton w-form-label">Ja, ich möchte zukünftig über Neuigkeiten rund um Ihre Produkte informiert werden.</label>
</div>
<input type="Submit" value="Abonnieren" name="Submit" class="button button--primary w-button">
</div>
</form>
<div class="success-msg w-form-done">
<div>Vielen Dank für Ihre Bestellung! Sie erhalten in Kürze eine E-Mail mit der Bestellbestätigung.
</div>
</div>
<div class="error-msg w-form-fail">
<div>Leider konnte das Formular nicht versendet werden. Bitte überprüfen Sie Ihre Angaben und probieren es erneut.</div></div></div>
Unfortunately it seems, as if I can’t / am not allowed to affect the forms action because I’m getting a “405 Not Allowed” Error in the browser if the checkbox isn’t checked (when the checkbox is unchecked, my javascript manipulates the form and should empty the action).
Did I do something wrong here or is webflow forbidding to overwrite a forms action?
Just so I’m clear — what’s the desired effect for the Webflow Form Submission if the checkbox is not checkmarked? i.e., where do you want the data to go if you don’t want to send it to https://aktuelles.lexware.de/subscription/servlet? Are you wanting to use the default Webflow form actions, or are you trying to POST the data elsewhere?
Using the Jquery code found in the Head tag, I added or removed an Action attribute, depending on what the desired use case is. If the checkbox is ticked, the form has the Action attribute added that should (in theory) change the form action from the default Webflow form action to POSTthe data to https://aktuelles.lexware.de/subscription/servlet.
unfortunately, the code isn’t working as it’s supposed to.
I can see that your code is working and adds the action to the form when clicking the checkbox. But it seems the form isn’t executing this action if it isn’t set in the beginning. At the moment, the form is always executing the Webflow default action.
Hey Eva! That’s no fun — I’ll take a look and see if I can figure it out. What page on your read-only link can I find the form re-built using Webflow’s form elements?
Hi Matt!
I’m sorry, I was trying out as much as I can and removed the form I made with Webflow again. But since the form has special requirements (e.g. some informations in hidden input fields which I can’t create with webflow) I need to add some custom code to the Webflow form either way.
I have two versions of the form now and saved them as symbols:
Version 1 “LEAD FORM WF 0705” is made with webflow and won’t execute my action at all. Neither when I’m putting it into the Action field in the Form Block Settings nor when I’m adding the action with your script.
Version 2 “LEAD FORM EMBED 0705” is the form included completely with custom code. This one will execute my action, when I add it to the custome code but not if I’m adding it with your script.
Hey Eva — apologies for the delay in getting back to you. Unfortunately, I’m scratching my head as well in regards to why the changing of the form action isn’t working.
I have a decent feeling that it is to do with the unbinding of Webflow’s default form handling (see forum post here), but I’m not super familiar with the specifics to be completely honest.
Maybe @cyberdave or someone else knows how to resolve this? I wish I could be of more assistance!