uiterlijk button

Onderaan een contactformulier staat een verzendbutton.

De css van deze button is:


Als ik de button bekijk in de browser is deze niet zo hoog als ik zou willen.

Als ik op "inspecteer element" klik zie ik dat er door sommige eigenschappen een streep staat. (zie bijlage)
Deze neemt hij dus niet over zodat de button er niet uitziet zoals ik zou willen.

Klopt, die worden blijkbaar overerfd.
Als je met 'element inspecteren' de knop bekijkt, dan moet je ook zien welke stijlen dat zijn.
Het waarschuwings-teken geeft ook veel duidelijkheid.

Let erop dat als je de stijl gaat aanpassen, dat je dit NIET in de bestanden van externe third-party scripts doet, zoals Bootstrap, jQueryUI etc...

Let ook op die rondzwervende punt-komma.

Zo zag de button er eerst uit (zie bijlage)

De button had in de html pagina deze code:
<input class="sendButton" type="submit" name="Submit" value="Verzend">

Ik heb zelf een google recpatcha aan dit formulier toegevoegd (zo waar zonder hulp deze keer, lol)
En deze recaptcha werkt nog ook!

Hierdoor heb ik de code van de button in de html pagina aangepast naar:
<button type="submit" class="g-recaptcha sendButton" data-sitekey="6LcqaYsaAAAAAOiin61E0H01CPnTFKG_VUfFRh_2" data-callback="onSubmit">Verzend</button>


Dat "sendButton" is hetgene wat het uiterlijk bepaald van de button.
Als ik "g-recaptcha" weghaal bij de class werkt de recaptcha niet meer.
Maar als ik dat toevoeg, veranderd de button van uiterlijk.

Je moet ook niet aan de bestaande classes zitten.

Ikzelf heb de knop voor mijn site aangepast door de eigen class voor de g-recaptcha te plaatsen.
Mogelijk dat dit uitmaakt...

Je kunt je eigen class ook wijzigen in id en de .sendButton veranderen in #sendButton

Bij specificity krijgt een id mee punten dan een class waardoor deze voorrang krijgt en alle waarden die in beide beschreven zijn gaat overschrijven


In het volgende voorbeeld zal de kleur van de tekst in de button rood zijn:

Let wel dat je met een id slechts 1 element kunt stylen, waar je een class voor meerdere elementen kunt gebruiken en eigenlijk de voorkeur zou moeten krijgen.

Een recaptcah werkt niet omdat iedereen ze met een tutorial kan omzeilen (zoek "solve recaptcha" op YT). De echte spammers, waar het eigenlijk om gaat, hebben dit in een complete software oplossing geïntegreerd. Ze hoeven alleen maar een gmail adres aan te maken en een tekst per geo gebied in te zetten. De rest gaat automatisch. Alles wordt in zulke systemen bijgehouden, website adressen, zichtbare emailadressen, ip adressen met geo gebied, enzovoort.

Effectiever werkt dit:
Beperkt aantal tekens toestaan (alle niet-Westerse tekst spam ben je kwijt).
Geen url's of emailadressen toestaan (dit willen spammers graag) behalve in veld emailadres.
Door middel van IP naar Geo alleen West Europa toestaan (werkt niet optimaal door VPN gebruik).
Als je nooit Engelstalige email wilt ontvangen dan kan je met Nederlands/Engels taaldetectie dit controleren.

PHP4U zei:

Je moet ook niet aan de bestaande classes zitten.

Ikzelf heb de knop voor mijn site aangepast door de eigen class voor de g-recaptcha te plaatsen.
Mogelijk dat dit uitmaakt...

Klik om te vergroten...

Dit had helaas niet het gewenste effect, button ziet er hetzelfde uit.

Ik denk dat het handiger is om even een praktisch voorbeeld te laten zien, en bij voorkeur, als het kan via een sandbox als JSfiddle.

Ik weet niet eens wat een sandbox is, lol.

Maar als je het in levende lijve wilt bekijken, hier staat de button die niet goed is: lmperfectcleaning.nl/contact.html
Hier staat de button zoals die zou moeten zijn: lmperfectcleaning.nl/bedankt.html

mod. linkjes gedeeltelijk verwijderd.

rob1970 zei:

Ik weet niet eens wat een sandbox is, lol.

Klik om te vergroten...

Sandbox, zandbak, om in te oefenen/spelen.
Als voorbeeld heb ik de site www.JSfiddle.net genoemd.
Dat geeft ook mijn voorkeur, want een site zal weer verdwijnen waarmee een topic nutteloos is. JSfiddle verwijdert niet snel gemaakte proefopstellingen.

Wat wat als je er een input van maakt i.p.v. een button?

In de css van de button staat een foutje, er mist een ;

Update: als ik een niet-ingevuld formulier verstuur dan kom ik op een lege pagina "post222.php"

Dat was het, tx

Wat een puntkomma toch een verschil kan maken....