Jump to content

Post-submit Lightbox form code for text positioning / page size and redirect

Go to solution Solved by Beyondspace,

Recommended Posts

Posted (edited)

 

https://www.tsiricos.gr/propertytest

Squarespace 7.1 Business

Forms, Lightbox

 

"Inquire about this property button", bottom of the page. 2 issues

 

I have added the following code to the post-submit HTML field to dub as a "thank you" note.

<h1 style="color: #000000; text-align: center;">Thank You</h1><h3 style="color: #000000; text-align: center;">Your request has been received. We usually respond within 24 working hours</h3><p1 style="color: #000000; text-align: center;">This is an automated message. You will soon be redirected back to continue browsing the properties or you may <a href="https://www.tsiricos.gr" style="color: #000000; text-decoration: underline;"> return to our main website</a></p1>

a) The post submission "Thank you....." text starts WAY too low (middle), the thank you "page" is WAY too big and the "thank you" page focuses on the "Thank you..." message. As a result, not even the close button is visible and you need to scroll up.

Hiding the form title didnt do the trick.

 

I need help to somehow bring the "thank you..." text closer to the top and make the entire "thank you page" smaller.

Screenshot (142).png

 

Screenshot (143).png

 

b)  In the same box I try to run the following script which otherwise works elsewhere. Is it not compatible there and if so, is there another way to redirect with code from there? I don't want to automatically redirect to another page using the "redirect" tab.

 

<script>
         setTimeout(function(){
            window.location.href = 'https://www.tsiricos.gr';
         }, 8000);
</script>

 

 

Edited by takis-7124
added pics
Link to comment
  • Solution
41 minutes ago, takis-7124 said:

 

https://www.tsiricos.gr/propertytest

Squarespace 7.1 Business

Forms, Lightbox

 

"Inquire about this property button", bottom of the page. 2 issues

 

I have added the following code to the post-submit HTML field to dub as a "thank you" note.

<h1 style="color: #000000; text-align: center;">Thank You</h1><h3 style="color: #000000; text-align: center;">Your request has been received. We usually respond within 24 working hours</h3><p1 style="color: #000000; text-align: center;">This is an automated message. You will soon be redirected back to continue browsing the properties or you may <a href="https://www.tsiricos.gr" style="color: #000000; text-decoration: underline;"> return to our main website</a></p1>

a) The post submission "Thank you....." text starts WAY too low (middle), the thank you "page" is WAY too big and the "thank you" page focuses on the "Thank you..." message. As a result, not even the close button is visible and you need to scroll up.

Hiding the form title didnt do the trick.

 

I need help to somehow bring the "thank you..." text closer to the top and make the entire "thank you page" smaller.

b)  In the same box I try to run the following script which otherwise works elsewhere. Is it not compatible there and if so, is there another way to redirect with code from there? I don't want to automatically redirect to another page using the "redirect" tab.

 

<script>
         setTimeout(function(){
            window.location.href = 'https://www.tsiricos.gr';
         }, 8000);
</script>

 

Try adding to Custom Css

.react-form-post-submit .form-submission-text.form-submission-text--align-center {
  display: none;
} 

.react-form-contents--submitted  #checkbox-bd72841e-9c7c-4716-91c3-5c01d4354da9 {
  display: none;
}

.react-form-contents--submitted  #textarea-yui_3_17_2_1_1719936368539_6434 {
  display: none;
}

.form-contents .react-form-post-submit .react-form-post-submit--vertical-align-center{
  justify-content: flex-start;
}

 

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

My testing

image.thumb.png.3b7ec3e3d20355887747847bd5a6bc9b.png

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

In case you want to redirect to another page after submitting the form, have you tried used this feature yet?

image.thumb.png.f144eb80b00880092024e33a20124210.png

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
6 minutes ago, Beyondspace said:

In case you want to redirect to another page after submitting the form, have you tried used this feature yet?

image.thumb.png.f144eb80b00880092024e33a20124210.png

Yes but its not what I want for this one.  Solution for the first works like a charm. No idea how you managed to track that one. Will be a serious headache to retrack it on the other pages. Thanks

 

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.