Hey everyone,
I need to prevent users from submitting Wix Forms if they use certain email domains (like Gmail, Yahoo, Outlook, etc.). I want to allow only business emails.
Is there a way to do this in Wix Forms using Velo or any other method? Ideally, I’d like to disable the submit button and show an error message if a user enters a blocked domain.
Any help would be greatly appreciated!
Thanks!
Hi, @Filip_Kulikowski !!
I believe it is likely possible. By combining Wix’s built-in “rules” creation feature with Velo code, it should be achievable. If the goal is just to implement the feature itself, Velo code may not be necessary. However, to make the system more user-friendly, Velo code would likely be required. That said, please keep in mind that the new version of Wix Forms has been implemented relatively recently, so it may not provide full flexibility in controlling everything. 
I will consider how to implement this feature and get back to you. 
I’ve come up with a provisional method. 
First, let’s implement the feature without using Velo. Go to the Wix Forms editing screen. You probably already have the “Email Address” input element placed, so we’ll use that (if it’s not placed, please do so). Next, set up the “Rules.” On the left side of the form editing screen, there should be an option called “Conditional Rules” (or something similar), so select that. Click “Add Rule” to go to the rule editing screen. You should see options for “Condition” and “Action,” so let’s edit those.
In your case, select “Email Address” as the condition setting. Then, for that “Email Address,” choose “contains” (since I’m using the Japanese version, I’m not sure if this phrase is exactly the same).
Since the “@” symbol has a special meaning in this forum post, it cannot be used. From now on, I will refer to it as [AT], but please replace it appropriately when completing the form settings. ↓↓↓
Enter the value “[AT]gmail.com.” This completes the first condition.
Next, click “Add Condition” and set up a similar condition. Essentially, you should create versions for “[AT]yahoo.co.jp” and “[AT]outlook.com” using the same steps. This will give you three conditions. Make sure these conditions are connected with “OR” (not “AND”). Did you confirm that?
Finally, let’s set the “Action.” For the action setting, choose “Submit,” and set the action to “Hide.” This completes all the settings. Save the form, and preview the page on your site to check if it works. If the submit button disappears when entering “[AT]gmail.com,” “[AT]yahoo.co.jp,” or “[AT]outlook.com,” then it’s successful!
P.S.
I will think about how to display error messages using Velo later.
Here’s a Velo code snippet I put together. In addition to the form settings mentioned above, using this Velo code will make the form more user-friendly. Functionally, it should work fine. Now, you can fine-tune the details to better fit your ideal implementation.
I’ll explain how to use it, but since I recall answering a related question in a previous topic, please refer back to that response while implementing this code—especially regarding how to retrieve field values from Wix Forms (V2).
Additionally, make sure to add a text element named $w("#errorMessageText") to the page. You can customize the message content as needed. Finally, update the values in the domains array within the code, and it should work as expected!
$w.onReady(function () {
$w("#form1").onFieldValueChange(() => {
const fieldValues = $w("#form1").getFieldValues();
const mailAddress = fieldValues["form_field_b12c"];
const domains = ['@gmail.com', '@yahoo.co.jp', '@outlook.com'];
const judge = domains.some(domain => mailAddress.includes(domain));
if (judge) {
$w("#errorMessageText").show();
} else {
$w("#errorMessageText").hide();
}
});
});
Also, don’t forget to set $w("#errorMessageText") to be hidden by default in the editor’s property settings.
This solution works. Thanks.
I’ve changed #form1 to #emailInput and updated my current error message ID to #errorMessageText so it matches the one you’ve used in the code.
Also I’ve changed field values from form_field_b12c to e_mail_8042.
I’d really appreciate it if you could check it because it’s not working at the moment.
Is it not working? Have you followed all the steps, including the rule settings?
I guess I did, but I’m not an expert. If it helps, I can send a link to the page or some additional screenshots. I also previously sent details about what I changed and where I entered the data.
Hmm, I see. In that case, I’d like to confirm whether the rule settings are configured correctly. Could you provide a screenshot? By “rule settings,” I mean the settings explained in this message.
Blockquote
Enter the value “[AT]gmail.com.” This completes the first condition.
Next, click “Add Condition” and set up a similar condition. Essentially, you should create versions for “[AT]yahoo.co.jp” and “[AT]outlook.com” using the same steps. This will give you three conditions. Make sure these conditions are connected with “OR” (not “AND”). Did you confirm that?
Sure, but as I mentioned before this works. The issue is that the message that should appear when someone enters, for example, @gmail, is not showing.
lub means or
Here is a loom video:
I see. That’s probably because just entering “@gmail” isn’t recognized as a valid email address. That’s why you’re seeing the red error message below, right? I believe Wix has a built-in function that determines whether the input is a valid email address. Since “@gmail” isn’t a complete email address, it gets caught by Wix’s validation before reaching the verification program we created.
So, if you follow my instructions correctly and adjust the settings accordingly, it should work. In your screenshot, I see “[AT]gmail” and “[AT]yahoo.com,” right? This differs from what is written in the Velo code. In the Velo code, it is set as “[AT]gmail.com” and “[AT]yahoo.co.jp,” correct?
Of course, you can modify these values to block any domains you want, but the conditions are:
Please rewrite the rules so that they fully match the domain names written in the Velo code. They need to be an exact match.
I made the changes as you suggested.
Now, the button disappears when someone enters a domain like @gmail.com, but the error message I set in the editor doesn’t appear (I showed in a Loom video how I set it up in the editor—maybe there’s a mistake there).
Also, the input field jumps down when the button disappears, which looks a bit off. Any idea how to fix this?
Hmm, I wonder. For now, it seems to be working, so that’s a relief. As for why the error message isn’t displaying, I can think of two possible reasons. Either the program is reaching .show(), but for some reason, it can’t make the element visible, or the program isn’t even reaching .show() in the first place.
In my opinion, since you’ve followed my instructions carefully, I assume the program itself is working as expected and has indeed reached .show(). So, I think the issue is likely with the way you’re hiding the element. When I looked at the screenshot you provided, it appears that #errorMessageText is hidden, right? (It has the eye icon with a slash). This is indeed a “hidden” setting. However, this type of “hidden” setting makes the element completely invisible, and I believe this is why the program can’t toggle the visibility with .show().
So, first, please remove this “hidden” setting (make the eye visible). Then, let’s set it to be hidden correctly. Click on the #errorMessageText element, and then in the editing panel, you should see a button to “maximize” in the bottom right. Press that, and the code panel should open. On the right side, you should see a section called “Properties & Events.” Just below that, you should see a section labeled “Default Values.” There, you should see the options “Hidden” and “Collapse.” For this case, please check “Hidden” to hide the element. This hidden state is the one that can be toggled with .show().
I believe this should resolve the issue! We can address the issue with the input element jumping at a later time. I’m going to sleep now!
Was I able to help you this time? 
Thank you so much! This is the second time you’ve helped me, and I really appreciate it.
If I can fix the jumping issue, it will be perfect and won’t overlap anymore.
I’ll first explain how to prevent the message from overlapping with the form. In Wix Studio, there is a feature called “Stack,” which we will use. By using stacks, you can set the spacing between elements, effectively preventing them from overlapping.
Here’s what you need to do:
This should resolve the overlapping issue! 
As for the issue where the entire form element jumps down, I initially noticed the same behavior. However, after making the stack adjustments mentioned above, the jumping issue stopped occurring. 
I’m not entirely sure what the exact condition is that prevents this from happening, but it’s possible that as you refine the design, the issue may also disappear in your environment. I apologize for the vague explanation on this. Adjusting the overall height of the section or making other design tweaks might have some effect.
If I figure out a definitive condition that resolves this, I’ll let you know—but please don’t expect too much on this one. 
