Een HubSpot-formulier op een externe site instellen en vormgeven

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

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

Met beide methoden worden wijzigingen in het formulier in HubSpot's formulieren tool automatisch gereflecteerd op 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

• Ga in je HubSpot account naar Marketing > Leadregistratie > 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 tracking code 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.

• Ga in je HubSpot account naar Marketing > Leadregistratie > 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 uw 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 direct met anderen delen om hen toegang te geven tot het formulier.
  
  

Geef uw ingesloten formulier vorm in de formuliereditor

Als je je formulier in de HubSpot formulier editor opmaakt, kun je een thema gebruiken of je eigen 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 zelfstandige formulierpagina. Deze thema's voegen meer aanpassingsmogelijkheden toe aan uw formulieren, naast de globale formulierstijlinstellingen.

Om uw formulier met een thema te stylen:

• Ga in je HubSpot account naar Marketing > Leadregistratie > Formulieren.
• Ga met de muis over een formulier en klik op Bewerken.
• Klik in de formulier editor op deStyle & Previewtab.
• Als je een oud formulier bewerkt, schakel dan in het linkerdeelvenster het selectievakjeOude thema behoudenuit. 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 opPubliceren ofBijwerken.

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:

• Ga in je HubSpot account naar Marketing > Leadregistratie > Formulieren.
• Ga met de muis over een formulier en klik op Bewerken.
• Klik in de formuliereditor op het tabbladStijl en voorbeeld.
• Klik in het linkerdeelvenster op deStijl. Hier kunt u de breedte van uw formuliervelden, lettertypefamilie, lettergrootten, letterkleuren en formulierknoppen instellen. Deze stijlen worden op individuele formulierbasis ingesteld en overschrijven de globale formulierstijlinstellingen.
  
• Nadat u uw formulier hebt aangepast,klikt u rechtsboven opPubliceren ofBijwerken.
  
  

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:

• Ga in je HubSpot account naar Marketing > Leadregistratie > Formulieren.
• Ga met de muis over een formulier en klik op Bewerken.
• Klik in de formulier editor op deStyle & previewtab.
• Klik om de schakelaarAls onbewerkt HTML-formulier instellenaan te zetten. Het formulier zal als een onbewerkt HTML element op je externe pagina worden weergegeven in plaats van in een iframe, en alle standaard HubSpot stijlen die op het formulier zijn toegepast zullen worden verwijderd.
• Klik rechtsboven op Publiceren of Bijwerken.
• Voeg de insluitingscode van het formulier toe aan je externe pagina. Als je je formulier al hebt ingesloten, moet je de bestaande insluitcodevervangen door deze nieuwe, niet gestileerde versie. Na het insluiten van uw formulier:
  
  • U kunt het formulier in uw externe stylesheet stylen met CSS.
  • Je kunt ookde insluitcode aanpassen om extra aanpassingen aan het formulier te doen. OmdatHubSpot formulieren gebouwd zijn met JavaScript, niet met HTML, is voor het aanpassen vande insluitcodede hulp nodig van een ontwikkelaar die weet hoe hij met JavaScript moet werken.