Hostfact styling aanpassen
Er zijn twee opties om het bestelformulier aan te passen op basis van Hostfact:
- Binnen een WordPress website met behulp van de HostFact voor WordPress plugin.
- Direct via het Hostfact HTML formulier (inclusief header en footer).
Opzet op basis van WordPress website
- Download de volgende plugin: https://nl.wordpress.org/plugins/hostfact-bestelformulier-integratie/
- Upload de bestanden naar de /wp-content/plugins/ map
- Activeer de plugin vanuit de ‘Plugins’ sectie in WordPress
- Gebruik [bestelformulier url=https://www.uwdomein.nl/bestellen/?cart=1] in de betreffende WordPress pagina
Stylen van het formulier
We hebben een voorbeeldbestand aangemaakt, op basis waarvan je de styling van het bestelformulier in HostFact kunt aanpassen. Gebruik enkel orderform.css in het onderstaande formulier en plaats het bovenaan orderform.css (/order/css/orderform.css) in je Hostfact installatie.
https://github.com/Hoasted/hostfact-styling-wordpress
Voorbeeld
Indien je de pagina de styling van jouw eigen WordPress website meegeeft, kun je al snel een mooi en professioneel bestelformulier opzetten
Opzet direct via Hostfact HTML
In deze opzet dient er ook een header en een footer toegevoegd te worden aan het bestelformulier. We hebben een aantal voorbeeld bestanden opgezet op basis waarvan je zelf een en ander kunt aanpassen (gebruik de header.phtml, footer.phtml en orderform.css):
https://github.com/Hoasted/hostfact-styling/
Toevoeging aan je eigen Hostfact installatie
Open via FTP de folder waar je installatie voor Hostfact staat. Vanuit daar heb je een algemeen CSS bestand waarin je de styling kunt opmaken:
- /order/css/orderform.css
In de map views staan de html bestanden waarin het bestelformulier ingesloten wordt. Hierin zijn onder andere ook de header en de footer te vinden:
- /order/views/header.phtml
- /order/views/footer.phtml
Vul orderform.css aan met de CSS uit het Github voorbeeld (plaats de CSS bovenin jouw eigen CSS bestand). De header.phtml en footer.phtml bestanden kun je vervangen.
Vervang in de header een footer tevens de placeholder images voor jouw eigen logo.
Voorbeeld
Indien je de pagina de styling hebt verwerkt zoals in het voorbeeld, ziet je bestelformulier er ongeveer zo uit
