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, Custom CSS JS, Advanced Custom Fields 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;
}

Betaalknop aanpassen en zichtbaar maken in een bepaalde/verschillende plekken op je formulier.
Als voorbeeld de betaalknop zichtbaar maken in 3 kolommen zonder dat het verdwijnt in 2 van de kolommen.
Waar het als eerste geplaatst is, wordt onderdeel van een genummerde lijst.
Let dan vooral op in dit geval dat de stijlen van een mogelijke module die gebruikt wordt niet overgenomen worden en hierdoor uit de kolomranden ‘vallen’.
Dit kan opgelost worden door aan je stijlknop een style attribute toe te voegen aan je shortcode zoals dit:

[paytium_button label="Betaal" style="background-color: #74d96:color #ff;” /]

Je kan ook een CSS code aan je thema toevoegen die specifiek gericht is op het volgende klasse:

.pt-payment-btn

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;
}

FAQ : Hoe in je thema in CSS hoogte/ breedte/ lijntjes in je velden te veranderen

Het lukt niet met de CSS de radio buttons van hoogte te veranderen zonder dat de tekst ook mee wordt veranderd of het hokje waar mensen hun e-mailadres in moeten invullen is groter en buiten de lijntjes, hoe verander je dat?

Ok, het is altijd goed om te weten dat het niet Paytium gerelateerd is maar heel specifiek een CSS kwestie is in je thema of op een andere plek. Je kan echt elke gewenste stijl toevoegen met je eigen CSS in je thema.

Je kan bijvoorbeeld de regelhoogte van het label wijziging in ‘normaal’ of een andere benodigde waarde naar keuze. Zie rode pijl in willekeurige voorbeeld:

Of de radio input “margin-top” naar 0 instellen:
Zie rode pijl in willekeurige voorbeeld:

Tip:
Als je je eigen CSS class aan een field group wilt toevoegen, kan dat met class="jouw_css_class"
Een field group is een <div> waarin een <label> en bijvoorbeeld een <input type="text"/> of <select> zich bevinden.