Problem with form validation

Bootstrap Studio Help
1

Hi,

Today I have a problem with form contact validation.
1/ I create a new design based on ‘Agency’ template
2/ In contact section, I toggle on the SmartForm in form option, and had a valid email.
3/ All inputs are marked as ‘required’
But this last point not working.
I can submit the form leaving blank fields… except for the name
I don’t understand why ?

A last thing, why I can’t change the title of this template ?

Thanks

2

Required fields are validated on client side. So, by chance, didn’t you listen to the click event of the submit button, then use preventDefault? If yes, this leads to bypass the default behavior and you have to provide your own inspection. If you want to still trigger the default validation and add your own process, you will instead listen to the submit event of the form.

Regarding the <­title­> tag in <­head­>, I’m using the Agency template and I was able to change it in Settings / SEO / Title.

4

First thanks for your reply,I was starting to despair of having one. and sorry for my english because I’m French.

So I try to explain as best I can do…

  • Open BSS, and select File>New Design> and chose the ‘Agency template’, then click on [Create] button.
  • In the ‘Overview’ panel on the left, click on the ‘vForm #ContactForm’
  • Next on the rigth, go to the options panel and toggle ON the smart form
  • chosse a valid email in Recipient
  • OK Now go to : ‘Settings / SEO / Title’ and change the Title as you want
  • Save it and publish it or preview it

THIS IS THE END

And now, you can verify

1/ You can click on the ‘SEND MESSAGE’ button leaving fields blanked. (You will have an error only if you don’t type a name, but after have posted it).

2/ Back in BSS (or not) you can see in ‘HEAD’ content that the ‘Title’ is alway ‘Home Brand’ ! not what you choosed before in SEO Settings !!!

Because I’m new in BSS, I need to understand…

Bests regards

1 Like
5

The title home Brand is not the seo one, you need to edit it, just click on it, press enter and write the new title.
As for the fields of the email form, you need to define required or not, this is on the right side, you will have to click one by one and define required for the ones you want.
I suggest you do the tutorial, program documentation.

6

Hi gilmar and happy to meet you, I read a lot of posts where you intervened.

For the title ‘home Brand’, sorry but I don’t see where you can do that. In fact, it seems to be locked. But if you can explain me, I will be happy.

Here what I want to change v

ccc
ccc980×282 71.6 KB

Same for the fields requiered. If you do the steps that I wrote you will can see that all fields are REQUIRED by default.

So what ?

7

I can see this later for you, I’m not at the computer right now. There are two SEO in bss, one in project configuration, one in each html, right click on the html file, it will open a drop down menu, I think it’s in properties.

8

For the title you gave me the solution. Well done !! and thank you so much !! (We had to find…)

9

The form in the agency template has a data attribute novalidate, remove that attribute in the attributes panel, then it will work as you want

10

Delete the novalidate and it will work

image

11

Lol, You beat me to it :slight_smile:

12

@richards
Yours was better with a picture :upside_down_face:

1 Like
13

My explanation must have been a spectacle!
I’m Brazilian, so I Google translated from Portuguese to English, then you translated from English to French, kkk.
Sorry if something was confusing.

14

Thanks to all of you !
With the picture it is more easer to understand for me.
Everything is OK now.
I’m Happy :wink:

a last thing, in the setings, I select ‘French’ for the language, but wen I check my page with “w3c validator” web site I have this Warning :

Warning: This document appears to be written in French. Consider adding lang="fr" (or variant) to the html start tag.

From line 1, column 16; to line 2, column 6

TYPE html>↩<html>↩↩<hea

Did I need to put it manualy in the header ?

15

Pass the link of your website, it is better to check.

16

Here the link : dsi50.fr
But I was thinking that chose ‘French’ in BBS Design settings will do the job… But no…

17

If you forgot to switch on Update existing Pages when you selected your language then do it again and first select not chosen then the switch will show up again then choose french and switch on the Update Existing Pages and the lang attribute will be added to the HTML tag.
Or do it your self like this

french
french1920×1029 76.5 KB

18

Thanks kuligposten
Because I have no switch for ‘Update existing Pages’ I change the language into “English” and I can see it now. So I swicth it on and save, then change again on French, re switch it on and save it.
Now it is Perfect !
Thanks

19

Exactly as the @kuligaposten said.

tela
tela2560×1080 156 KB

20

The placeholders in the form are very light on the white background
you can chane the placholders color like this

CSS

section#contact .form-group input.form-control::placeholder {
  color: rgba(0,0,0,0.8);
}

section#contact .form-group textarea.form-control::placeholder {
  color: rgba(0,0,0,0.8);
}

You could also add a favicon in the settings

21

You’re welcome. I’m French too. For the rest, I see you had help from all over the world :yum: