Wil je een Contact formulier naar uw website dankzij de module Contactformulier van Divi? Hier zijn 3 aanpassingsideeën...

de vormen Contactgegevens zijn een essentieel onderdeel van veel websites. Hun belangrijkste doel is om intuïtief te zijn en bezoekers te helpen gemakkelijk contact op te nemen. 

Maar dat betekent niet dat alles vormen contacten moeten een nauwkeurig en vooraf gedefinieerd uiterlijk hebben. Een intuïtieve beleving combineer je eenvoudig met een mooi design. Dit is precies wat we in deze tutorial gaan doen. 

We zullen 3 unieke ontwerpen van de module delen Contactformulier de Divi die u kunt maken met alleen de ingebouwde opties van Divi.

Laten we gaan!

Overzicht van de ontwerpen van de Divi Contactformulier module

Desktop-versies

Laten we beginnen met een kijkje te nemen naar de desktopversie van de verschillende ontwerpen van de module Contactformulier die we in deze tutorial zullen ontwerpen.

voeg een contactformulier toe aan uw website met behulp van Divi's Contact Form-module
voeg een contactformulier toe aan uw website met behulp van Divi's Contact Form-module
voeg een contactformulier toe aan uw website met behulp van Divi's Contact Form-module

Mobiele versies

En zo zien ze eruit op kleinere schermformaten:

voeg een contactformulier toe aan uw website met behulp van Divi's Contact Form-module
voeg een contactformulier toe aan uw website met behulp van Divi's Contact Form-module

Download DIVI nu!!!

voeg een contactformulier toe aan uw website met behulp van Divi's Contact Form-module

Hoe de Divi Contact Form module aanpassen: 3 voorbeelden

Lees ook: Divi: Hoe maak je een teamledensectie als carrousel

Creatie van het contactformulier #1

Voeg een nieuw gedeelte toe

Achtergrond met kleurovergang

Laten we beginnen met het eerste voorbeeld! Voeg een nieuwe sectie toe, ga naar achtergrondinstellingen en voeg een verloopachtergrond toe.

  • Verloop stopt
    • 34%: #4c00ff
    • 34%: #ffd400
  • Soort: rond
  • Gradiëntrichting: linksonder

tussenruimte

Ga vervolgens naar de optie Afstand op het tabblad Ontwerp en wijzig de instellingen als volgt.

  • Opvulling (boven en onder): 200px

Voeg een nieuwe regel toe

Structuur van de kolom

Voeg een nieuwe rij toe met behulp van de volgende kolomstructuur:

Kolom 1: Achtergrondkleur

Zonder nog modules toe te voegen, open rij-instellingen, vervolgens kolom 1-instellingen en voeg de onderstaande achtergrondkleur toe

  • Achtergrond: rgba(255,255,255,0.55)

Kolom 1: Achtergrondafbeelding

Voeg ook een achtergrondafbeelding toe aan de eerste kolom.

  • Achtergrondafbeelding Herhalen: geen herhaling
  • Achtergrondafbeelding mengen: scherm

Kolom 2: Achtergrondafbeelding

En een witte achtergrondkleur voor de tweede kolom.

  • Achtergrond: #ffffff

sizing

Wijzig vervolgens de maatparameters.

  • Egaliseer kolomhoogten: JA

tussenruimte

Verwijder ook alle standaard aangepaste opvullingen.

  • Opvulling (boven en onder): 0px

Randradius kolom

Voeg een randradius toe aan beide kolommen op het tabblad Geavanceerd.

border-radius: 10px;

Voeg een tekstmodule toe aan kolom 1

Voeg inhoud toe

Het is tijd om de verschillende modules toe te voegen! Voeg een tekstmodule toe aan de eerste kolom met inhoud naar keuze.

Tekst instellingen

Ga vervolgens naar het tabblad Ontwerp van de module Tekst en breng enkele wijzigingen aan.

  • Tekst:
    • Lettertype: voldoen
    • Tekstkleur: #333333
    • Grootte: 100px
    • Lijnhoogte: 1 em
    • Uitlijning: midden

tussenruimte

Voeg ook aangepaste vulwaarden toe.

  • Opvulling (boven): 600px
  • Opvulling (onderkant): 100px

Schaduw doos

Gebruik een subtiele doosschaduw om diepte aan het ontwerp toe te voegen.

  • Doos Schaduwvervaging Sterkte: 80px
  • Box Shadow Spread-sterkte: -16px
  • Schaduwkleur: rgba(0,0,0,0.3)

Voeg een afbeeldingsmodule toe aan kolom 2

Upload een afbeelding

Ga verder door een afbeeldingsmodule toe te voegen aan de tweede kolom. Upload een afbeelding naar keuze.

sizing

Wijzig de formaatinstellingen voor deze module.

  • Breedte: 25% (desktop), 50% (tablet), 60% (telefoon)
  • Module-uitlijning: midden

tussenruimte

Creëer een overlap met een negatieve bovenmarge.

  • Marge (boven): -60%

grens

Wijzig de randen van de afbeelding als volgt:

  • Afgeronde hoeken: 100px (alle hoeken)

Voeg Tekst #1 module toe aan kolom 2

Voeg inhoud toe

Voeg net onder de afbeeldingsmodule een tekstmodule met inhoud toe.

Tekst instellingen

Bewerk de tekstinstellingen voor deze module.

  • Tekst:
    • Lettertype: voldoen
    • Tekstkleur: #333333
    • Tekstgrootte: 44px
    • Oriëntatie: Centrum

Voeg Tekst #2 module toe aan kolom 2

Voeg inhoud toe

Voeg vervolgens nog een tekstmodule toe.

Tekst instellingen

Wijzig ook de tekstinstellingen voor deze module.

  • Tekst:
    • Lettertype: Arial
    • Tekstkleur: #ffd400
    • Tekstkleur: 18px
    • Letterafstand: 2px
    • Oriëntatie: Centrum

tussenruimte

Voeg vervolgens een ondermarge toe.

  • Marge (onder): 100px

Voeg de module Contactformulier toe aan kolom 2

Activeer de optie "Make Fullwidth" in het veld Naam en e-mail

De laatste module die nodig is, is de module Contactformulier. Voordat u iets anders doet, opent u de naam- en e-mailvelden en wijzigt u de lay-out.

  • Maak Fullwidth: ja

Voeg een onderwerpveld toe

Om dit ontwerp te maken, hebben we een ander veld voor het onderwerp toegevoegd.

Spam Protection

Schakel vervolgens de captcha-optie uit.

  • Gebruik Basic Captcha: NEE

Tekstinstellingen formulierveld

Breng enkele wijzigingen aan in de tekstinstellingen van het formulierveld van deze module Contactformulier

  • Velden:
    • Achtergrondkleur: rgba(255,255,255,0)
    • Lettertype: Arial
    • Lettergewicht: Licht
    • Tekstgrootte: 16px
    • Letterafstand: 2px

Knop instellingen

We veranderen ook het uiterlijk van de knoppen.

  • Gebruik aangepast formaat voor knop: JA
  • Knop:
    • Tekstkleur: #ffd400
    • Randbreedte: 0 pixels
    • Letterafstand: 2px
    • Lettertype: Arial
    • Lettertype: U
    • onderstrepen Kleur: #4c00ff

tussenruimte

Voeg vervolgens enkele aangepaste opvulwaarden toe.

  • Opvulling (onderkant): 100px
  • Opvulling (links en rechts): 50px

grens

En voeg een subtiele onderrand toe aan elk van de velden.

  • Voert de breedte van de onderrand in: 2px
  • Invoer Onderste randkleur: #efefef
maak een contactformulier

Afstand tussen afzonderlijke velden

Voeg ten slotte een ondermarge toe aan elk van de afzonderlijke velden behalve het berichtveld.

  • Marge (onder): 20px
maak een contactformulier

Creatie van het contactformulier #2

Voeg een nieuw gedeelte toe

Achtergrond met kleurovergang

Laten we verder gaan met het volgende voorbeeld! Voeg een nieuwe sectie toe met een verloopachtergrond.

  • Gradiëntstops:
    • 50%: #562fef
    • 50%: #ffffff
  • Gradiënttype: Lineair

tussenruimte

Voeg aangepaste opvulwaarden toe aan de afstandsinstellingen in deze sectie.

  • Opvulling (boven en onder): 200px

Voeg een nieuwe regel toe

Structuur van de kolom

Voeg een nieuwe rij toe met behulp van de volgende kolomstructuur:

Achtergrond kleur

Zonder nog modules toe te voegen, opent u de rij-instellingen en voegt u een achtergrondkleur toe aan de rij.

  • Achtergrondkleur: #ffffff

Achtergrond met 2 kolommen met kleurovergang

Voeg een verloopachtergrond toe aan de tweede kolom in de rij.

  • Gradiëntstops:
    • 0%: #9932ff
    • 100%: #562fef
    • Soort: lineair
    • Besturing: 160 graden

sizing

Pas ook de parameters voor de lijngrootte aan.

  • Gebruik aangepaste gootbreedte: JA
  • Gootbreedte: 1
  • Egaliseer kolomhoogten: JA

tussenruimte

Voeg vervolgens aangepaste afstandswaarden toe.

  • Lijn:
    • Opvulling (boven en onder): 0px
  • Kolom 1:
    • Opvulling: 100px (boven), 50px (onder)
    • Opvulling (links en rechts): 50px
  • Kolom 2:
    • Opvulling (boven en onder): 100px
    • Opvulling (links en rechts): 50px

grens

Voeg '20px' toe aan elk van de lijnranden.

Schaduw doos

Voeg ten slotte een subtiele doosschaduw toe aan de lijn.

  • Doos Schaduwvervaging Sterkte: 45px
  • Box Shadow Spread-sterkte: -11px
  • Sadow-kleur: rgba (0,0,0,0.3)

Voeg een tekstmodule toe aan kolom 1

Voeg inhoud toe

Het is tijd om de modules toe te voegen! Begin met een tekstmodule in de eerste kolom.

Tekst instellingen

Bewerk de tekstinstellingen voor deze module.

  • Tekst:
    • Lettergewicht: Ultra Bold
    • Lettertype: TT
    • Kleur: #562fef
    • Grootte: 100px (desktop), 80px (tablet), 60px (telefoon)
    • Letterafstand: -10px
    • Lijnhoogte: 1 em

tussenruimte

Voeg ook een ondermarge toe.

  • Marge (onder): 50px

Voeg de module Contactformulier toe aan kolom 1

Communie

De tweede module die we nodig hebben in de eerste kolom is een Contact Form module. Zodra je de module hebt toegevoegd, zet je de optie 'Use Basic Captcha' uit.

  • Gebruik Basic Captcha: NEE

Tekstinstellingen formulierveld

Wijzig vervolgens de achtergrondkleur van de formuliervelden.

  • Achtergrondkleur velden: #ffffff

Knop instellingen

Speel ook met de knopinstellingen om een ​​pictogramknop te maken in plaats van een tekstknop.

  • Gebruik aangepaste stijlen voor knop: JA
  • Knop:
    • Tekstgrootte: 73px
    • Tekstkleur: rgba(0,0,0,0) (standaard),
    • Achtergrondkleur: rgba(255,255,255,0) (zweven)
    • Randbreedte: 0px
    • Pictogramkleur: #9932ff
  • Toon alleen pictogram bij zweven voor knop: NEE

Schaduw doos

Voeg ten slotte een subtiele vakschaduw toe aan elk van de velden.

  • Doos Schaduwvervaging Sterkte: 36px
  • Box Shadow Spread-sterkte: -14px
  • Schaduwkleur: rgba(0,0,0,0.3)

Voeg een tekstmodule toe aan kolom 2

Voeg inhoud toe

De eerste module die we nodig hebben in de tweede kolom is een andere tekstmodule.

Tekst instellingen

Nadat u de inhoud heeft toegevoegd, bewerkt u de tekstinstellingen voor deze module.

  • Tekst:
    • Lettergewicht: Ultra Bold
    • Lettertype: TT
    • Kleur: #ffffff
    • Grootte: 23px
    • Letterafstand: -1px

Voeg Blurb-module #1 toe aan kolom 2

Voeg inhoud toe

De tweede module die we nodig hebben is een Blurb-module. Ga je gang en voer wat contactgegevens in.

Selecteer het icoon

Kies vervolgens een bijbehorend icoon.

Pictogram instellingen

Wijzig de instellingen voor dit pictogram.

  • Pictogramkleur: #ffffff
  • Plaatsing afbeelding/pictogram: rechts

Instellingen voor titeltekst

Ga verder door enkele wijzigingen aan te brengen in de instellingen voor de titeltekst.

  • Titel tekstgrootte: 15px
  • Titelletterafstand: -0,5 pixel

tussenruimte

En voeg een bovenmarge toe.

  • Marge (boven): 120px

Kloon de Blurb-module twee keer

Als je klaar bent met het bewerken van de eerste Blurb-module, kun je doorgaan en de module twee keer klonen.

Wijzig de inhoud en het pictogram van de twee duplicaten

Bewerk de inhoud en pictogrammen van de twee duplicaten om verschillende soorten contactgegevens met bezoekers te delen.

Wijzig de afstand tussen de twee duplicaten

De bovenmarge van de twee duplicaten moet ook worden gewijzigd.

  • Marge (boven): 30px

Creatie van het contactformulier #3

Voeg een nieuw gedeelte toe

Achtergrond kleur

Laten we verder gaan met het derde voorbeeld! Voeg een nieuwe sectie toe met de volgende achtergrondkleur:

  • Achtergrondkleur: #3491CE

tussenruimte

Ga verder door aangepaste opvulwaarden toe te voegen in de afstandsinstellingen.

  • Opvulling (boven en onder): 200px

Voeg regel #1 . toe

Structuur van de kolom

Voeg vervolgens een nieuwe rij toe met behulp van de volgende kolomstructuur:

Voeg een tekstmodule toe

Voeg inhoud toe

Het is tijd om modules toe te voegen! De eerste module die we aan de eerste kolom moeten toevoegen, is een tekstmodule. Voer een inhoud naar keuze in.

Tekst instellingen

Wijzig vervolgens de tekstinstellingen.

  • Tekst:
    • Lettergewicht: Ultra Bold
    • Tekstkleur: rgba (255,255,255,0.24)
    • Tekstgrootte: 100px (bureaublad), 70px (tablet), 36px (telefoon)
    • Lijnhoogte: 1 em
    • Oriëntatie: Centrum

tussenruimte

Voeg ook een negatieve ondermarge toe.

  • Marge (onder): -100px

Voeg regel 2 . toe

Structuur van de kolom

De tweede rij die we nodig hebben om dit voorbeeld te voltooien, bevat de volgende kolomstructuur:

Achtergrond met kleurovergang

Zonder nog modules toe te voegen, opent u de lijninstellingen en voegt u een verloopachtergrond toe.

  • Gradiëntstops:
    • 50%: #11CE84
    • 50%: #10C77F
  • Gradiënttype: Lineair
  • Besturing: 160 graden

sizing

Wijzig ook de maatparameters.

  • Gebruik aangepaste gootbreedte: JA
  • Gootbreedte: 1
  • Egaliseer kolomhoogten: JA

tussenruimte

Voeg vervolgens enkele opvulwaarden toe.

  • Opvulling: 150px (boven), 100px (onder)
  • Opvulling: 50px (links en rechts)

grens

Ga vervolgens naar randinstellingen en voeg '20px' toe aan elk van de hoeken. Gebruik ook een onderrand.

  • Afgeronde hoeken: 20px
  • Breedte onderste rand: 10px
  • Kleur onderrand: #1ba35a

Schaduw doos

Voltooi de lijninstellingen door een subtiele doosschaduw toe te voegen.

  • Doos Schaduwvervaging Sterkte: 80px
  • Box Shadow Spread-sterkte: -24px
  • Schaduwkleur: rgba(0,0,0,0.3)

Voeg de module Contactformulier toe aan kolom 1

Activeer de optie "Make Fullwidth" in het veld Naam en e-mail

De eerste module die we nodig hebben in de eerste kolom van de rij is een Contact Form module. Open het naam- en e-mailveld en wijzig de lay-outinstellingen.

  • Maak volledige breedte: JA

Communie

Schakel dan de captcha uit.

  • Gebruik Basic Captcha: NEE

Knop instellingen

En verander de knopinstellingen.

  • Gebruik aangepaste stijlen voor knop: JA
  • Tekstkleur knop: #ffffff
  • Gradiëntstops:
    • 50%: #3AA0E3
    • 50%: #3491CE
  • Verlooptype: lineair
  • Gradiëntrichting: 155 graden -
  • Breedte knoprand: 0 pixels
  • Knoprandstraal: 10px
  • Box Shadow Spread-sterkte: -2px
  • Schaduwkleur: #0a60af

Zie ook: Divi: het winkelmandje en de zoekpictogrammen van de module "Fullwidth Menu" aanpassen

grens

We voegen ook '5px' afgeronde hoeken toe aan elk van de velden.

Voeg een tekstmodule toe aan kolom 2

Voeg inhoud toe

In de tweede kolom is de eerste module die we nodig hebben een tekstmodule. Ga je gang en voer wat inhoud in.

Achtergrond kleur

Verander dan de achtergrondkleur.

  • Achtergrond: rgba(255,255,255,0.13)

Tekst instellingen

Bewerk ook met tekstinstellingen.

  • Tekst:
    • Lettergewicht: licht
    • Tekstkleur: #ffffff
    • Tekstgrootte: 15px
    • Letterafstand: -0,5 px

tussenruimte

En voeg aangepaste opvulling toe om de module ruimte te geven om te ademen.

  • Opvulling (boven en onder): 12px
  • Opvulling (links en rechts): 10px

grens

We voegen ook '20px' toe in de linkerbovenhoek en linkerbenedenhoek. Bovendien voegen we een linkerrand toe.

  • Afgeronde hoeken: 20px (linksboven en linksonder)
  • Breedte linkerrand: 34px
  • Kleur linkerrand: #edf000

zichtbaarheid

Om dit ontwerp bij verschillende schermformaten te laten passen, schakelen we de tekstmodule op de telefoon en tablet uit.

Kloon de tekstmodule twee keer

Als je klaar bent met het bewerken van de eerste tekstmodule, ga je gang en kloon je de module twee keer.

Wijzig de inhoud van de twee duplicaten

Wijzig de inhoud van de twee duplicaten in iets anders.

Wijzig de afstand tussen de twee duplicaten

En voeg een bovenmarge toe om ruimte te creëren tussen elk van de modules.

  • Marge (boven): 20px

Wijzig de rand van de twee duplicaten

Wijzig ten slotte de kleur van de linkerrand van elk van de duplicaten afzonderlijk.

  • Kleur 1: #00faff
  • Kleur 2: #00f76f

Zie ook ons ​​artikel over Een responsieve accordeonschuifregelaar maken

overzicht

Desktop versie

Nu we alle stappen hebben doorlopen, laten we een laatste blik werpen op de ontwerpen van de Divi Contact Form-module op desktop.

voeg een contactformulier toe aan uw website met behulp van Divi's Contact Form-module
voeg een contactformulier toe aan uw website met behulp van Divi's Contact Form-module
voeg een contactformulier toe aan uw website met behulp van Divi's Contact Form-module

Mobile

En dit is wat u kunt verwachten van Divi's ontwerpen van contactformuliermodules op kleinere schermformaten:

voeg een contactformulier toe aan uw website met behulp van Divi's Contact Form-module
voeg een contactformulier toe aan uw website met behulp van Divi's Contact Form-module
voeg een contactformulier toe aan uw website met behulp van Divi's Contact Form-module

Download DIVI nu!!!

Conclusie

In dit bericht hebben we 3 geweldige Divi Contact Form-moduleontwerpen gedeeld die u gemakkelijk kunt gebruiken en aanpassen voor elke website die u maakt. 

de vormen Contacten zijn een essentieel onderdeel van veel websites, dus het is belangrijk om ervoor te zorgen dat uw ontwerp uw bezoekers overtuigt om contact op te nemen. 

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.

Aarzel niet om ook onze gids te raadplegen over 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.

...