Change a form's action with checkbox

Hi there,

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?

Thanks for helping.

Hi Eva — welcome to the forums! :grin:

If you can, can you share your project’s read-only link?

Hi Matt,

here is the link: https://preview.webflow.com/preview/lexbizz-plain?utm_source=lexbizz-plain&preview=af6470ea2029ee35e59b8077f6b68132

It’s the “Kontakt” page where I put the code.

Thanks, Eva. Looking at this now.

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?

I recreated a basic form (just has email + checkbox) in Webflow that can be found here:

Read-only: https://preview.webflow.com/preview/evas-form?utm_source=evas-form&preview=314b5a7c75096f8c392314996ba76403

Published Website: evas-form.webflow.io

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.


<script>

var Webflow = Webflow || [];
Webflow.push(function () {

    $("#checkbox").click(function () {
        if (this.checked == true) {
            $('#form').attr('action', 'https://aktuelles.lexware.de/subscription/servlet');
        }
        else if (this.checked == false) {
            $('#form').removeAttr('action');
        }
    });

});

</script>

I would recommend re-building the form natively in Webflow (versus an embed) and trying this out to see if both methods work.

Hope this helps resolve the issue, but if it doesn’t feel free to ping me!

1 Like

Hi Matt,

You understood correctly - if the checkbox is not checkmarked, the action should be removed completely so the Webflow default action is executed.

I will try out your script as soon as possible and get back in touch to tell you if it worked.

Thanks!

1 Like

Hi Matt,

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.

Do you have an idea why this is happening?

Thanks again for your help!

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:
image

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.

I hope my explanations are understandable…

1 Like

No worries! Thanks so much for re-creating this. I’ll take a look in a bit and see if I can come up with any solutions for ya. :slight_smile:

1 Like

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!