Streaming live at 10am (PST)

Success message always appears after form


#1

Working on my first Webflow site and having a hard time understanding how the Success message works--where its placed before and after the form submit.

Right now, it seems that it appears fine after the submit (on top of the form, as desired), but is also visible when the form hasn't been submitted yet:

https://webflow.com/design/metrical?preview=dbd917f8e5adc7597c57707eb0af7244

Any suggestions on how to hide the Success message until after the form submit?


#2

I had the same issue. I had to create new form, clean the css classes of the previous one and start again. I have no idea why that works that way. And btw... the current form settings are too complicated. I understand it's cause you want have a control over those first 100 forms free, next $10 etc stuck_out_tongue_winking_eye


#3

Hi @aagha and @bartekkustra it's because you set the Success message block to Display: Block. Select the success message and clear the Display property by clicking on the blue "Display" label.

The reason why this happens is because we set Display: None on the success message until the user has submitted the form. If you set it to Display: Block it will override that Display None property.


#4

Thanks @thesergie! That got me 50% of the way there. However, now when I submit the form, the success message doesn't show up on top of the form like I want it to--and like it was.

is the solution to set Display to none, but then set an absolute position for the Success message block?


#5

@aagha Sorry if I was confusing. What I wanted you to do is click on the blue Display text and Remove the style. Then it will behave like it should.

It's best to leave the Display property alone (don't set it) for the Success block because we automatically set it to Display: None when the form has not been submitted and set it to Display: Block when it is submitted. This is done automatically so you don't have to.


#6

Interesting @thesergie, I did as you suggested and it worked, thanks(!) but is "Remove this style" different from having "None" as a value for Display?

Thanks again for your help!


#7

Glad to help! Yeah they are very different. Having "Display: None" set will make it do what it says - Display none of the selection. If you don't have anything set the label for the property will be Grey instead of Blue, then it will default behavior. Usually the Display default value (when it is not added to the class) is Block, but in the case of the forms we do some magic to show and hide the Success message in different contexts.


#8

I noticed, that when you add a custom class to style the success and error message it adds display block as a style automaticly. Even do i haven't enabled it.

You can take it away by remove this style, you can see it has been added by the blue color.

@thesergie it seems this is sort of a bug inside webflow?


#9

That's odd @robinks. You must have added the display block somehow? I just tested it on my end by creating a new site and adding a form. Everything seems to work fine: http://quick.as/p2kjhvxv


#10

I am having he same problem with the form on my site, the success message does not show while I am in the designer but contently shows when it is published.

I am unable to set the display settings, it is ghosted and tells me, You cannot change these setting on forms.

Please let me know how I can fix this?

https://preview.webflow.com/preview/redsift-4-0?preview=5e6b3026f2381ccc50b89c5b3dd1782e


#11