WIX Studio - "Contact Me" form behavior

Ask the community
, , , ,
1

Hi guys, new member here.

My name is Cyndee and I am trying to put together a website for my wife’s therapy practice. The WIX AI has muddled me through most things, but we are stuck regarding how the “Contact Me” form behaves and we can’t figure a way out.

There are two things we want and it seems we can’t seem to get both of them at the same time.

First, we would like a countdown of characters remaining for the 1000 characters that the client would use in the message box.

Second, We would like an Email notification to be sent to us (or just my wife if there is a limit of one) when a message is received.

In order to get the countdown, I ended up creating the custom form and some code in Velo. Everything worked perfectly except for the the CMS Collection database where the client information is collected. When using a custom form the CMS Collection database Is not grouped with the databases that are automatically created when a Wix form is used. Because of this the native Wix automatic Email notification system cannot access the Custom Form CMS Collection database and no Email gets sent.

The WIX AI suggested a third party service called Sendgrid to get this function. Unfortunately Send Grid costs $20 a month and that does not justify the dozen or so contacts that we expect.

Does anybody know either:

How to create a Characters Remaining Countdown display in regular Wix forms?

Or:

How to trigger an email notification using a custom created form without resorting to a third party service?

Thanks in advance,

CLW

2

Yes, it can be done useing the Automations

  1. In the Wix dashboard, open Automations.
  2. Select Create Automation → Start from Scratch.
  3. Choose the trigger: Wix CMS → Item added
  4. Select the FormSubmissions collection.
  5. Add the action: Send an email
  6. Under Recipients, select the site owner, a specific contact, or the appropriate collaborator role.
  7. Add the submitted name, email, message and other CMS fields as dynamic values in the email.
  8. Activate the automation.
3

Hi Dan,

Thanks for the reply. The problem that I had was in your Step 4 : Select the FormSubmissions collection. The collection that recieves the submitted messages from the form is not showing up in the list of collections choose from. According to the WIX AI HelpBot collections that come from a custom built form cannot be accessed by the Automations, only collecitons linked to the prebuild WIX forms.

I could see, access and interact with the correct collection on the CMS collections list, along with the WIX collections, but when it came time to create the Automation, that collection did not populate.

Thanks for taking time answer, much appreciated.

:slight_smile:
CLW

4

It should have nothing to do with the form.
Your custom form should be saving to a CSM that you also created.
The automation is for CMS so should show the CMS that you are saving to.

I have used this automation before.

5

The HelpBot has that backwards. The Wix article Dan linked says the opposite in its FAQ, under “Can I use these triggers for CMS form submissions?”:

Yes. This is the recommended way to automate form submissions. When a visitor submits a custom form on your site, the data saves as a new item in your collection. This activates the Item added trigger.

So the custom form isn’t what keeps your collection out of the picker. The same page says automations trigger on your live collections, and with sandbox collections turned on you have to sync sandbox to live before the live ones show up in the dashboard. If your site has sandbox collections on, syncing is the thing to try before you reopen the trigger.

The counter might change your plan though. You can have one on a normal Wix Form, and then the email is already handled, because Wix sets that up by default: “when someone submits a form, an email is automatically sent to the site owner notifying them about the submission.”

The new forms element fires an event whenever a field changes, so a text element under the message box can show the count:

const FORM = '#form1';               // your form element's ID
const FIELD = 'long_answer_field';   // the field's key, from its Advanced tab
const LIMIT = 1000;

$w.onReady(() => {
  $w('#charsLeft').text = `${LIMIT} characters left`;

  $w(FORM).onFieldValueChange((newValues) => {
    const value = newValues[FIELD];
    if (typeof value !== 'string') {
      return; // the change was to a different field
    }
    $w('#charsLeft').text = `${LIMIT - value.length} characters left`;
  });
});

The field key isn’t the label. Click the field in form edit mode and open the Advanced tab. The guard is there because the event hands you only the fields that changed.

I’ve checked this against the current documentation but haven’t run it on a live site, so the two IDs, the field key and the 1000 are yours to line up, and watch how often the counter updates as you type.