Jump to content

How can I change the 'submitting...' form button text?

Recommended Posts

On 4/10/2022 at 9:50 AM, seonto said:

Site URL: https://www.seonto.kr/order

Hi there.

I want to change the form button title after click it.

When I click the submit button (the blue one), "submitting..." title is shows on.

I want to change that title to some texts.

If there's no way, I want to remove the submitting button. (not submit button)

Here's my website page, and PW is 1254. I need your helps!

https://www.seonto.kr/order
 

section[data-section-id="624bcec43c713c27b2e782d0"] section[data-section-id="624bcec43c713c27b2e782d0"].submitting input.button {
  visibility: hidden;
}
section[data-section-id="624bcec43c713c27b2e782d0"] .form-button-wrapper {
  position: relative;
}
section[data-section-id="624bcec43c713c27b2e782d0"] .submitting .form-button-wrapper:after {
  content: 'your word';
  position: absolute;
  display: block;
  z-index:99999;
  left:50%;
  top:50%;
  background:  rgb(155,195,195);
  padding: 5px;
  transform: translate(-50%,-50%);
}

Let me know how it works on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 4/11/2022 at 8:01 PM, bangank36 said:
section[data-section-id="624bcec43c713c27b2e782d0"] section[data-section-id="624bcec43c713c27b2e782d0"].submitting input.button {
  visibility: hidden;
}
section[data-section-id="624bcec43c713c27b2e782d0"] .form-button-wrapper {
  position: relative;
}
section[data-section-id="624bcec43c713c27b2e782d0"] .submitting .form-button-wrapper:after {
  content: 'your word';
  position: absolute;
  display: block;
  z-index:99999;
  left:50%;
  top:50%;
  background:  rgb(155,195,195);
  padding: 5px;
  transform: translate(-50%,-50%);
}

Let me know how it works on your site


Hi @bangank36

Thank you for helping me!
Your codes is works but not 100% ;(

I think older submitting button title still alive!

 

스크린샷 2022-04-12 오후 10.13.24.png

Link to comment
On 4/18/2022 at 5:38 PM, tuanphan said:

@seonto Have you solved it yet?

Yes.. I need your help.

I think that codes just cover the older submitting button. So I should use more longer words than "submitting..." words.

And I have other submit buttons on the website with different button layout too.

ex 1. https://seonto.kr/letter
ex 2. https://seonto.kr/journal/news

So if you let me know how to change the submitting title or delete it, I'll really appreciate!

Edited by seonto
Link to comment
  • 1 year later...
On 4/11/2022 at 8:01 PM, Beyondspace said:
section[data-section-id="624bcec43c713c27b2e782d0"] section[data-section-id="624bcec43c713c27b2e782d0"].submitting input.button {
  visibility: hidden;
}
section[data-section-id="624bcec43c713c27b2e782d0"] .form-button-wrapper {
  position: relative;
}
section[data-section-id="624bcec43c713c27b2e782d0"] .submitting .form-button-wrapper:after {
  content: 'your word';
  position: absolute;
  display: block;
  z-index:99999;
  left:50%;
  top:50%;
  background:  rgb(155,195,195);
  padding: 5px;
  transform: translate(-50%,-50%);
}

Let me know how it works on your site

Hi. after SS changed the form list systems, this codes didn't works any more ;(
Could you let me know for a new version? Thank you!

Link to comment

Hi. After SS changed the form list system, my submit button (the mint one) ignore the codes.
I used this codes to changed the submitting button text. ("submitting" to "전송 시도 —")
I have a three submit button in my website. and want to change all of it.

https://seonto.kr/order
https://seonto.kr/return
https://seonto.kr/ask

If you have another codes for new form system, please share to me. Thank you 🙂

	/* submit button - change the button text */


		.submitting input.button,
			{
  				visibility: hidden !important ;
			}
	

		.form-button-wrapper,
			{
 				position: relative;
			}


		.submitting .form-button-wrapper:after,
			{
  				content: '전송 시도 —' ! important ;
              	font-size: 14px !important;
  				position: absolute;
  				display: block;
  				z-index:99999;
    			left:50%;
  				top:50%;
  				background:  rgb(155,195,195);
  				transform: translate(-50%,-50%);
              	color: #000000 !important ;
              
                padding-top : 9px !important ;
                padding-bottom : 9px !important ;
              	padding-left: 15px !important ;
                padding-right: 15px !important ;
              
			}

 

Link to comment

I do not have a solution but some observations. Apparently SS has removed the class for the submitting state of the button. SS now only changes the value attribute on the input.

Without the state class you'd probably be looking at a MutationObserver which are not easy.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 5/22/2023 at 2:36 AM, creedon said:

I do not have a solution but some observations. Apparently SS has removed the class for the submitting state of the button. SS now only changes the value attribute on the input.

Without the state class you'd probably be looking at a MutationObserver which are not easy.

@creedon Okay.. I check your hyper link and read about MutationIbserver, but I can't understand at all 😂 then it is impossible to hide a submitting button now?

Link to comment
2 hours ago, seonto said:

then it is impossible to hide a submitting button now?

I think the short answer is yes in your context.

You can not do what you did before because SS removed the elements that allowed you do what you did.

But totally impossible is not correct. It looks impossible with CSS alone. Probably doable with JavaScript and MO.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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.