Een HubSpot-formulier op een externe site instellen en vormgeven

Nadat je een formulier in HubSpot hebt gemaakt, kun je het 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 te embedden op een bestaande pagina.
• Een op zichzelf staande formulierpagina te maken waarnaar je kunt linken.

Met beide methoden worden wijzigingen die je in de formulieren tool van HubSpot aanbrengt automatisch doorgevoerd in het live formulier op je externe site. Nadat je je formulier hebt toegevoegd, kun je je ingesloten HubSpot formulier op je externe pagina's opmaken in de formuliereditor of met CSS in je externe stylesheet.

Als je met WordPress werkt, lees dan hoe je een formulier kunt invoegen op een WordPress bericht of pagina.

Let op: vanaf 16 mei 2024, wanneer je de insluitcode van je formulier toevoegt op een externe pagina, moet het domein voor de pagina worden toegevoegd als een site domein om te worden behandeld als een vertrouwd domein. Als dit niet het geval is, worden inzendingen op het formulier ook gefilterd voor spam.

De insluitcode voor het formulier toevoegen

• Ga in je HubSpot-account naar Marketing > Formulieren.
• Beweeg de muis over een formulier en klik op Acties > Delen.
• Als u in het dialoogvenster contactpersonen die het formulier verzenden 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 koppelt aan uw formulier, wordt de insluitcode van het formulier gewijzigd. In dat geval moet u de insluitcode opnieuw toevoegen aan uw externe site.
• Klik op Kopiëren.
• Plak de insluitcode in de HTML-module op uw externe pagina. Om statistieken voor je formulier bij te houden, moet je HubSpot-trackingcode zijn geïnstalleerd op de externe pagina waar je een HubSpot-formulier plaatst.

Maak een zelfstandige formulierpagina

Je kunt je formulier ook delen via de link Delen. Bij een link Delen wordt het formulier weergegeven op een op zichzelf staande pagina met een eigen URL. Deze link kan niet verborgen of privé gemaakt worden. Iedereen met de link Delen heeft toegang tot het formulier.

• Ga in je HubSpot-account naar Marketing > 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 de formulierpagina 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. Je 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 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 die zijn ingesteld in de formulier editor zijn alleen van toepassing op ingesloten formulieren of zelfstandige formulierpagina's. Formulieren op je HubSpot pagina's kunnen alleen worden gestyled met de formuliermodule stijlopties in de inhoudseditor.

Stijl je formulier 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 op je zelfstandige formulierpagina. Deze thema's voegen meer aanpassingsopties toe aan je formulieren, naast de globale formulierstijlinstellingen.

Om je formulier te stylen met een thema:

• Ga in je HubSpot-account naar Marketing > Formulieren.
• Beweeg de muis over een formulier en klik op Bewerken.
• Klik in de formuliereditor op het tabblad Stijl en voorbeeld .
• Als je een oud formulier bewerkt, schakel dan in het linkerdeelvenster het selectievakje Oud 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 niet meer. Dit selectievakje is niet van toepassing op nieuwe formulieren die in je account worden 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 gedetailleerder niveau stylen.

Om een aangepaste stijl toe te passen:

• Ga in je HubSpot-account naar Marketing > Formulieren.
• Beweeg de muis over een formulier en klik op Bewerken.
• Klik in de formuliereditor op het tabblad Stijl en voorbeeld .
• Klik in het linkerdeelvenster op het onderdeelStijl. Hier kun je de breedte van je formuliervelden, lettertype, lettergroottes, letterkleuren en formulierknoppen instellen. Deze stijlen worden per formulier ingesteld en overschrijven de algemene instellingen voor formulierstijlen.
• Nadat u uw formulier hebt aangepast, klikt u rechtsboven op Publiceren of Bijwerken.
  
  

Geef je ingesloten formulier stijl met CSS in je 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 stijlen met CSS in je externe stylesheet.

Zo maak je je ingesloten formulier op met CSS:

• Ga in je HubSpot-account naar Marketing > Formulieren.
• Ga met de muis over een formulier en klik op Bewerken.
• Klik in de formuliereditor op het tabblad Stijl & voorbeeld .
• Klik op om de schakelaar Als ruw 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 alle standaard HubSpot opmaak die op het formulier is toegepast wordt verwijderd.
• Klik rechtsboven op Publiceren of Bijwerken.
• Voeg de insluitcode van het formulier 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 je formulier:
  
  • Je kunt het formulier in je externe stylesheet opmaken met CSS.
  • Je kunt ook de insluitcode van het formulier aanpassen om het formulier verder aan te passen. Omdat HubSpot formulieren zijn gebouwd met JavaScript en niet met HTML, is voor het aanpassen van de insluitcode van het formulier de hulp nodig van een ontwikkelaar die weet hoe hij met JavaScript moet werken.