Wordpress Contact Form postcard (ansichtkaart) style

[Mandarijn91]

Hallo,

Ik heb een Wordpress website en gebruik Contact form 7 en de plugin Contact form 7 Custom Skins.
Maar laatst kwam ik een contactform op een website tegen in de vorm van een soort "ansichtkaart" postcard.
Waarop mensen hun naam, mail en bericht konden invullen (zie voorbeelden).




Ik vind dit zoiets gaafs, dat ik het ook wil! Maar hoe? Met de contact form 7 costum skins ben ik te beperkt in de mogelijkheden zoals de voorbeelden.. Ik kan wel een leuke button ontwerpen en een stippellijn eromheen laten lopen, maar dat is niet zoals in het voorbeeld, wat ik het liefst wil hebben.
Ik heb al een zoektocht gedaan naar plugins (wil er ook wel voor betalen) maar kan niet zo'n mooi contactformulier kant- en klaar/of als template vinden.
Je hebt ook prachtige psd (photoshop) postcards templates om voor je website gratis te gebruiken. Alleen (mocht dit een optie zijn) hoe zet ik deze postcard design
achter mijn Contact Form? Want de invulvelden moeten natuurlijk wel werken, of eroverheen geplaatst worden..?
Iemand een idee? Suggestie? Ben helaas geen css expert daarin..

[AW_Bos]

Ik denk echt dat je niet aan CSS zal ontkomen. Misschien moet je anders het laten uitbesteden als je CSS niet machtig bent.

[Spinal]

Contact Form 7 is hier juist heel geschikt voor, omdat ze veel simpeler zijn dan alternatieven als Ninja Forms, Gravity Forms of Quform. Je kunt met CF7 heel goed zelf HTML om je inputs zetten en het zo in elkaar bouwen. Maar inderdaad, als CSS je niet goed ligt dan zul je iemand moeten zoeken hiervoor...

[Mandarijn91]

Hm jammer, al zou ik het zelf best wel willen leren. Zijn er geen stap voor stap tutorials om zoiets wat ik wil te maken op het internet? Ik kan er tot nu toe nog geen vinden..

[AW_Bos]

CodeAcadmy kan je wel leren om met CSS om te gaan. Zie ook: https://www.codecademy.com/learn/learn-html-css

[jasbroek]

Afhankelijk van je pagina opbouw in wordpress (gebruik je Visual Composer of een andere builder?) kun je dit ook nabootsen door een achtergrond afbeelding in te voegen en goed geplaatste tekst vakken.

Wellicht dat je aan deze link wat hebt?
http://www.jankoatwarpspe...g-comment-form-using-css/

Let tijdens het maken wel op of je contact formulier responsive is, of dat je het formulier veranderd als het schermformaat kleiner wordt