Divi: Hoe maak je een contactformulier aan dat verschijnt nadat je op een knop hebt geklikt

Wil je een Contact formulier in Divi die verschijnt na het klikken op een knop?

In deze Divi-tutorial laten we u zien hoe u een Contact formulier die verschijnt na het klikken op een knop met alleen Divi, jQuery-code en CSS-code.

Lees ook onze gids over: Divi: Hoe maak je een sticky footer met "Reveal" effect

Het is een geweldige manier om de bezoekers uw website gefocust op de actie waartoe ze zich met één klik op de knop hebben verbonden. Het brengt ze niet naar een andere pagina.

overzicht

Hieronder kun je een snelle blik werpen op wat we gaan maken, en dan naar de tutorial springen!

Voorbeeld op pc

Voorbeeld op telefoon en tablet

Een nieuwe pagina maken met een vooraf gedefinieerde lay-out

Laten we beginnen met een vooraf gedefinieerde lay-out uit de Divi-bibliotheek. Voor dit voorbeeld gebruiken we de contactpagina van de Lay-outpakket voor schoonheidsproducten .

Voeg een nieuwe pagina toe aan je Site web en geef het een titel en selecteer vervolgens de optie 'Gebruik Divi Builder'.

We zullen voor dit voorbeeld een kant-en-klare lay-out uit de Divi-bibliotheek gebruiken, dus selecteer 'Kies lay-out'.

Zoek en selecteer de startpagina van de lay-out 'Interieurontwerpbedrijf'.

Selecteer 'Kies lay-out' om de lay-out aan uw pagina toe te voegen.

We zijn nu klaar om onze tutorial voort te zetten.

Maak een sectie met de knopmodule

Het eerste dat we zullen moeten doen is een nieuwe sectie toevoegen waar we de knop plaatsen waarmee we de Contact formulier weergeven. 

Zie ook: Divi: een aangepaste voettekst maken

Voeg gewoon een standaardsectie toe

Selecteer vervolgens een rij met één kolom. 

Zodra je dat hebt gedaan, voeg je er een Button-module aan toe.

U kunt de knop naar wens aanpassen, maar u moet ervoor zorgen dat de knop-URL begint met '#' gevolgd door iets anders. Je kunt het niet gewoon leeg laten of gewoon het '#'-teken gebruiken. Door '#' en tekst toe te voegen, zal de pagina niet bewegen zodra u op de knop klikt. Als u dit leeg laat, wordt de pagina vernieuwd bij klikken. En als u alleen '#' gebruikt, wordt u naar de bovenkant van de pagina gestuurd.

Het volgende belangrijke dat we moeten doen, is een CSS-klasse toewijzen aan de knop. We zullen deze CSS-klasse later in dit artikel in de jQuery-code gebruiken om ervoor te zorgen dat het contactformulier verschijnt na het klikken. De klasse die we aan de knop moeten toewijzen, is gewoon "knop".

• CSS-klasse: knop

Een contactformulier voor de pc-versie maken

Het volgende dat we moeten doen, is het contactformulier op het bureaublad maken dat verschijnt zodra iemand op de knop klikt die we in het vorige deel van dit artikel hebben gemaakt. Verderop in dit artikel laten we u ook zien hoe u de mobiele versie maakt.

Een nieuwe standaardsectie toevoegen

Begin met het toevoegen van een nieuwe standaardsectie aan de pagina waaraan u werkt. Ga in de sectie-instellingen naar het tabblad Geavanceerd en voeg "pop-up" toe aan het veld CSS-klasse. 

Scroll naar beneden op datzelfde tabblad en plaats de volgende regels CSS-code in het veld Voor van de subcategorie Aangepaste CSS:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

Door dit toe te voegen, zorgen we ervoor dat de sectie het hele tabblad beslaat. U kunt de achtergrondkleur in de CSS-code aanpassen om de gewenste achtergrondoverlay te maken. In dit geval gebruiken we zwarte kleur met enige transparantie. Voeg op hetzelfde tabblad ook de volgende regel CSS-code toe aan het hoofdelement:

display: none;

Het laatste dat we op het tabblad Geavanceerd moeten doen, is het gedeelte op de telefoon en tablet in de subcategorie Zichtbaarheid deactiveren.

Een rij toevoegen aan twee kolommen

Ga verder door een rij met twee kolommen toe te voegen en navigeer naar het tabblad Style . 

• Gebruik aangepaste gootbreedte: JA
• Maximale breedte: 1291px

Voer de parameters van elk van de kolommen in.

Wijzig de interne marges (Boven, Links en Rechts) als volgt:

• Interne marge (boven, links, rechts): 30px

Sluit af door naar het tabblad Geavanceerd te gaan. Voeg in het hoofdelement de volgende regels CSS-code toe:

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

Voeg de eerste tekstmodule toe

Nadat u alle wijzigingen in de sectie en rij hebt aangebracht, is het tijd om de verschillende modules toe te voegen die u wilt weergeven. 

Het eerste dat we zullen toevoegen, is de titel die verschijnt. Begin met het toevoegen van een nieuwe tekstmodule aan de eerste kolom van de rij, schrijf de tekst in het tabblad Inhoud en ga naar het tabblad Style . 

Op het tabblad Stijl hebben we de volgende instellingen gebruikt voor de subcategorie Tekst:

• Lettertype kop: Kreeft
• Koptekst zacht licht: vetgedrukte tekst
• Tekstuitlijning: Vet
• Kleur koptekst: #002282
• Grootte koptekst: 37px
• Hoogte kopregel: 1,7 em

Een tweede tekstmodule toevoegen

Ga verder door een nieuwe tekstmodule toe te voegen en typ de tekst die u wilt weergeven op het tabblad Inhoud. Schakel over naar het tabblad Stijl en pas de volgende instellingen toe op de subcategorie Tekst:

• Tekstuitlijning: Midden
• Tekstlettertype: Arial
• Tekst Tekstgrootte: 13px
• Tekst Kleur Tekst: #002282
• Hoogte tekstregel: 1,7 em

Een module 'Volg ons op sociale netwerken' toevoegen

Vervolgens voegen we in de eerste kolom ook de module 'Volg ons op social media' toe. In dit geval hebben we gekozen voor drie social media iconen; Facebook, Twitter en Instagram.

Het laatste dat we moeten doen, is opvulling (links) toevoegen aan deze module op het tabblad Geavanceerd. Voeg de volgende regel CSS-code toe aan het hoofdelement:

padding-left: 40%;

Een contactformuliermodule toevoegen

Dan kunnen we naar de tweede kolom in de rij gaan. In deze kolom gaan we als eerste de module Contactformulier plaatsen. 

Voor dit voorbeeld hebben we slechts twee velden gekozen; naam en e-mail. 

Nadat u de module Contactformulier hebt toegevoegd, navigeert u naar het tabblad Stijl van de module Contactformulier en brengt u de volgende wijzigingen aan in de subcategorie Velden:

• Tekstkleurvelden: #002282

• Velden tekstgrootte: #002282
• Hoogte veldlijn: 1,7 em

Breng op datzelfde tabblad de volgende wijzigingen aan in de subcategorie Knop:

• Gebruik aangepaste stijlen voor Knop: Ja
• Tekstgrootte knop: 20
• Tekstkleur knop: #FFFFFF
• Achtergrondknop: #0086c4

Zie ook: Hoe maak je een schuif- en push-menu in DIVI

• Breedte knoprand: 2 "
• Rand Radius-knop: 3

Schakel over naar het tabblad Geavanceerd en voeg een marge van 5% toe.

Een overzichtsmodule toevoegen

Een ander ding dat we aan de tweede kolom moeten toevoegen, is een samenvattingsmodule. Het enige waarvoor we deze module nodig hebben, is het exit-pictogram rechtsboven in het pop-upvenster. Kies het volgende pictogram uit de lijst met pictogrammen en laat de rest leeg.

Ga vervolgens naar het tabblad Geavanceerd en typ "close" als de CSS-klasse. 

Voeg op hetzelfde tabblad de volgende regels code toe aan het hoofdelement van de aangepaste CSS-subcategorie:

position: absolute;
top: -45px;
right: -30px;
cursor: pointer;

Een verloopvulling toepassen op de lijn

Ten slotte voegen we een mooie verloopachtergrond toe aan de lijn. Open de instellingen en pas de volgende wijzigingen toe op de verloopachtergrondoptie:

• Eerste kleurverloop: #FFFFFF
• Tweede verloopkleur: #0c71c3
• Gradiënttype: Lineair
• Gradiëntrichting: 124 graden
• Startpositie: 50%
• Eindstand: 50%

Maak een contactformulier voor tablet en telefoon

Nu we de pc-versie hebben gemaakt, gaat de tablet- en telefoonversie veel sneller. De meeste modules die we voor de pc-versie hebben gebruikt, zijn dezelfde als voor de mobiele versie.

Vorige sectie dupliceren

In plaats van het uit te schakelen voor telefoon en tablet, zoals we deden voor de pc-versie, zullen we de pc-versie uitschakelen in de subcategorie Zichtbaarheid in de module-instellingen:

Wijzig de CSS-code van de module Samenvatting

Gebruik in plaats van de desktopcode het volgende:

position: absolute;
top: -15px;
right: -25px;
cursor: pointer;

Een verloopvulling toepassen op de lijn

Voor de mobiele versie gebruiken we verschillende instellingen voor de verloopachtergrond van de lijn:

• Eerste kleurverloop: #FFFFFF
• Tweede verloopkleur: #0c71c3
• Gradiënttype: Lineair
• Gradiëntrichting: 180 graden
• Startpositie: 40%
• Eindstand: 40%

jQuery-code toevoegen

Het laatste dat we voor deze tutorial moeten doen, is de jQuery-code toevoegen. Voeg een Code-module toe en voeg de volgende JQuery-code in:

<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>

Resultaat

Als u het bericht stap voor stap volgt, zou u het volgende resultaat op de computer moeten kunnen krijgen:

En het volgende resultaat op tablets en telefoons:

Download DIVI nu!!!

Conclusie

In dit artikel hebben we je laten zien hoe je met één klik een contactformulier maakt. Gebruik deze methode om in contact te komen met uw bezoekers is subtiel maar effectief. 

We hopen dat deze tutorial je zal inspireren voor je volgende Divi-projecten. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.

U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.

Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.

...