Adding code in wix studio

Ask the community
, ,
1

Hi everyone,

The bottom line is that I’m not very good at coding, and any help with this would be greatly appreciated. To give you some context, I’ll explain the issue below.

I recently asked this question:

I have a form in Wix Studio where users enter the type of furniture they need. Often, they include commas in their responses.

The issue is that I’m using Pabbly to send WhatsApp messages, and Pabbly treats commas as separate parameters. Because of this, messages fail to send properly whenever a user includes multiple options separated by commas.

I’m looking for a way to automatically replace commas with dots (.) when the form is submitted so that the data sent to Pabbly does not contain commas, allowing the messages to go through without errors.

Is there a way to modify the form’s code so that whenever a user enters a comma and submits the form, it is replaced with a dot before being sent to Pabbly via a webhook?

Any help would be greatly appreciated!

Thanks in advance!

I received a response from Tech_Voyager suggesting a solution to this issue:

You can solve this by using Velo (Wix’s coding platform) to modify the form submission before sending it to Pabbly. Add an onClick event to the submit button, and before sending the data, use JavaScript to replace all commas with dots:

$w(“#inputField”).value = $w(“#inputField”).value.replace(/,/g, “.”);

Then, send the modified value via your webhook. This ensures that user inputs are properly formatted, preventing errors in Pabbly’s parameter handling.

Could you guide me through exactly where and how I should add this code step by step?

2

Hi, @Filip_Kulikowski !!

Is this your first time coding with Wix Studio? If so, that’s perfectly fine! However, if you don’t mind, it would be helpful for the community members who visit this topic to assist you more easily if you could share a general overview of the layout (a screenshot of the form, for example).

Also, is the input form you’re using one that you designed yourself? (Did you manually place text input elements and the submit button?) Or is it one of Wix’s built-in form elements? If it’s the former, I believe the method explained by Tech_Voyager should likely solve the issue. :slightly_smiling_face:

1 Like
3

I can guide you step by step, but for your future comfort with Wix, it’s important to take a little time to study now. Please take just 15 minutes to go through the link below—it will help you understand the basics of programming in Wix. These 15 minutes will be essential for giving you more freedom in the future. The program you need is not difficult, so once you grasp the basics, you’ll be able to implement it right away. If you have any questions, feel free to ask on this forum again! :wink:

1 Like
4

This is how the form looks on the website.

As you can see, in the first question on this form page, users can enter commas because, in English, it asks, “What furniture are you interested in?” This means they might list multiple furniture items separated by commas.

image
image1895×903 271 KB

5

Below, I’m also attaching a screenshot of the layout where I built the form:

image
image1876×885 120 KB

6

I see. :open_mouth: That form was manually created, but it’s actually one of the newer, more advanced Wix Forms. It’s not the type of form that Tech_Voyager or I had in mind. :innocent:

This means the method Tech_Voyager suggested won’t work because the text input elements embedded within that form cannot be directly accessed. We’ll need to explore other possible solutions.

Also, it’s mentioned that after submission, the form sends data to Pabbly via Webhook. Is this a no-code feature that was added using Wix Forms, or is there some custom code involved? :smiley:

7

Yes it’s no-code.

image
image1579×911 174 KB

8

@Filip_Kulikowski

OK, I’m sorry for taking up your time. Since this was my first time working with this form, it took me a little while to find a solution. However, I was able to come up with one. :upside_down_face:

By the way, have you learned how to implement the code? Also, I’ll need the ID of the text input field in your form, so please have it ready. By default, it’s probably something like this: “form_field_be63”.

To find this value, click on the text input field in your form, then click on Advanced Settings. You should see a field labeled Field Key—copy that value.

You’ll need to replace it in the appropriate part of the code I’ll provide. Additionally, make sure to update the form element’s ID in the editor to match your actual form element’s ID. :slightly_smiling_face:

1 Like
9

@Filip_Kulikowski

Replace "#form1" and "form_field_be63" with your actual values. This code should immediately replace any commas entered with dots… probably. :innocent:

$w.onReady(function () {

    $w("#form1").onFieldValueChange(() => {

        const fieldValues = $w("#form1").getFieldValues();
        fieldValues["form_field_be63"] = fieldValues["form_field_be63"].replace(/,/g, ".");

        $w("#form1").setFieldValues(fieldValues);

    });

})
1 Like
10

@Filip_Kulikowski

Did it work properly? :open_mouth:

1 Like