Currently set to Index
Currently set to Follow

Een contactformulier toevoegen Pop-up in WordPress

6 min


107
facebook chatbots

Contactformulier als pop-up toevoegen in wordpress:

In dit artikel laten we u zien hoe u een pop-upvenster met contactformulieren in WordPress kunt toevoegen dat werkt voor vrijwel elke plug-in voor contactformulier.

We laten u ook zien hoe u de pop-up alleen kunt openen als een gebruiker op een koppeling of knop klikt om de beste gebruikerservaring te garanderen.

contactformulier pop up wordpress

Stap 0: Aan de slag

Voor deze zelfstudie moet u twee plug-ins installeren en activeren.

Ten eerste heeft u het pro-plan van OptinMonster nodig dat bij het type Canvas-formulier hoort. OptinMonster is de beste pop-up-plug-in voor WordPress.

Vervolgens moet u een plug-in voor contactformulieren hebben , zoals WPForms , Gravity Forms , Contact Form 7 , etc.

Omwille van dit artikel zullen we de gratis versie van onze favoriete plug-in voor contactformulier gebruiken: WPForms Lite .

We gaan ervan uit dat u beide plug-ins hebt geïnstalleerd en geactiveerd. Als u hulp nodig hebt, raadpleegt u onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in .

Disclaimer: WPForms en OptinMonsters zijn beide gemaakt door WPBeginner’s Founder, Syed Balkhi .

Laten we echter verder gaan met het maken van een contactformulier in WordPress.

Stap 1: Een contactformulier maken met behulp van WPForms

Eerst moet u een nieuw contactformulier met WPForms maken. Als u al een contactformulier hebt gemaakt met WPForm, kunt u deze stap overslaan.

Klik op het WPForms-menu in uw WordPress admin zijbalk en klik vervolgens op de knop Add New.

contactformulier pop up wordpress

Hiermee wordt de Form Builder gestart. Voer eenvoudig een naam in voor uw formulier, bijvoorbeeld ‘Contact’ en klik vervolgens op ‘Eenvoudig contactformulier ‘ om door te gaan.

contactformulier pop up wordpress

De formulierbouwer neemt je mee naar de veldeneditor. U kunt velden uit uw formulier toevoegen of verwijderen of deze opnieuw rangschikken door slepen en neerzetten.

Contactformuliervelden bewerken

Als u klaar bent, klikt u op de knop Opslaan om uw wijzigingen op te slaan. Uw contactformulier is nu klaar.

U moet de pagina WPForms »Alle formulieren bezoeken . U vindt uw contactformulier daar vermeld. Ernaast vindt u een shortcode . Je hebt deze shortcode in de volgende stap nodig.

Contactformulier Shortcode

Nu we een contactformulier bij de hand hebben, gaan we verder met de volgende stap en maken we een lightbox-pop-up in WordPress.

Stap 2: Een WordPress Popup maken met OptinMonster

Het eerste wat we moeten doen is een modale popup maken met OptinMonster.

U moet een nieuwe opt-in maken door op OptinMonster te klikken in het menu WordPress admin en vervolgens te klikken op Nieuwe knop Optin maken.

contactformulier pop up wordpress

Hiermee gaat u naar de OptinMonster-website, waar u uw pop-up maakt. Eerst moet u een titel voor uw campagne opgeven. U kunt het elke gewenste naam geven, bijvoorbeeld ‘Contactformulier popup’.

Stel uw optin in

Vervolgens moet u uw website selecteren in het vervolgkeuzemenu. Klik op Canvas onder ‘Selecteer jouw ontwerp’ optie.

OptinMonster toont u beschikbare sjablonen. Momenteel is er alleen Whiteboard-sjabloon beschikbaar voor Canvas. Klik op sjabloon om verder te gaan.

Dit brengt u naar het Optin Customizer-scherm. Je zult zien dat Canvas leeg is van ontwerp. Het is zo gedaan, dus je kunt zowat alles toevoegen wat je wilt, terwijl je de kracht van OptinMonster gebruikt. U kunt een aanmeldingsformulier, facebook like box , enquêtes, kortingsbonnen toevoegen, of zoals we in dit voorbeeld een contactformulier doen.

Aangepaste CSS en HTML toevoegen aan canvasoptin

Onder het ontwerptabblad kunt u de hoogte-breedte van uw canvas kiezen. Standaard is deze ingesteld op 700 x 350 px. Laten we de hoogte op minimaal 520 instellen.

Onder het vak ‘Aangepaste HTML’ voert u uw shortcode in het contactformulier in, samen met andere aangepaste HTML die u mogelijk wilt toevoegen.

Hier is een voorbeeld-HTML die we hebben gebruikt om de modale pop-up voor deze zelfstudie te maken.

1
2
3
<h3>Do You Have Any Questions?</h3>
<p class="tagline">Want to ask us more about our services? Simply fill out this form and we will get back to you as soon as possible. </p>
[wpforms id="119"]

Merk op dat we de shortcode van WPForms daarin ook hebben ingesloten. Als u een ander contactformulier gebruikt, vervangt u eenvoudig de shortcode door de shortcode van uw contactformulier.

Na de aangepaste HTML is de volgende optie om uw aangepaste CSS in te voeren . Onder het aangepaste CSS-vak ziet u een reeks willekeurige tekst die lijkt op deze html div # om-mw7pzo63ch6wpfzi . Dit is het CSS-voorvoegsel dat u in uw aangepaste CSS zult gebruiken.

Hier is de CSS die we hebben gebruikt om de modale pop-up voor deze tutorial te maken.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
html div#om-mw7pzo63ch6wpfzi div#om-canvas-whiteboard-optin {
background-color:#f8f8f8;
}
html div#om-mw7pzo63ch6wpfzi h3 {
text-align:center;
}
html div#om-mw7pzo63ch6wpfzi .tagline {
font-style:italic;
}
html div#om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field {
    padding: 10px 0;
    clear: both;
}
html div#om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
    }
html div#om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field-hp {
    display: none !important;
    position: absolute !important;
    left: -9000px !important;
}
   

Maakt u zich geen zorgen als u het voorbeeld nu niet ziet, u kunt uw CSS later aanpassen. U kunt het Inspect Element-hulpmiddel van uw browser gebruiken om te achterhalen welke CSS-klassen en selectoren u wilt targeten en vervolgens aangepaste CSS toevoegen door uw optin te bewerken.

Nu zijn we klaar met het ontwerpgedeelte. Laten we overschakelen naar het configuratietabblad in de customizer.

Verander zowel ‘Optin Cookie Duration’ en ‘Optin Success Cookie Duration’ in 0. Hiermee stopt OptinMonster het instellen van de duurcookie.

Optin-configuratie

U moet ook het ‘Optin Succesbericht’ wijzigen. Standaard bedankt het gebruikers voor het aanmelden, maar we gebruiken het op een contactformulier. U moet het succesbericht wijzigen om gebruikers te bedanken voor uw contact.

Omdat onze pop-up alleen verschijnt als een gebruiker op een link of een knop klikt, betekent dit dat we de handmatige trigger moeten inschakelen. Vink het vakje aan onder ‘Load on Manual Trigger?’ keuze.

contactformulier pop up wordpress

Klik op de knop Opslaan om uw optin-instellingen op te slaan en klik vervolgens op de knop Sluiten om de customizer af te sluiten.

Stap 3: Pop-up toevoegen aan uw WordPress-site

Ga terug naar je WordPress admin gebied en klik op OptinMonster. U ziet uw lijst met optins. Als u uw optin niet ziet, klikt u op de knop voor het vernieuwen van de optins.

Optins-pagina op uw WordPress-site

Klik op de link ‘Instellingen bewerken’ onder uw optin. Dit brengt u naar de uitvoerinstellingen voor de pop-up.

Optin inschakelen op uw site

Eerst moet u het selectievakje inschakelen naast ‘Optin op locatie inschakelen’ en ‘Optin wereldwijd laden’ . Als u deze niet aanvinkt, verschijnt de pop-up niet op uw site.

Blader naar beneden op de pagina en je ziet de optie ‘Inhoud parseren voor shortcodes’ . Controleer of het is aangevinkt, anders zal OptinMonster de shortcodes in uw pop-up niet parseren.

Schakel shortcodes in pop-up in

Vervolgens moet u de shortcode invoeren die u in uw pop-up hebt opgenomen. Dit is de shortcode van uw contactformulier.

Klik op de opslaginstellingen om uw wijzigingen op te slaan.

Link of knop toevoegen om contact met de contactpersoon Pop-up te triggeren

Eerst heeft u de slak van uw OptinMonster-optin nodig. Klik op het OptinMonster-pictogram in uw WordPress zijbalk. Je ziet de optin slug naast je optin-titel.

contactformulier pop up wordpress

Maak een nieuwe pagina in WordPress of bewerk een bericht of pagina waaraan u de pop-upkoppeling of -knop van het contactformulier wilt toevoegen. Ga in de berichteditor naar teksteditor en voeg je pop-up link als volgt toe:

1
<a href="#" class="manual-optin-trigger" data-optin-slug="mw7pzo63ch6wpfzi">contact us</a>

Vergeet niet om de data-optin-slug te vervangen door uw eigen optin slug.

Sla uw wijzigingen op en ga naar uw bericht / pagina. Klik op de link om uw contactformulier in actie te zien.

Contactformulier weergegeven in een pop-up met een lightbox

U kunt deze link overal op uw WordPress-site gebruiken. U kunt het toevoegen aan berichten of pagina’s , tekst widgets , zelfs in uw WordPress-sjablonen.

voor 50+ free tools check : https://delaatbusiness.com 


0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format