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. Niet-hubspot-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 je aanbrengt in het formulierenprogramma van HubSpot automatisch doorgevoerd in het live formulier op je externe site. Nadat je het formulier hebt toegevoegd, kun je het HubSpot embed op je externe pagina's opmaken in de formuliereditor of met CSS in je externe stylesheet.

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

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. Zo niet, dan worden formulierverzendingen ook gefilterd voor spam.

De insluitcode voor het formulier toevoegen

• Ga in je HubSpot-account naar Marketing > Formulieren.
• Ga met de muis over een formulier en klik op Acties > Delen.
• Als u in het dialoogvenster contactpersonen die het formulier hebben verzonden 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 campagne van Salesforce aan uw formulier koppelt, 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. Als je analyses voor je formulier wilt bijhouden, moet je HubSpot-trackingcode zijn geïnstalleerd op de externe pagina waar je een HubSpot-formulier plaatst.

Een zelfstandige formulierpagina maken

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 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. 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

Bij het stylen van je ingesloten formulier 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 formuliereditor gelden alleen voor ingesloten formulieren of op zichzelf staande formulierpagina's. Formulieren op je HubSpot pagina's kunnen alleen gestyled worden met de formuliermodule stijlopties in de inhoudseditor.

Stijl je formulier met een thema (legacy)

Als je je bestaande formulier wilt opmaken zonder aangepaste code te schrijven, kun je vooringestelde thema's toepassen op je ingesloten formulier of op je zelfstandige formulierpagina. Deze thema's voegen meer aanpassingsmogelijkheden toe aan je formulieren, naast de globale formulierstijlinstellingen.

Je formulier stylen met een thema:

• 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 en voorbeeld .
• Als je een oud formulier bewerkt, schakel dan in het linkerdeelvenster het selectievakje Oud thema behouden uit. Hiermee verwijder je de oude standaard HubSpot styling die op dit formulier is toegepast. 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

Je kunt 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.
• Als u een oud formulier bewerkt en een Marketing Hub Starter, Professional of Enterprise abonnement hebt, klikt u op het tabblad Stijl & voorbeeld in de formuliereditor.
  • Klik in het linkerdeelvenster op het gedeelte Stijl. Hier kunt u de breedte van uw formuliervelden, lettertype, lettergrootten, letterkleuren en formulierknoppen configureren. Deze stijlen worden per formulier ingesteld en overschrijven de globale instellingen voor formulierstijlen.
  • Nadat u uw formulier hebt aangepast, klikt u rechtsboven op Publiceren of Bijwerken.
    
    

• Als je de bijgewerkte formuliereditor gebruikt, klik je aan de linkerkant op het pictogram Styling.
  • Bij het aanpassen van je Tekst, Invoervelden of Knop kun je kiezen uit bestaande stijlen met behulp van de Snelveldinvoerstijlen. Je kunt de stijl ook handmatig aanpassen voor elk onderdeel van je formulier:
    • Velden: pas het veld aan, inclusief achtergrond en randen. Je kunt ook het lettertype, de lettergrootte en de kleuren voor je labels aanpassen, evenals de kleuren voor je helptekst, plaatsaanduidingen en fouttekst.
    • Knoppen: pas de hoogte van de knop aan, de afronding van de hoeken, de achtergrond, het kleurverloop en voeg een slagschaduw toe aan de knop. Je kunt ook het lettertype, de lettergrootte en de kleur van de tekst van de knop aanpassen.
    • Paragraaf (Rich Text): pas het lettertype, de lettergrootte en de kleur aan voor je hoofdtekst.
    • Kop: pas het lettertype en de tekstkleur van je kop aan. Je kunt ervoor kiezen om slagschaduw toe te voegen aan je koptekst.
    • Achtergrond: pas de achtergrond van je formulier en formulierstappen aan. Je kunt een achtergrondkleur instellen of een afbeelding gebruiken voor de achtergrond. Je kunt AI-assistenten gebruiken om afbeeldingen te genereren. Je kunt er ook voor kiezen om een rand in te stellen voor je formulier.
    • Voortgangsbalk: pas de voortgangsbalk op je formulier aan, inclusief de kleur van de voortgangslijn en het lettertype van de voortgangsbalk.

Geef je ingesloten formulier stijl met CSS in je externe stylesheet (legacy)

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

Let op: je kunt alleen oudere formulieren instellen als onbewerkte HTML.

Je ingesloten formulier opmaken 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 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 alle standaard HubSpot stijlen die op het formulier zijn toegepast worden 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 stijlen 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