Hi there!
I built a simple contact form and I would like to show the thank you message on the same page without redirecting to another page.
I have found several tutorials but I don’t understand how to enable only when the form has been sent and went through.
Could someone please help show me how to code this?
Have a look at the screenshots, please.
Thank you
P.
Hey! if you have a button inside of the submit form, then you can set the type attribute of that button to button and then it wouldn’t refresh the page.
Could you please help me with the code?.. or If you have any tutorials to share…
<form>
<button type="button">submit</button>
</form>
but keep in mind that if you do this, the form will not be submitted if you click the button.
can you please show your code?
I meant with JS that enable ( show and hide) the thank you message. See the screenshot.
thank you so much.
do you want the thank you to show up after submitting the form successfully, or just after clicking the submit button?
in that case, you can take a boolean variable, when the variable is set to false…the thank you will not show. when it’s true, only then the thank you will show. you have to bind the thank you element/block with your condition.
After the message was sent! May I ask you to show how to do that? Or eventually share a tutorial?
If you have experience with javaScript, i would suggest you to do something like this.
javaScript allows you to toggle(add something if it doesn’t exist , remove it if it does) classes on any elements.
So you can create a CSS selector hidden and toggle it using js whenever your button is clicked.
Here’s the code:
//HTML
<form>
<input />
<button type="button" id="myButton">submit</button>
<div id="thankYou"> thank you </div>
</form>
//CSS
.hidden{
display: none;
}
//JS
const button = document.getElementById("myButton")
const thankYou = document.getElementById("thankYou")
//whenever the button is clicked, toggle the ".hidden" class
button.addEventListener("click", ()=>{
thankYou.classList.toggle("hidden")
})
Hope this helps! 
Oh Great! Let me try it 
Here is the form code
<div class="form-bottom-label">
<p>NO SPAM! La odio quanto te</p>
</div>
</form>
<div class="thank-message">
<h2>Thank you</h2>
</div>
the mentioned code should work without depending on response.
One last thing
This the original from Get Response:
This is your:
submit
Is this correct?
<input type=“submit” id=“myButton” value=“Subscribe”/>
Tnx again
Have at look the codepen. The message is not hidden
Do you want message be hidden when page loads at the first time?
Just add class hidden to your div in HTML if that’s the case
<div id="thankYou" class="hidden"> thank you </div>
Because toggle here works perfectly as it should
check this.
Have a t look the page online
The strange thing is the “thank you message” is not hidden by default - but if test local it works
