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

Opstellen en vormgeven van een HubSpot-formulier op een externe site

Laatst bijgewerkt: november 6, 2020

Geldt voor:

Alle producten en plannen

Met de formulierentool kunt u informatie verzamelen van de bezoekers van uw website, zodat u deze bezoekers op de markt kunt brengen, verkopen en bedienen terwijl ze met uw bedrijf bezig zijn. Wanneer u een formulier in HubSpot maakt, kunt u toevoegen aan HubSpot pagina's of pagina’s die u buiten HubSpot heeft gemaakt. Formulieren kunnen op twee manieren worden gedeeld op uw externe, niet HubSpot-gehoste site: door de formuliercode in te bedden op een bestaande pagina of door een stand-alone formulierpagina aan te maken waar u naar kunt linken.

Bij beide methoden worden wijzigingen in het formulier in de HubSpot's formulierentool automatisch weergegeven op het live formulier op uw externe site.

Als je met WordPress werkt, leer dan hoe je voeg een formulier in op uw WordPress-post of -pagina.

Voeg de insluitingscode van het formulier toe

Let op: als u een Salesforce-campagne aan uw formulier koppelt, wordt de embedcode van het formulier gewijzigd. In dit geval moet u de insluitingscode opnieuw toevoegen aan uw externe site.

  • Navigeer in uw HubSpot account naar Marketing > Lead capture > Formulieren.
  • Maak een nieuw formulier aan of ga met de muis over een bestaandformulier, klik op het vervolgkeuzemenuActies en selecteer Formulier bewerken.
  • Klik op het tabblad Opties om te kiezen wat er gebeurt nadat een bezoeker uw formulier heeft ingediend. U kunt ervoor kiezen om uw bezoekers door te verwijzen naar een bedankpagina of om een inline bedankbericht te tonen wanneer een bezoeker uw formulier indient.
  • Klik in de formulier-editor, rechtsboven, op Delen.
  • Als u in het dialoogvenster contactpersonen wilt toevoegen die het formulier naar een Salesforce-campagne sturen, klikt u op het vervolgkeuzemenu Contacten toevoegen aan een Salesforce-campagne en selecteert u een campagne.
  • Klik op Kopiëren.
    forms-editor-share-form-copy-form-embed
  • Klik rechtsboven op Publiceren.
  • Plak de insluitcode in de HTML-module op uw externe pagina. Om de analytics voor uw formulier te volgen, moet uw HubSpot tracking code geïnstalleerd zijn op de externe pagina waar u een HubSpot formulier plaatst. HubSpot zal de ingevulde formulieren verzamelen zonder de HubSpot tracking code geïnstalleerd te hebben, maar er zal geen analytics worden geregistreerd.

Als u met WordPress werkt, leer dan hoe u een formulier kunt invoegen op uw WordPress-post of -pagina.

Maak een stand-alone formulierpagina aan

U kunt uw formulier delen via een formulierpagina zodat het bestaat op een eigen pagina op een eigen URL.

  • Navigeer in uw HubSpot account naar Marketing > Lead capture > Formulieren.
  • Maak een nieuw formulier aan of ga met de muis over een bestaandformulier, klik op het vervolgkeuzemenuActies en selecteer Formulier bewerken.
  • Klik rechtsboven op Delen.
  • Klik in het dialoogvenster op het tabblad Koppeling delen .
  • Klik op Kopiëren om de URL van de formulierpagina naar uw klembord te kopiëren.

share-form-own-page

  • Klik rechtsboven op .
  • 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.
Als u een formulier insluit op uw WordPress site, kan het zijn dat u extra CSS-verklaringen moet toepassen binnen uw externe stylesheet om het formulier responsief te maken.

Als u merkt dat uw formulier niet werkt in WordPress of dat de insluitcode wordt gewijzigd wanneer u de live pagina bekijkt, moet u het formulier wellicht invoegen met behulp van een plugin om ervoor te zorgen dat de insluitcode intact blijft. Als u de nieuwste versie van Gutenberg gebruikt, die inline JavaScript verwijdert, gebruik dan de Inline JS Block voor Gutenberg plugin om formulieren en CTA's in te voegen op uw pagina.

Stijl uw ingebedde formulier op externe pagina's

Stijl uw embedded HubSpot formulier op uw externe pagina's op twee manieren in de formulier editor of met CSS in uw externe stylesheet.

In de formulier-editor

Thema

Als u uw formulieren wilt stijlen zonder een aangepaste code te schrijven, kunt u vooraf ingestelde thema's toepassen op uw ingebedde formulier of zelfstandige formulierpagina. De thema's voegen meer aanpassingsopties toe aan uw formulieren, naast eventuele globale formulierstijlinstellingen.

  • Navigeer in uw HubSpot account naar Marketing > LeadCapture > Formulieren.
  • Klik op de naam van een formulier.
  • Klik in de formulier-editor op hettabblad Style & Preview .
  • In het linkervakje, Thema sectie, verwijder het vakje Houd het oude thema aan.

Let op: het aanvinken van hetoude thema zal de vroegere standaard HubSpot styling die op dit formulier is toegepast, verwijderen. Elke aangepaste CSS of JavaScript die u hebt toegevoegd aan het formulier zal niet langer werken. Dit selectievakje is alleen beschikbaar voor oude formulieren en zal niet beschikbaar zijn in nieuwe formulieren die in uw account zijn aangemaakt.

  • Kies een van de vierthema's van .

 

Stijl(Marketing Hub Starter, Professional, Enterprise, of Legacy Marketing Hub Basic only)

Naast thema's kunt u ook ingebedde vormen op een meer korrelig niveau stileren.

  • Navigeer in uw HubSpot account naar Marketing > LeadCapture > Formulieren.
  • Klik op de naam van een formulier.
  • Klik in de formulier-editor op hettabblad Style & Preview .
  • Klik in het linkerdeelvenster op > Style om het uit te breiden. Hier kunt u de breedte van het formulierveld, de lettertypefamilie, de lettergroottes, de letterkleur en de formulierknop stijlen.

Deze stijlen zijn ingesteld op basis van een individuele vorm en zullen de globale vormstijlinstellingen overschrijven.

Let op: thema's en stijlen in de formulier-editor zijn alleen van toepassing op embedded formulieren of standalone formulierpagina's. Formulieren op uw HubSpot pagina's kunnen alleen worden gestyled met de formuliermodule stijlmogelijkhedenin de content editor.

Stijl uw formulier met CSS in uw externe stylesheet (Marketing Hub en CMS Hub Professional of Enterprise, of Legacy Marketing Hub Basic alleen)

  • Navigeer in uw HubSpot account naar Marketing > LeadCapture > Formulieren.
  • Klik op de naam van het formulier.
  • Klik in de formulier-editor op hettabblad Style & preview .
  • Klik om de in te stellen als ruwe HTML-formulier in te schakelen. Het formulier zal als een ruw HTML-element op uw externe pagina worden weergegeven, in tegenstelling tot binnen een iframe, en elke standaard HubSpot styling die op het formulier is toegepast zal worden verwijderd.

options-unstyled-form

  • Klik rechtsboven op Share.
  • Klik in het dialoogvenster op .Kopieer om de insluitingscode van het formulier te kopiëren.
  • Voeg de insluitingscode van het formulier toeaan uw externe pagina. Als u uw formulier al hebt ingebed, moet u de bestaande inbeddecodevervangendoor deze nieuwe, ongestileerde versie.
  • Na het inbedden van uw formulier kunt u het formulier in uw externe stylesheet stijlen met CSS.
  • U kunt ook de insluitingscode van het formulier wijzigenom extra aanpassingen aan het formulier te maken. Aangezien HubSpot formulieren zijn gebouwd met JavaScript, niet met HTML,vereisthet aanpassen van de insluitingscode van het formulier de hulp van een ontwikkelaar die weet hoe hij met JavaScript moet werken.