swup / forms-plugin

A swup plugin for submitting forms 📋

swup 4 is released  🎉  Check out the release notes and upgrade guide.

Swup

Versatile and extensible page transition library for server-rendered websites.

Features • Demos • Plugins • Themes • Documentation • Discussions

Overview

Swup adds page transitions to server-rendered websites. It manages the complete page load lifecycle and smoothly animates between the current and next page. In addition, it offers many other quality-of-life improvements like caching, smart preloading, native browser history and enhanced accessibility.

Make your site feel like a snappy single-page app — without any of the complexity.

Features

• ✏️ Works out of the box with minimal markup
• ✨ Auto-detects CSS transitions & animations for perfect timing
• 🔗 Updates URLs and preserves native browser history
• 🏓 Manages the scroll position between pages and anchor links
• 🚀 Uses a cache to speed up subsequent page loads
• 📡 Offers hooks to customize and extend the page load lifecycle
• 🔌 Has a powerful plugin system and many official and third-party plugins
• 🎨 Provides ready-to-go themes to get started quickly

Demos

Explore our interactive demos to see swup in action.

Documentation

Visit our official documentation to learn more.

Plugins

Swup is small by design. Extended features can be added via plugins:

• Display a progress bar while loading
• Enable smooth scrolling between visits
• Update meta tags and stylesheets after page loads
• Add support for preloading pages in the background
• Improve accessibility for screen readers
• Perform your animations in JS instead of CSS transitions
• Animate form submissions
• Get help in debug mode

Check out the list of official plugins and third-party integrations.

Themes

Get started quickly with one of three official themes: fade, slide, and overlay.

Examples

Take a look at the interactive demos and sites using swup for more examples.

Having trouble?

If you're having trouble implementing swup, check out the Common Issues section of the docs, look at closed issues or create a new discussion.

Want to Contribute?

We're looking for maintainers!   👀

Become a sponsor on Open Collective or support development through GitHub sponsors.

This project is tested with BrowserStack.

forms-plugin's Issues

Feature: support file uploads

Describe the problem

We should go ahead and implement file uploads — it's simple enough with fetch now.

Describe the proposed solution

Append attached files to the request body:

const input = document.querySelector('input[type="file"]')
const data = new FormData()
for (const file of input.files) {
  data.append(input.name, file)
}

fetch('/', { method: 'POST', body: data })

Alternatives considered

Keep recommending to use the API directly for file uploads.

How important is this feature to you?

• Nice to have
• Would make my life a lot easier
• I cannot use swup without it

plugin may not take note of any custom transition attribute?

Apologies if this is incorrect and wasting your time, I'm only beginning to get to grips with both swup and this plugin!

Before loadPage occurs in swup, it looks for event.delegateTarget.getAttribute('data-swup-transition') to add to the given loadPage({options...}), which will thus either contain the given transition or null (with null being the unset state)

Decorating the target form using this plugin (marking it up as <form [...] data-swup-form data-swup-transition="search-form"> for example) however doesn't do the same thing -- the possibility of a data-swup-transition seems absent from the onFormSubmit definition. In my case, being a search form, it's a GET, but I think the problem could apply to POST too.

Ignoring that, this plugin Just Works, which is super nice, thanks for providing it!

Contact form 7 (WP) submitting twice

Hi,
I have an issue. would appreciate your help:
Made a custom function on the submitForm event.
It works perfectly after the content is loaded with Swup, but if I reload the page (F5) and submit the form again, it is submitting twice.
I am using the CF7 plugin on WordPress, Does SwupFormsPlugin suppose to prevent the default form action and do it separately?
trying to figure out a workaround for that...

Adding my code:

const options = {
  containers: ["#page"],
  animateHistoryBrowsing: false,
  cache: false,
	plugins: [
	    new SwupScrollPlugin({
	        animateScroll: false,
	        doScrollingRightAway: true,
	    }),
	    new SwupFormsPlugin({ formSelector: 'form.wpcf7-form' }),
	]  
};

const swup = new Swup(options);

init();

swup.on('contentReplaced', init);
swup.on('submitForm', formSubmit);

The custom function sending the serialized form to a third party api:

function formSubmit(event) {

        jQuery('html').addClass('is-formsubmitting');
        inputs = jQuery(event.delegateTarget).serialize();

        jQuery.ajax({
            type: 'POST',
            url: ajax_custom.ajaxurl,
            data: {
                action: "send_data_to_iplan",
                inputs: inputs
            },
            success: function (data) {
                console.log(data);
                if(!data.includes("ok") || data.indexOf("ok") <= 0){
                    $message = 'error ha accrued;
                    console.log('this is the reason the message failed:' , data);
                }
            }
        });

}

Thank you!

Submitting to same URL results in error

I believe I've narrowed down a bizarre behavior…

There's a moment in the loading cycle where forms with the same action param as current current page path, NaN appears in the address bar (usually only a few ms, presumably corresponding to the length of the network request).

In our case, those forms redirect after submission (when successful), but in cases when they don't, and the final URI is the same as the current page, Swup ends up dumping the user down to a regular page load with /NaN as the URI.

I've combed through the source (here and the main Swup library) trying to identify where this might come up (i.e. just an odd string concatenation), but haven't found anything yet.

Opening in the event someone else has experienced the same thing, and has a recommendation… or maybe I'm just doing something wrong!

Edit: P.S. THANK YOU for Swup, it's absolutely brilliant!

Improve detection of form submission into new tab

As decribed here, we need to find a way to detect if a form submission was sent to a new tab.

This behavior is natively supported by Chrome and Safari on MAC by holding down the Meta (command) key and by Edge on Windows by holding the Control (ctrl) key. There exists an extension for FireFox that makes the same thing possible.

My first idea would be to use document.visibiltyState. Opening a new tab should hide the current tab, right? I will test this out.

Feature: support overriding form behavior from submitter element

Describe the problem

HTML allows overriding the form action, method and target from the submit button itself. Clicking the first submit button will submit a GET request, clicking the second button will submit to /search:

<form action="/" method="POST">
  <input type="submit" formmethod="GET" value="Submit as GET">
  <input type="submit" formaction="/search" value="Submit to /search">
</form>

Describe the proposed solution

Check for the SubmitEvent's submitter property and deduce the final form behavior from there, if present.

Alternatives considered

None, really, if we want to comply to current standards

How important is this feature to you?

• Nice to have
• Would make my life a lot easier
• I cannot use swup without it

Improve detection of new-tab submissions

• Currently, we're checking for event.metaKey to detect form submissions into a new tab
• That property is however not present on SubmitEvent
• The behavior is also not universal across browsers or operating system
• We should do some research into whether this is required and how to properly detect it

Error "_Link.Link is not a constructor" when submit form

Describe your issue:
Using symfony/ux-swup from https://github.com/symfony/ux-swup that's also uses swup/forms-plugin and can't get my form to works with swup : error pop in console and page reload like regular form.

Swup config or any additional relevant code used:

• Default configuration from symfony/ux-swup
• Demo available here : https://github.com/Err0r404/swup-demo

Generated form

<form name="contact" method="post" data-swup-form="data-swup-form">
            <div class="form-group"><label for="contact_name" class="required">Name</label><input type="text" id="contact_name" name="contact[name]" required="required" class="form-control" value="John Doe"></div>
            <div class="text-right">
                <button role="button" type="submit" class="btn btn-lg btn-primary">Send</button>
            </div>
            <input type="hidden" id="contact__token" name="contact[_token]" value="OnuzpBXVIllIVz9LFel1toXlt1ORvZo9E7a9kBNDsik">
</form>

Error in console

Uncaught TypeError: _Link.Link is not a constructor
    at FormPlugin.onFormSubmit (index.js:78)
    at HTMLDocument.<anonymous> (delegate.js:73)

Before creating this issue, did you think of...:

• Have you checked closed issues for similar/related problems.
• Have you provided all helpful information available?
• Have you considered creating a demo so we can help you better?

Override focus element for inline forms

Describe the problem

• Inline form visits should either not move focus or move it to the beginning of the form

Describe the proposed solution

• Set the new visit.a11y.focus option to the form id, if present

How important is this feature to you?

• Nice to have
• Would make the life of screen-reader users a lot easier
• I cannot use swup without it

Bug: Consecutive submissions trigger full page reload

What did you expect? 🧐

Submitting a form twice in a row should trigger swup visits for both submissions.

What actually happened? 😵‍💫

Only the first submission triggers a swup visit, the second submission triggers a normal browser navigation. This was first reported by @madison-swell in discussion #866.

Swup and plugin versions 📝

• swup: 4.5

What browsers are you seeing the problem on? 🧭

No response

Relevant log output 🤓

No response

URL to minimal reproduction 🔗

https://swup.swelldev.com.au/?s=

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for related problems
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

Doesn't submit textareas

• Currently only submits input and select elements