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

Design help Custom code
1

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: https://preview.webflow.com/preview/demo-form-site?utm_medium=preview_link&utm_source=designer&utm_content=demo-form-site&preview=18f27142ff734887e502f2fce2bf2892&workflow=preview

2

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
3

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