Inline form submissions using Fragment Plugin

[MikeHarrison]

Hi,
I have swup set up for page transitions on my site, which is working well.
I would now like to use the Fragment plugin, to allow the forms on my site to submit without triggering a full page reload (please shout if this is the wrong approach!).

I have added the plugin, and set it up as follows:

import Swup from 'swup';
import SwupFragmentPlugin from '@swup/fragment-plugin';

const swup = new Swup({
  containers: ['#main'],
  plugins: [
    new SwupFragmentPlugin({
      rules: [
        {
          from: '/',
          to: '/',
          containers: ['#test-form'],
          debug: true
        }
      ]
    })
  ]
});

And have a form on my homepage that looks like this (simplified here for ease):

<form id="test-form" action="https://mywebsite.com" method="POST">

<label for="first-name">First name</label>
<input type="text" value="" id="first-name" name="userfield_first-name_0_text_true">
  
<label for="second-name">Second name</label>
<input type="text" value="" id="second-name" name="userfield_second-name_1_text_true">

<label for="message">
Message
</label>
<textarea name="userfield_message_2_textarea_false" id="message"></textarea>
    
<label for="email-address">
Email address
</label>
<input type="email" value="" id="email-address" name="userfield_email-address_3_email_false">

<input type="hidden" name="csrf_token" value="68040e9e2311f610d421022a4129a91011285d11b9546a76d4c0f9f4e28918ba">
<input type="text" name="website" tabindex="-1" autocomplete="off">
<input type="hidden" name="uniform-honeytime" value="cgL/jlHfhErAgNnqI4N+hKODC3xdQsywdi92RpnqBQztt90YD+dhOMzDWLFxMjB7SIOhpR6WDBG/HsMxVAv8uA==">
<input type="hidden" value="432a0438-1e96-4437-b0df-731c246d6f84" name="formid">
<input type="hidden" value="" name="formtitle">

<input type="submit" value="Send it!">

</form>

When I load the page data-swup-fragment is added to the <form> tag, which suggests swup has found it ok. However when I click submit the whole page is reloading, not just the fragment.

I am probably missing something, if anyone has any thoughts that would be awesome

[daun]

Have you tried the forms plugin? That should work out of the box for normal swup navigations, i.e. it will replace the default content containers. It might work together with the fragment plugin, but I haven't yet tested them im combination. Let us know if that works or if it needs further tweaks to enable your use case.

Edit: To clarify, the forms plugin is required to get form submissions to work via swup. The question is whether the fragment plugin can pick it up from there without issues.

[MikeHarrison]

Hi,
Thanks for the quick reply. I did try the forms plugin, but that seemed to be reloading my entire <main id="main"> rather than just the form. Ideally I would like just the form to reload, leaving the rest of the page as it is.

Edit: Ah ok, I didn't realise you meant to try them together. I will give that a spin now

[MikeHarrison]

Hi,
I have tried using the forms plugin alongside the fragment plugin, but no luck. The form submits successfully, and triggers a swup transition, but it does it for the whole main container rather than just for the form itself.

I am hoping this is possible, as it will be a use case consistent across all my projects. In short, I want to use swup transitions for changing pages, but a separate transition just for my form where the rest of the page is left unchanged.

[daun]

Good to know, thanks! Your use case — inline forms — is something we definitely want to support. I'll set up a test project to see if there's a way to do this and what's missing to make it happen.

[hirasso]

@MikeHarrison As a side note: debug is a top-level plugin option, not a fragment rule option. This should enable debug messages in your console:

import Swup from 'swup';
import SwupFragmentPlugin from '@swup/fragment-plugin';

const swup = new Swup({
  containers: ["#main"],
  plugins: [
    new SwupFragmentPlugin({
      rules: [
        {
          from: "/",
          to: "/",
          containers: ["#test-form"],
        },
      ],
      debug: true, // global option
    }),
  ],
});

[hirasso]

I think we found and fixed your issue. Or at least one possible issue:

In our tests, we noticed that fragment visits to the same URL (so, basically reloads) didn't go through, preventing the form from firing a fragment visit when it is being submitted to the current URL.

Could you install @swup/fragment-plugin@0.2.6 and test it again?

[hirasso]

We'll need to add docs about @swup/forms-plugin being required for fragment visits from forms. That's quite possibly not clear to users.

[MikeHarrison]

Thanks both for your help - that recent update to the fragment plugin has done the trick. The form is successfully submitting, and only the form fragment is refreshing on the page. Excellent! I will be working on building on this tomorrow so will shout if I hit any other issues, thanks again for your support

[MikeHarrison]

Hi,
I have been playing with this this morning, thanks for your help so far. A single form on the page is now working great, with the form submitting successfully and only the form element refreshing within the page. Awesome.

I now would like (if possible) to extend this a bit. I am working on a site with a CMS, which means that any page could have a form, and there could be any number of forms on the page. I can control the id of the forms (e.g. I can prepend all with form- for instance), to make it easier to grab them with javascript. I could also add any data tags if needed. Is it possible to update the rules within the fragment on page load, to drop in the forms that are present on the page? I have had a look at the examples and these all have the form id and the from and to hard coded.

My only other thought was it would be great if the form reverted to its original state when the page it is on is navigated away from and then back to - currently my "thanks for getting in touch" message is still displayed in this case. This behaviour is what I would expect given how Swup works, but it would be great to switch the form back to its original state somehow. Is it possible to reset the fragment?

I realise I might be pushing things too far, but have been super impressed with Swup and the support here so far so thought I would ask!

[daun]

Regarding forms on arbitrary subpages: this is something we're looking to support, but it's not currently possible out of the box. The fragment plugin assumes a deterministic URL structure. As its rules are compiled in the constructor, you also can't adjust the rules on the fly.

There's two ways this could work:

1. Allow the Forms Plugin to manually trigger a fragment visit when submitting the form
2. Extend the Forms Plugin to handle inline forms without requiring the Fragment Plugin

I can't say which of these is better — what do you think?

[daun]

The other thing about reverting the form state — I'd say that depends on how you're handling the forms on the server. Are you doing a redirect on success or outputting the result directly on the page of a POST request without redirect? You might experiment with updating the cache entry for the form page before leaving the page.

[MikeHarrison]

Hi,
Thanks for getting back to me so quickly.

In answer to your second question first, I am outputting the result on the page after a POST request. For wider context I am using this PHP-based CMS - https://getkirby.com/, and this forms plugin to handle things like validation, email sending etc. - https://kirby-uniform.readthedocs.io/en/latest/. But yes on form submission I am reloading the same page with a success message (or any errors if that is the case).

I am not really sure which of the two options in your first question would be best, Javascript isn't my strong suit so I am not sure what either would entail. In an ideal scenario (for me!) I think it would be cool for forms within Swup to work like this:

1. Add data-swup-form to any form you want to submit using Swup - like the Forms Plugin currently. This could be added to any number of forms on a page
2. When one of these forms is submitted, only the form refreshes using whatever css animation is set up
3. On refresh the current scroll position is maintained, so the user is still looking at the section of the page where the form is
4. When navigating away from and back to a page with forms, the original form state is shown (e.g. no success message). I have had a quick look at the link you shared about clearing the cache and I think this might work for this, if I check for any forms on the page and clear the cache before leaving if any are there.

[hirasso]

Hi @MikeHarrison , first of all, great to hear your ideas! This will make Fragment Plugin much more robust and flexible. We'll need to think about a good solution for this. I also had the idea at some point for a function swup.addFragmentRule() or the like, but I need to discuss it with @daun.

[hirasso]

We should definitely think about the case where there are two forms on a page that both submit to the current URL. Ideally it would be possible to tell swup to only replace the submitted form and leave the other one untouched.

[MikeHarrison]

Thanks very much for your support, if I can be of any help testing anything out please shout.

For now I am proceeding with just the forms plugin, and looking at trying to get as close as possible to my desired behaviour. I have got the cache clearing using this:

swup.hooks.on('animation:out:start', () => {
  const formsOnPage = document.querySelectorAll('.block-type-form-builder');
  if(formsOnPage.length > 1) {
    swup.cache.prune((url, page) => true);
  }
});

Which checks if the page I am leaving has any forms on it, and if so prunes the cache. Now when I return to the page the form is back to its original state., which is great.

What is the best way of maintaining the scroll position when a form is submitted, without using the fragment plugin? Would I use the form:submit hook somehow?

Edit: Actually I think I have it with this:

swup.hooks.on('form:submit', (visit, { el, event }) => {
  visit.scroll.reset = false;
});

[hirasso]

Yes, visit.scroll.reset = false; is the way to go! But maybe you actually might want to scroll to the beginning of the form, if it's a longer one. You could do this using

swup.hooks.on('form:submit', (visit, { el, event }) => {
  visit.scroll.target = '#my-form';
});

[hirasso]

A power-user tip: You can add syntax highlighting to your code snippets by adding the language after the three opening backticks, like so:

```js 
console.log('this is JavaScript');
```
```css 
body {
  background: red;
}
```

The above will render like this:

console.log('this is JavaScript');

body {
  background: red;
}

See the docs: https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks#syntax-highlighting

[hirasso]

@MikeHarrison Could you test-run the following approach, using swup's API directly:

1. Put two forms on one page, both must contain an id attribute:

<form id="form-1" data-swup-form method="POST">
  <input name="test"></input> <input type="submit"></input>
</form>

<form id="form-2" data-swup-form method="POST">
  <input name="test"></input> <input type="submit"></input>
</form>

2. Put this snippet in your JavaScript after initializing swup:

swup.hooks.on(
  "visit:start",
  (visit) => {
    const { el } = visit.trigger;
    if (!el?.matches("form")) return;

    const selector = `#${el.id}`;
    visit.containers = [selector];
    visit.animation.scope = "containers";
    visit.animation.selector = selector;
    visit.scroll.target = selector;
  },
  { priority: 1 }
);

3. Put this into your CSS:

form.is-changing {
  transition: opacity 300ms;
}
form.is-animating {
  opacity: 0;
}

If this works, we will probably add a new API attribute to the forms plugin. Maybe data-swup-inline-form or the like, that would take care of the JS automatically.

[hirasso]

...if you don't have other fragment rules defined on your site, you could uninstall @swup/fragment-plugin .

EDIT: Ah, I missed your previous answer! Yes, we also think this shouldn't require fragment-plugin at all. Need to update the docs 😄

[MikeHarrison]

That seems to be working great! This is all my swup js now:

const swup = new Swup({
  containers: ['#main'],
  plugins: [
    new SwupFormsPlugin()
  ]
});

swup.hooks.on(
  "visit:start",
  (visit) => {
    const { el } = visit.trigger;
    if (!el?.matches("form")) return;

    const selector = `#${el.id}`;
    visit.containers = [selector];
    visit.animation.scope = "containers";
    visit.animation.selector = selector;
    visit.scroll.target = selector;
  },
  { priority: 1 }
);

swup.hooks.on('animation:out:start', () => {
  const formsOnPage = document.querySelectorAll('.block-type-form-builder');
  if(formsOnPage.length > 1) {
    swup.cache.prune((url, page) => true);
  }
});

I have 3 forms on the page, and they are animating in and out individually on submit, and scroll position is being maintained. When they animate back in they are showing the success / error messages, and I am getting all the form data. When I navigate away from the page and back all the forms are reset to their original state, so the cache pruning is working.

Brilliant!

[hirasso]

Great to hear that it's working! You actually shouldn't have to prune the cache at all, since swup only caches the initial server response for each page, ignoring any changes you make afterwards. Could you try it again without the animation:out:start hook?

[MikeHarrison]

Hi - I gave it a go without the pruning and the success message was still there when I navigated away from and back to the page with the form on, so I think it or something like it is needed

[daun]

Arguably, POST requests should never be cached by swup, especially not for forms. We've created an issue to change this.

[hirasso]

@MikeHarrison We just released a new version of @swup/forms-plugin that adds support for inline forms:

https://github.com/swup/forms-plugin/releases/tag/3.2.0

Install it using

npm install @swup/forms-plugin@3.2.0

The docs also have been updated: https://swup.js.org/plugins/forms-plugin/#inline-forms

Thanks so much for your input! It's great to discover what the visit object in swup4 is capable of!