POST Request; Form; Firebase; Cloud Function

Design help Data API
1

Hi all, sorry if this is a double post I wasn’t sure what topic was best to post under.

I have created a cloud function to send an SMS when a user submits a form. I have set the action to the cloud function URL but not sure what else I have to do. I have included a photo of this working in another tool but don’t know exactly how to translate to webflow.

I’ve added this custom code before </body and still having issues

UPDATE: Below is the working custom code to send a POST request to a cloud function.

<script type="text/javascript">
        var button = document.getElementById('smsBtn');
        function sendSMS() {
          var phoneNumber = document.getElementById('phoneNum').value;
            $.ajax({
                url: 'https://us-central1-newapp-prod.cloudfunctions.net/textToDownload',
                type: 'post',
                data: JSON.stringify({
                    "data": {
                        "phone": phoneNumber
                    }
                }),
                contentType: 'application/json',
                dataType: 'json',
                success: function (data) {
                    console.info(data);
                }
            });
          console.log(phoneNumber)
        }
        button.addEventListener("click", event => {
            console.log("clicked");
            sendSMS();
        });
</script>

I appreciate any and all feedback and help

Screen Shot 2020-12-02 at 10.07.40 AM
Screen Shot 2020-12-02 at 10.07.40 AM1325×808 41.5 KB

Here is my site Read-Only: Webflow - Paway Landing

2

Hey Matthew

Take a look at this StackOverflow answer: javascript - How to send a JSON object using html form data - Stack Overflow

You should also target the form element with a submit eventhandler and maybe prevent default.

1 Like
3

Hey @Davidlin_ch12 thanks for your response it was definitely helpful. I’ve updated my custom code in the original question and it seems to be working but am getting a CORS issue. Waiting for my colleague to update the response header to test. If I have any other issues I may ping you. Thanks again!

1 Like
4

Here is the solution I came to, I hope this helps someone else!

<script type="text/javascript">
        var button = document.getElementById('smsBtn');
        function sendSMS() {
          var phoneNumber = document.getElementById('phoneNum').value;
            $.ajax({
                url: 'https://us-central1-newapp-prod.cloudfunctions.net/textToDownload',
                type: 'post',
                data: JSON.stringify({
                    "data": {
                        "phone": phoneNumber
                    }
                }),
                contentType: 'application/json',
                dataType: 'json',
                success: function (data) {
                    console.info(data);
                }
            });
          console.log(phoneNumber)
        }
        button.addEventListener("click", event => {
            console.log("clicked");
            sendSMS();
        });
</script>