Doorgaan naar artikel
Let op: De Nederlandse vertaling van dit artikel is alleen bedoeld voor het gemak. De vertaling wordt automatisch gemaakt via een vertaalsoftware en is mogelijk niet proefgelezen. Daarom moet de Engelse versie van dit artikel worden beschouwd als de meest recente versie met de meest recente informatie. U kunt het hier raadplegen.
Forms

Een HubSpot-formulier op een externe site instellen en vormgeven

Laatst bijgewerkt: september 15, 2022

Geldt voor:

Alle producten en plannen

Nadat je een formulier in HubSpot hebt gemaakt, kun je toevoegen aan HubSpot pagina's of pagina's die je buiten HubSpot hebt gemaakt. Formulieren kunnen worden gedeeld op je externe, niet-HubSpot-gehoste site door:

  • De formuliercode insluiten op een bestaande pagina.
  • Een op zichzelf staande formulierpagina maken waarnaar je kunt linken.

Met beide methoden worden wijzigingen die in de formulieren tool van HubSpot zijn aangebracht automatisch doorgevoerd in het live formulier op je externe site. Nadat je je formulier hebt toegevoegd, kun jeje ingesloten HubSpot-formulier op je externe pagina's stylen in de formulier-editor of met CSS in je externe stylesheet.

Als je met WordPress werkt, leer dan hoe je een formulier op je WordPress post of pagina invoegen.

De insluitingscode voor het formulier toevoegen

Om de inbeddingscode van het formulier te openen:
  • Navigeer in uw HubSpot account naar Marketing > Lead capture > Formulieren.
  • Ga met de muis over een formulier en klik op Acties > Delen.
  • Als u in het dialoogvenster contactpersonen die het formulier indienen wilt toevoegen aan een Salesforce-campagne, klikt u op het vervolgkeuzemenu Contactpersonen toevoegen aan een Salesforce-campagne en selecteert u een campagne. Als u een Salesforce-campagne aan uw formulier koppelt, wordt de insluitingscode van het formulier gewijzigd. In dat geval moet u de insluitingscode opnieuw toevoegen aan uw externe site.
  • Klik op Kopiëren.
  • Plak de insluitcode in de HTML-module op uw externe pagina. Om analytics voor je formulier bij te houden, moet je HubSpot-trackingcode geïnstalleerd zijn op de externe pagina waar je een HubSpot-formulier plaatst.


Maak een zelfstandige formulierpagina

Je kunt je formulier ook delen via de Share link. Bij een Share link wordt het formulier weergegeven op een standalone pagina met een eigen URL. Deze deellink kan niet worden verborgen of privé worden gemaakt. Iedereen met de deellink kan het formulier benaderen.

  • Navigeer in uw HubSpot account naar Marketing > Lead capture > Formulieren.
  • Ga met de muis over een formulier en klik op Acties > Delen.
  • Klik in het dialoogvenster op de tab Link delen .
  • Klik op Kopiëren om de URL van het formulier naar je klembord te kopiëren.
  • Open in uw browser een nieuw venster of tabblad en plak de URL van uw formulierpagina in de adresbalk om deze te laden. U kunt de URL van de formulierpagina ook rechtstreeks met anderen delen om hen toegang te geven tot het formulier.

Uw ingesloten formulier stylen in de formuliereditor

Wanneer je je ingesloten formulier opmaakt met de HubSpot formulier editor, kun je een thema gebruiken of je eigen aangepaste stijl toepassen.

Let op: thema's en stijlen in de formulier editor zijn alleen van toepassing op ingesloten formulieren of zelfstandige formulier pagina's. Formulieren op je HubSpot pagina's kunnen alleen gestyled worden met de formulier module stijl opties in de content editor.

Je formulier stylen met een thema

Als je je formulieren wilt stylen zonder aangepaste code te schrijven, kun je vooraf ingestelde thema's toepassen op je ingesloten formulier of standalone formulierpagina. Deze thema's voegen meer aanpassingsmogelijkheden toe aan uw formulieren, naast de globale formulierstijlinstellingen.

Om uw formulier met een thema te stylen:

  • Navigeer in uw HubSpot account naar Marketing > Lead capture > Formulieren.
  • Ga met de muis over een formulier en klik op Bewerken.
  • Klik in de formuliereditor op het tabbladStijl en voorbeeld .
  • Als je een oud formulier bewerkt, schakel dan in het linkerdeelvenster het selectievakjeOude thema behouden uit. Hierdoor wordt de oude standaard HubSpot-stijl van dit formulier verwijderd. Aangepaste CSS of JavaScript die je aan het formulier hebt toegevoegd, werkt dan niet meer. Dit selectievakje geldt niet voor nieuwe formulieren die in je account zijn gemaakt.
  • Selecteer een thema.
  • Klik rechtsboven op Publiceren of Bijwerken.

Een aangepaste stijl gebruiken

Als je een Marketing Hub Starter-, Professional- of Enterprise-abonnement hebt bij je HubSpot-account, kun je ingesloten formulieren ook op een meer granulair niveau stylen.

Om een aangepaste stijl toe te passen:

  • Navigeer in uw HubSpot account naar Marketing > Lead capture > Formulieren.
  • Ga met de muis over een formulier en klik op Bewerken.
  • Klik in de formulier editor op de Style & Preview tab.
  • Klik in het linkerdeelvenster op de Stijl . Hier kun je de breedte van je formuliervelden, lettertype, lettergrootte, letterkleuren en formulierknop instellen. Deze stijlen worden per formulier ingesteld en overschrijven de globale formulierstijlinstellingen.
  • Klikna het aanpassen van uw formulierrechtsboven op Publiceren of Bijwerken.



Uw ingesloten formulier stylen met CSS in uw externe stylesheet

Als je een Marketing Hub of CMS Hub Professional of Enterprise abonnement hebt bij je HubSpot account, kun je je formulier insluiten als een onbewerkt HTML formulier en dit ingesloten formulier vervolgens stylen met CSS in je externe stylesheet.

Om uw ingesloten formulier met CSS te stylen:

  • Navigeer in uw HubSpot account naar Marketing > Lead capture > Formulieren.
  • Ga met de muis over een formulier en klik op Bewerken.
  • Klik in de formulier editor op de Style & preview tab.
  • Klik om de schakelaarAls onbewerkt HTML-formulier instellen aan te zetten. Het formulier wordt als een onbewerkt HTML element op je externe pagina weergegeven in plaats van in een iframe, en de standaard HubSpot opmaak van het formulier wordt verwijderd.
  • Klik rechtsboven op Publiceren of Bijwerken .
  • Voeg de insluitcode toe aan je externe pagina. Als je je formulier al hebt ingesloten, moet je de bestaande insluitcode vervangen door deze nieuwe, niet gestileerde versie. Na het insluiten van uw formulier:
    • Je kunt nu het formulier in je externe stylesheet stylen met CSS.
    • Je kunt ook de insluitcode van het formulier aanpassen om extra aanpassingen te maken. Omdat HubSpot formulieren zijn gebouwd met JavaScript en niet met HTML, is voor het aanpassen vande insluitcode van het formulierde hulp nodig van een ontwikkelaar die weet hoe hij met JavaScript moet werken.

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.