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 speciale 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 adviseren wij 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;
}