Using Wordpress with Gravity Forms Ajax and Swup JS for dynamic form submissions

Question

Using Wordpress with Gravity Forms Ajax and Swup JS for dynamic form submissions

For page transitions and AJAX content changes, I have implemented swup.js. However, Gravity forms is not properly handling the AJAX request and the form stops working after transitioning.

To reinitialize my scripts upon page load, I am using the following code snippet:

document.addEventListener('swup:pageView', (event) => {
// insert your code here
})

I am wondering if there is a specific JavaScript function I can use to ensure that Gravity forms are reinitialized with each page transition. I searched the documentation but could not find any relevant information.

javascript ajax wordpress gravity-forms-plugin

Answer 1

Answer №1

Although the post date may seem outdated, a question has recently come to mind that needs addressing. If you have been unable to find a solution, consider utilizing the following code snippet:

Feel free to give this code a try - it monitors any changes made to the body's DOM and can be customized to trigger specific actions:

<script>
    $(document).on('DOMSubtreeModified', 'body', function (el) {
        console.log('Changes detected in body content');
        // Add your initialization code here
    });
</script>

Please let me know if this method proves to be effective for your needs.

Answer 2

Although the post date may seem outdated, a question has recently come to mind that needs addressing. If you have been unable to find a solution, consider utilizing the following code snippet:

Feel free to give this code a try - it monitors any changes made to the body's DOM and can be customized to trigger specific actions:

<script>
    $(document).on('DOMSubtreeModified', 'body', function (el) {
        console.log('Changes detected in body content');
        // Add your initialization code here
    });
</script>

Please let me know if this method proves to be effective for your needs.

Answer 3

Answer №2

I ended up utilizing SwupFormsPlugin along with Contact Form 7 and implemented the following code snippet:

document.addEventListener('DOMContentLoaded', function (event) {
  var domain = window.location.origin // Adjusting link selector to be relative
  var isMobile = window.innerWidth < 800
  if (isMobile) {
  } else {
    var swup = new Swup({
      plugins: [
        new SwupOverlayTheme({
          color: '#eff6fb',
          duration: 3000,
          direction: 'to-bottom',
        }),
        new SwupBodyClassPlugin(),
        new SwupFormsPlugin({ formSelector: 'form.wpcf7-form' }),
        new SwupScrollPlugin({
          doScrollingRightAway: false,
          animateScroll: true,
          scrollFriction: 0.3,
          scrollAcceleration: 0.04,
        }),
      ],
      FORM_SELECTOR: 'form.wpcf7-form',
      LINK_SELECTOR: 'a[href*="'.concat(
        domain,
        '"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]'
      ),
    })
    swup()
  }
})
function domReady (callback) {
  document.readyState === 'interactive' || document.readyState === 'complete'
    ? callback()
    : document.addEventListener('DOMContentLoaded', callback)
}
export { domReady }

Hope this solution proves beneficial for others as well.

Answer 4

I ended up utilizing SwupFormsPlugin along with Contact Form 7 and implemented the following code snippet:

document.addEventListener('DOMContentLoaded', function (event) {
  var domain = window.location.origin // Adjusting link selector to be relative
  var isMobile = window.innerWidth < 800
  if (isMobile) {
  } else {
    var swup = new Swup({
      plugins: [
        new SwupOverlayTheme({
          color: '#eff6fb',
          duration: 3000,
          direction: 'to-bottom',
        }),
        new SwupBodyClassPlugin(),
        new SwupFormsPlugin({ formSelector: 'form.wpcf7-form' }),
        new SwupScrollPlugin({
          doScrollingRightAway: false,
          animateScroll: true,
          scrollFriction: 0.3,
          scrollAcceleration: 0.04,
        }),
      ],
      FORM_SELECTOR: 'form.wpcf7-form',
      LINK_SELECTOR: 'a[href*="'.concat(
        domain,
        '"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]'
      ),
    })
    swup()
  }
})
function domReady (callback) {
  document.readyState === 'interactive' || document.readyState === 'complete'
    ? callback()
    : document.addEventListener('DOMContentLoaded', callback)
}
export { domReady }

Hope this solution proves beneficial for others as well.

Using Wordpress with Gravity Forms Ajax and Swup JS for dynamic form submissions

Answer №1

Answer №2

Similar questions

Unable to locate the tag using .find() function following the use of .attr() method

The jQuery target is not able to locate the specified element

When attempting to set the keyPath using a variable, an error occurs stating that the keyPath option is not a valid key path

Creating a String Array and linking it to an Input Field

The combination of Node.js module.exports and shorthand ternary operators for conditional statements

Tips for checking errors during the process of WRITING data to a stream

Issue with React app: IconMenu does not expand when clicked

When using this.$refs in Vue, be mindful that the object may be undefined

What steps need to be taken to automatically redirect a user to the login page after attempting to execute an AJAX request when the Spring Security

Dealing with errors in jQuery when handling JSON

Dynamically insert a new row into an HTML table using AJAX and refresh the table with .load method

Encountering a npm failure during the installation process of polymer

Variable assigned by Ajax no longer accessible post-assignment

Modify the href value by matching it with the parent div attribute

Once the vue-cli has deployed to the server, the server's requested image path is now located in /dist/ folder

Here is a unique rewrite: "Utilize jQuery to extract all data-id and amount from an HTML page, then send it through an

Is there a way for me to determine which class has been selected using jQuery and JavaScript?

Tips on how to efficiently wrap content within a column layout, and to seamlessly shrink it if necessary

Utilizing the power of Jquery, Ajax, and ASP.NET web methods

The onClick function is failing to work properly, and I need to pass the value of 'cid' based on the result of the button