Custom loading gif/icon bij Contact Form 7 – CSS

Sinds de nieuwe versie van Contact Form 7 (versie 4.7) werkt het aanpassen van de ajax-loader.gif anders dan normaal.

Contact Form 7 loading GIF       Contact Form 7 loading GIF

Oude manier via PHP

Voorheen kon je met een stukje PHP aangeven welk GIF bestand gebruikt moesten worden. Deze php code zag er als volgt uit:

Nieuwe manier via CSS

Bij Contact Form 7 Versie 4.7 is dit gewijzigd naar een nieuwe oplossing in CSS. In plaats van PHP voeg je het GIF bestand toe aan middels CSS. Hieronder het stukje code om de de loading ajax-loader.gif aan te passen.

Hierbij geef je bij de width en height de afmetingen van de de nieuwe loading GIF. Bij background-size vul je dezelfde afmetingen in. Wel moet je nog even het GIF bestand plaatsen op de server via FTP. Daarna geeft je het pad naar dit GIF bestand aan in het stukje CSS.

Werk je met WordPress? Voeg dat dit stukje CSS toe aan je Child Theme hoofd CSS bestand. Heb je geen child theme? Zet dan het stukje css in het gewone CSS bestand. Vaak heet dit bestand style.css

Loading GIF bestanden downloaden

Op het internet zijn veel website waar je gratis loading GIF bestanden kunt downloaden. Hieronder enkele websites waar je gratis GIF bestanden kunt downloaden.

Zelf GIF bestanden maken met Photoshop

Natuurlijk is het ook mogelijk om zelf GIF loaders te maken met Photoshop. Er staan erg veel filmpjes op YouTube die uitleg geven hoe je een Loading GIF bestand kunt maken. Hieronder Enkele filmpjes die uitleg geven hierover.

Heb je nog vragen naar aanleiding van dit artikel? Neem dan even contact op via info@pixelshape.nl