Contact Us Adding A Reset Form Option with Styled Of The Submit Button

I was working on enhancing my contact page by adding a reset button that would allow users to clear the form fields easily. My goal was to ensure that this reset button matched the styling of the submit button to maintain a consistent look and feel throughout the form. After experimenting with different scripts, I aimed to ensure that the reset button effectively cleared the form without reloading the page, while retaining the default Fluent Forms’ submit button styles for a seamless user experience. This functionality is specifically designed to work with Fluent Forms.

This is a easy script to do.

First we need to add a html block and go into text edit and add this html to it:

This will pull the default button style, but if you customize it in the preview section you will need to customize the next section.

Reset

This is the CSS:

If you set a width on th esubmit button you will need to manually add this to the Custom CSS section in the form settings.

.ff-btn-submit.reset-btn {
    width: 100%;
}

This is the javascript that will cause the form to reset:

This will reset the form.

const refreshButton = document.querySelector('.reset-btn');
const refreshPage = () => {
  location.reload();
}
refreshButton.addEventListener('click', refreshPage)

Final image of form with reset button.

Author: WP Scriptly, Admin at WpScriptly

Hey, I’m Scot, the guy behind WpScriptly. I create simple, no-fluff WordPress plugins and tools to make your site easier to manage and more powerful. Everything I build is tested on my own projects first — if it’s here, it’s because it works. Thanks for checking out the site. Hope you find something useful at Wp Scriptly.

Recent stories by WP Scriptly:

1. Add Reading Time with a Clock Icon in WordPress – Easy, Lightweight Plugin - Plugin
2. Are Code Snippets Still Worth It? Learn Why Custom Coding Isn’t Dead - Blog
3. Customize the “Read More” Button in Kadence with Ease - Plugin
4. Where to Find Free SVG and PNG Icons for Your Website or App - Blog

*These scripts and plugins are provided as is with no guarantees or warranties. If you need assistance or run into issues, feel free to reach out via the contact page.