Jquery for API calls from webflow form

Design help Custom code
1

Hi there,

Sorry if this is a newbie question, I’m not a developer or programmer.

My client is asking for form submissions from my site to go directly into their private DB via API calls. They’ve provided me with a sample code for how the function may work…

I would put this in the head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

  <script>

    function newsletterForm() {

      var url = "URL goes here";

      var data = {

        FirstName: "John",

        LastName: "Bear",

        Email: "jbear@tribute.ca",

        OptIn: true,

        Source: "FF"

      };

      $.post(url, data, function (result) {

        if (result == 'ok')

          alert('Newsletter Form submitted!');

        else

          alert('Error submitting Newsletter Form');

      });

    }

And then in the body I would create a button as such…

 <button onclick="newsletterForm()">Sign-up for Newsletter</button>

My question is two fold.

One, how do I replace the data set with the user inputs from the form?

Second, even if I put this code in the way it is the button isn’t doing anything. What might I be doing wrong?

1 Like
2

@InderNirwan a few things:

  • You don’t need to import jQuery, Webflow already does this
  • Getting the values from your form into a format like that is going to require some work, essentially you need a function to turn your form values into JSON. You probably want to look into the serialize array method in jQuery (.serializeArray() | jQuery API Documentation) which takes form names and values and gets them ready to be encoded into JSON (which is what their DB will digest)
  • Your form field names will need to match up exactly to their database structure (i.e. FirstName, LastName, Email, etc…)
  • As to why it’s not working, there are many reasons that could be happening. Without seeing something published it’s almost impossible to tell.
  • I would recommend putting that code before the closing body tag rather than in the head. You want jQuery to load before calling it.
  • This code also doesn’t provide an endpoint for the data to post to, unless you’ve omitted that part of the code. So basically the data won’t go anywhere anyway.

It may be easiest to have Webflow send a webhook to Zapier, have Zapier ingest the data and turn it into JSON and then use another webhook to post the data to the DB. It’s probably possible and definitely easier without a coding background, but may depend on how they autneticate database access.

This is not a super easy request and requires a medium level of development experience in my opinion to complete.

Let me know if I can help further,

Sam

3

Thanks Sam.

Apparently I’ve got it to work. This is the hodgepodge code I’ve assembled from reading other threads and trying to ascertain some understanding of JQUERY.

<script>
var button = document.getElementById('FormSubmit');
function newsletterForm() {
      var url = "Omitted";
      var Name1 = document.getElementById('FirstName').value;
      var Name2 = document.getElementById('LastName').value;
      var Name3 = document.getElementById('Email').value;
      var data = {
        FirstName: Name1,
        LastName: Name2,
        Email: Name3,
        OptIn: true,
        Source: "UC"
      };
      $.post(url, data, function (result) {
        if (result == 'ok')
          alert('Newsletter Form submitted!');
        else
          alert('Error submitting Newsletter Form');
      });
    }
button.onclick = newsletterForm;
   </script>

I’ve put this before the /body tag.

I’ve omitted the URL string because it contains an API key and I’m told it’s bad form to share that kind of info on public forums.

There are forms with more datasets that they want me to send, but this one apparently came through.

Are the value calls similar to what you mean by turning form values into JSON?