form-block weird contact form text after hitting send

hey guys
I am currently updating my own website and i was testing out my contact form. I realized after filling out the form and hitting send, i get a weird instance where the entire contact form wording shows up without the boxes to fill it and at the bottom is my "thank you for filling out the form" message. why am i getting the entire contact form wording after hitting send??

the post submit doesn't have anything else but that thank you message i mentioned above 

it's something to do with my 2 column code and someone mentioned its the

#collection-663303ab277bab3ab56122c1{
.field-list {
display: flex;

i dont want to lose my 2 column for my form block, is there another way to fix this? 

9 minutes ago, Pally said:

#collection-663303ab277bab3ab56122c1{
.field-list {
display: flex;

Have you closed the brackets on this code in your CSS?

I have yes... 

this is what i have:

/* column contact */
#collection-663303ab277bab3ab56122c1{
.field-list {
display: flex;
flex-wrap: wrap;
}
/* These will be Full Width*/
.form-item:nth-child(6), .form-item:nth-child(7), .form-item:nth-child(8), .form-item:nth-child(5), .form-item:nth-child(10) {
width: 100% !important;
}
/* These Will Be Beside Each Other */
/* LEFT */
.form-item:nth-child(1), .form-item:nth-child(3) {
width: 48%  !important;
margin-right: 4%;
}
/* RIGHT */
.form-item:nth-child(2), .form-item:nth-child(4) {
width: 48%  !important;
}
}

Can you share your website URL so I can test it myself?

17 minutes ago, Ziggy said:

Can you share your website URL so I can test it myself?

yes, its https://oneightydesigns.ca/enquire

I'm really not sure what's going on there. It looks like you have a lot of custom coding, what happens when you disable that in safe mode?

34 minutes ago, Ziggy said:

I'm really not sure what's going on there. It looks like you have a lot of custom coding, what happens when you disable that in safe mode?

nothing changes. i have already removed a ton of custom coding actually, but i dont want to delete this one because i like that it gives me 2 columns 

so not sure what to do.

i believe i got this code from @Rebecca_Grace_Designs

Place Two Items Beside Each Other in a Form | Rebecca Grace (rebeccagracedesigns.com)

Hi rebecca, would you know why im seeing the form text after submitting?

1 hour ago, Pally said:

 i have already removed a ton of custom coding actually, but i dont want to delete this one because i like that it gives me 2 columns 

Hi @Pally Ziggy means to check your site in safe mode. This will let you know if the issue is due to a script or not. You can see how to do that in this video here by sam

However, if you think the issue is from a specific piece of code, then you should test to confirm first. If you don't want to disrupt your live website, you can duplicate the page without the code, and see if that form behaves the same way.

Otherwise it is difficult to find a solution if the cause hasn't been identified yet. Let us know how it goes!

1 hour ago, melody495 said:

Hi @Pally Ziggy means to check your site in safe mode. This will let you know if the issue is due to a script or not. You can see how to do that in this video here by sam

However, if you think the issue is from a specific piece of code, then you should test to confirm first. If you don't want to disrupt your live website, you can duplicate the page without the code, and see if that form behaves the same way.

Otherwise it is difficult to find a solution if the cause hasn't been identified yet. Let us know how it goes!

thanks melody. yes i said above that nothing changes. the issue is from the code i pasted above. when i removed the code completely, the form works fine. 

47 minutes ago, Pally said:

thanks melody. yes i said above that nothing changes. the issue is from the code i pasted above. when i removed the code completely, the form works fine. 

I have tested the code you've linked in the blog post above, and I cannot reproduce the issue you are seeing. Do you have other code modifying the form?

Just for a sanity check... what is in your post submit? in the settings.

2 minutes ago, melody495 said:

I have tested the code you've linked in the blog post above, and I cannot reproduce the issue you are seeing. Do you have other code modifying the form?

Just for a sanity check... what is in your post submit? in the settings.

Weird. When I remove this entire code: 

/* column contact */
#collection-663303ab277bab3ab56122c1{
.field-list {
display: flex;
flex-wrap: wrap;
}
/* These will be Full Width*/
.form-item:nth-child(6), .form-item:nth-child(7), .form-item:nth-child(8), .form-item:nth-child(5), .form-item:nth-child(10) {
width: 100% !important;
}
/* These Will Be Beside Each Other */
/* LEFT */
.form-item:nth-child(1), .form-item:nth-child(3) {
width: 48%  !important;
margin-right: 4%;
}
/* RIGHT */
.form-item:nth-child(2), .form-item:nth-child(4) {
width: 48%  !important;
}
}

the form works amazingly but I lose my two columns. I did a test form submission when I removed the code and it was fine.
 

and post submit I get “thank you for filling out I’ll be in touch shortly” 

4 minutes ago, melody495 said:

I have tested the code you've linked in the blog post above, and I cannot reproduce the issue you are seeing. Do you have other code modifying the form?

Just for a sanity check... what is in your post submit? in the settings.

The other code I have is custom

font for button 

20 minutes ago, Pally said:

#collection-663303ab277bab3ab56122c1{
.field-list {
display: flex;
flex-wrap: wrap;
}

The display: flex is overriding the display: none which should hide the form on post submit. 

The form on my test site handles the post submit differently to yours, therefore is not affected by the side-by-side code. I'm not sure why though without looking into it further. Is it a form block issue? The way the form is set up? Other custom code? Hmm is there a new beta version of form block that you are using?

3 hours ago, melody495 said:

The display: flex is overriding the display: none which should hide the form on post submit. 

The form on my test site handles the post submit differently to yours, therefore is not affected by the side-by-side code. I'm not sure why though without looking into it further. Is it a form block issue? The way the form is set up? Other custom code? Hmm is there a new beta version of form block that you are using?

okay i removed that display:none; and i tested it out again but the form still gives me the text. so i dont think thats it.

11 hours ago, Pally said:

okay i removed that display:none; and i tested it out again but the form still gives me the text. so i dont think thats it. 

Hi, you shouldn't remove the display: none, as that is what should be hiding the form fields on post submit. Anyway the display: none is a Squarespace CSS, you can't remove it. Is it something else you removed?

It is difficult to diagnose from the outside. But from what can see from the outside, the display: flex is overriding the Squarespace's display: none. That might be a symptom rather than the cause, can't say for sure without looking further. 

1 hour ago, melody495 said:

Hi, you shouldn't remove the display: none, as that is what should be hiding the form fields on post submit. Anyway the display: none is a Squarespace CSS, you can't remove it. Is it something else you removed?

It is difficult to diagnose from the outside. But from what can see from the outside, the display: flex is overriding the Squarespace's display: none. That might be a symptom rather than the cause, can't say for sure without looking further. 

The display:none is for the auto scroll list for my portfolio. But I added it back as it didnt make a difference 

how can we look further? That’s why I posted it here as sqsp support said they cant troubleshoot code. 

anyway thanks for your help!

1 hour ago, Pally said:

The display:none is for the auto scroll list for my portfolio. But I added it back as it didnt make a difference 

how can we look further? That’s why I posted it here as sqsp support said they cant troubleshoot code. 

anyway thanks for your help!

Add me as a Contributor with Admin access to your website, so I can see what's going on. My email is in my signature below.