Jump to content

Refresh form after submission without reloading the page

Recommended Posts

Posted (edited)

I have added a very simple form block to a page of my site. The form only has one field — to enter a simple text message — with a "submit" button.

I'm looking for a solution that allows users to type a message, submit the form, and after submit the form auto-refreshes without having to reload the page. Basically, I need users to be able to submit the form multiple times without reloading the page. Is this possible?

Thank you for your help!

Screenshot 2024-07-04 at 8.47.24 AM.png

Edited by FortWest
Link to comment
  • Replies 10
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

This method would refresh the page, but automatically rather than a manual refresh (if this isn't what you want please feel empowered to ignore this!)

If you set the post-submit URL as the same page the form is on, when you click submit it will send, then refresh the page and form allowing someone to submit multiple messages.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Thank you for the response, Ziggy — Unfortunately that wont work for me. There will be a live stream on the page (via embedded Vimeo), and we need to have a one-way submission form for the viewers to send notes to the live stream performer. 

So, we need a way for them to be able to submit multiple messages without the page reloading. 

Link to comment
  • 4 weeks later...
On 8/14/2024 at 11:04 PM, FortWest said:

Checking in @tuanphan. Do you think this is something you can help me with? Thank you!

 

Sorry, did it some days but forgot your thread url to give code

You can use this code to Website Tools > Code Injection > Footer

<script>
  $('button[type=submit]').on('click', function () {
  checkSubmitSuccess($(this).parent().parent())
});

function checkSubmitSuccess(formElement) {
	console.log(formElement)
  var i = 0;
  while (i < 10) {
    (function (i) {
      setTimeout(function () {
        if ($(formElement).hasClass("react-form-contents--submitted")) {
        	console.log("Hereee")
          i = 10
          window.location.reload()
        }
      }, 1000 * i)
    })(i++)
  }
}
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

you could simply set the value of the input field to nothing every time the submission is made.

This would potentially require a custom text field instead of the squarespace form, or you could use event.preventdefault, to stop the initial submission and then add your own submit logic.

Edited by DesignerLeo
Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.