Form alerts

I have tended to ignore the form alert custom classes, but decided to have a play just now and the options are practically limitless if you want to impress with small touches on your website. You can even add custom images as a background.

It’s a reminder that Blocs has a lot of power under the hood that is easily accessible with standard Bootstrap classes via the class manager with no need to code. N.B This is purely a test and I’ll probably do something more subtle!

6 Likes

Hi @Flashman. Thanks for sharing/reminding. If there’s one thing which I’ve never given but deserves some :heartpulse:, it’s the alerts.

1 Like

Hello @Flashman, I was actually wondering how this is done and came across your thread, thank you very much, very thoughtful of you. So how does it work, does the ‘Your message has been sent’ alert appear under the Send button once you press the Send button and the message has been transmitted?

Do you assign the class to the Send button?

There is no need to apply any class to specific areas on the editing canvass. Simply open the class manager and click the + sign to find new options then scroll down to Alerts like you see in the screenshot earlier.

Once that has been added you can open the class inside the class manager and apply styling like choice of font, colours and the rest. You can do the same thing for warnings as well to let visitors know if they have not added a correctly formatted email for example/

You are working blind to an extent when styling, however you can see the results in preview mode by pretending to send an email and then go back to make class adjustments if needed. The message appears under the send button automatically.

When you have made this change it will automatically apply to all contact forms across the site, so it is quite efficient in that sense.

1 Like

Thank you @Flashman, I really appreciate the detailed and clear explanation.

Since its just using the Bootstrap Alerts, you can add a div and apply the alert class for success, and style visually. Then delete the Div.

I am having trouble incorporating the alert. I followed the instructions by @Flashman carefully but when I fill-in the form and send it, I do not get an alert and the pressing the submit button seems to to reload the page and go right to the top of the page where I’ve placed an image - I have set the submit button to ‘Submit Form’ under interactions.

Also, I set the send email to my own gmail address but I am not receiving any emails when I submit a form.

Any help will be appreciated.

Is the website online or are you just trying this inside Blocs?

I was trying this from within the Blocs preview but realise that it may need to be hosted before it can work.

Just identified the problem with my form, my fields were sitting outside the form. As soon as I dragged them in the form, it has started to work and now I am getting the alert messages.

Thank you for attempting to help me @Flashman