logo
logo

Formulier uiterlijk aanpassen

Door de CSS van het formulier aan te roepen kun je kleuren, formaten en meer aanpassen. De knop kun je ook aanpassen door een specuiale extra shortcode.

Om de stijl aan te passen roep je de CSS class die je wilt aanpassen aan in “custom css”. Je kunt dit op verschillende manieren doen, als je hier nog niet bekend mee bent adviseer ik om het te doen via Weergave > Customizer of Simple Custom CSS. Het is wel handig dat je ervaring hebt met CSS. Onderstaand enkele voorbeelden van aanpassingen waar andere gebruikers wel eens om hebben gevraagd. Deze kun je combineren tot het gewenste resultaat.

Kleur en stijl van formulier en knop aanpassen

Je kunt de stijl (kleur, vorm) van de grote “Betaal” knop onderaan het formulier aanpassen. Om de stijl van de knop aan te passen met een extra shortcode, plaats je in je Paytium formulier de knop met [paytium_button /]. Er zijn enkele mogelijke parameters:

  • label: hier kun je de tekst van de knop aanpassen
  • class: hier kun je een CSS class meegeven, die je in je eigen custom css kunt aanroepen
  • style: hier kun je direct CSS waardes invoeren

Dit is een simpel voorbeeld van een formulier met de [paytium_button /] shortcode.

[paytium name="Formulier XYZ" description="Product omschrijving"]
[paytium_field type="open" label="Donatie bedrag:" default="25" /]
[paytium_button label="Nu doneren!" class="hello" style="background-color: red" /]
[/paytium]

Daarnaast kun je ook de stijl aan te passen via CSS roep je de volgende class aan in je custom css.


.pt-checkout-form button {
background-color: #15A346;
}

Breedte van een formulier aanpassen

Standaard staat het formulier in een smalle kolom, maar dat kun je eenvoudig aanpassen met de onderstaande CSS.

.pt-checkout-form {
width: 100%;
}

Formulier in twee kolommen

Als je veel velden hebt, wil je wellicht dat ze verdeeld worden over twee kolommen, zodat je formulier nite te lang is. Dat kan met onderstaande CSS.

.pt-checkout-form {
width: 100%;
}

.pt-form-group {
    display: inline-block;
    width: 45%;
    margin-right: 10px;
}

iDEAL + WordPress nieuws

één email per maand • informatief • eenvoudig afmelden

Please wait...

Bedankt, je bent succesvol toegevoegd aan de nieuwsbrief!

WordPress expert

Paytium is een project van WordPress expert David de Boer, iDEAL specialist sinds 2008.

Mail gerust naar david@paytium.nl