Require email address OR phone number on form submit, but not both

Hello!

I have a client that wants a contact form with input fields for name, email, and phone number.

They want the visitor to be required to submit the form with EITHER an email address OR a phone number, but not both.

I know this functionality isn’t available natively within Webflow forms but I imagine it can be done using some custom code. Does anyone have suggestions?

Thank you!


Here is my site Read-Only: Webflow - Demo Form Site

Hi Lauren,

Welcome to the forum!

I’ve created a demo site you can test this on here: https://either-text-field-required.webflow.io/

Here’s the read-only link as well.

You’ll just need to wrap the phone and email inputs in a div with a class ‘input-wrap’, set both fields to required and then add the following code to Page Settings > Custom Code > Before </body> tag:

<script>
 $(function(){
    var requiredInputs = $('.input-wrap input')
    
    requiredInputs.change(function(){
    
    var requiredInputValue = requiredInputs.map(function() {return $(this).val();
	}).get();
        if(requiredInputValue.length > 0) {
            requiredInputs.removeAttr('required');
        } else {
            requiredInputs.attr('required', 'required');
        }
    });
});
</script>

Let me know how it goes and if it doesn’t work for you and I can try making some tweaks.

1 Like

Thank you sooo much Milan! This works beautifully!

I tested inputting only email and only phone number and it works like a charm.

Thanks again!

1 Like