Streaming live at 10am (PST)

How to: Ajax queries with form submissions on Webflow


#1

Hi, I have a REST api under an address that adds a subscriber to our user database and registers him on a sendgrid mail list. On the client side just a post with the email address to a URL is required.

By default, posting from a form in webflow to another address redirects the page to said address. I wanted to avoid that by adding ajax functionality to my site.

This individual code works:

    <script src="http://malsup.github.com/jquery.form.js"></script>
      <script>
          $(document).ready(function() {
              // bind 'myForm' and provide a simple callback function
              $('#myForm').ajaxForm(function() {
                $('#mailInput').css('display','none');
                $('#submitInput').css('display','none');
                $('#success').css('display', 'block');
              });
          });
      </script>
    <form id="myForm" action="https://node.netbeast.co/api/subscribe" method="post">
      <input id="mailInput" type="email" name="sub_email" placeholder="Enter your email address" data-name="sub_email" required="required" />
      <input id="submitInput" type="submit" value="Join our community!"/>
      <img id="success" style="display: none; margin-left: auto; margin-right: auto; width: 50px; height: 50px;" src="tick.png" />
    </form>

But when inserted in a code snippet into my webflow site the form redirects the page to the post url nonetheless.

Is there anyway around this?


#2