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

By WP Scriptly

292 days ago

Aug 2024

🕑 2 min read

👁 Views: 1,445

(0) Leave a Comment

Function - WpScriptly

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.

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.

*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.

Comments: