Forms

Opstellen en vormgeven van een HubSpot formulier op een externe site

Laatst bijgewerkt: oktober 19, 2020

Geldt voor:

Alle producten en plannen

Formulieren kunnen op twee manieren worden gedeeld op uw externe, niet-HubSpot-hosted site.

Bij beide methoden wordt elke wijziging in het formulier in de formulierentool van HubSpot automatisch weergegeven op het live formulier op uw externe site.

Leer hoe u HubSpot-formulieren kunt toevoegen aan WordPress-pagina's of berichten.

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 bestaand formulier, klik op het vervolgkeuzemenu Acties 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 weer te geven 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 opgenomen.

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 bestaand formulier, klik op het vervolgkeuzemenu Acties 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 Publiceren.
  • 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 > Lead Capture > Formulieren.
  • Klik op de naam van een formulier.
  • Klik in de formulier-editor op het tabblad Stijl & Preview.
  • In het linkervakje, Thema-sectie , maak het vakje Houden oude thema' s leeg.

Let op: het verwijderen van de Keep old theme checkbox 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 vier thema's .

 

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 > Lead Capture > Formulieren.
  • Klik op de naam van een formulier.
  • Klik in de formulier-editor op het tabblad Stijl & Preview.
  • Klik in het linkerdeelvenster op de sectie > Stijl om deze uit te breiden. Hier kunt u de breedte van het formulierveld, de lettertypefamilie, de lettergroottes, de lettertypekleuren en de formulierknop stijlen.

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

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

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

  • Navigeer in uw HubSpot-account naar Marketing > Lead Capture > Formulieren.
  • Klik op de naam van het formulier.
  • Klik in de formulier-editor op het tabblad Stijl & Voorvertoning.
  • Klik op om de Set als ruwe HTML-formulier in te schakelen. Het formulier zal worden weergegeven als een ruw HTML-element op uw externe pagina in tegenstelling tot binnen een iframe, en elke standaard HubSpot-styling toegepast op het formulier zal worden verwijderd.

options-unstyled-form

  • Klik rechtsboven op Delen.
  • Klik in het dialoogvenster op Kopiëren om de insluitingscode van het formulier te kopiëren.
  • Voeg de insluitingscode van het formulier toe aan uw externe pagina. Als u uw formulier al hebt ingesloten, moet u de bestaande insluitingscode vervangen door 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 wijzigen om extra aanpassingen aan het formulier te maken. Aangezien HubSpot formulieren zijn gebouwd met JavaScript, niet met HTML, vereist het aanpassen van de insluitingscode van het formulier de hulp van een ontwikkelaar die weet hoe hij met JavaScript moet werken.