HubSpot formulieren opmaken en insluiten op een externe site

Gebruik HubSpot formulieren op je externe website om leads vast te leggen en automatisch contactgegevens te synchroniseren met je HubSpot account. Je kunt je formulier opmaken in HubSpot en de insluitcode gebruiken om het aan je site toe te voegen. Of gebruik een share link om een op zichzelf staand formulier naar je publiek te sturen.

Het insluiten van een formulier zorgt ervoor dat inzendingen direct worden gesynchroniseerd met je HubSpot account, waar je contacten kunt beheren, automatisering kunt activeren en prestaties kunt analyseren. Je kunt bijvoorbeeld een HubSpot-formulier toevoegen aan een productpagina op de website van je bedrijf om demo-aanvragen vast te leggen en op te volgen met een geautomatiseerde e-mail.

Als je formulier is gemaakt in de oudere formuliereditor, lees dan hoe je een oudere formulier op een externe site kunt instellen en vormgeven.

Voordat u aan de slag gaat

Bekijk de technische vereisten en overwegingen voor het gebruik van formulieren op externe sites voordat je met deze functie aan de slag gaat.

Vereisten

• Als je een HubSpot formulier insluit op een externe site, moet je het domein van de site toevoegen aan je trackinginstellingen. Formulierinzendingen van domeinen die niet zijn toegevoegd, worden gemarkeerd als spam.
• Om statistieken van je ingesloten formulier bij te houden, moet je de HubSpot trackingcode op je externe pagina installeren .
  

Beperkingen en overwegingen

• Het instellen van je formulier als een onbewerkt HTML-formulier is niet beschikbaar in de bijgewerkte formuliereditor. Alleen formulieren die zijn gemaakt met de oudere formuliereditor kunnen worden ingesteld als onbewerkte HTML.
• Voor het aanpassen van de insluitcode van een formulier is de hulp nodig van een ontwikkelaar die weet hoe hij met JavaScript moet werken. Meer geavanceerde aanpassingen kunnen worden gedaan met een zelfgemaakt formulier en de HubSpot Forms API.

Stijl je formulier

Pas de tekst, invoervelden, knoppen en achtergrond van je formulier en formulierstappen aan. Formulierstijlen worden toegepast op alle formulierstappen. Je kunt individuele formulierstappen niet afzonderlijk stylen.

1. Ga in je HubSpot-account naar Marketing > Formulieren.
2. Maak een nieuw formulier of ga met de muis over een bestaand formulier en klik op Bewerken.
3. Klik in het linker zijbalk menu op styles Styling.
4. In het paneel Formulierstijlen kunt u de volgende onderdelen aanpassen:
   • Velden: pas het veld aan, inclusief achtergrond en randen. U kunt ook het lettertype, de lettergrootte en de kleuren voor uw labels aanpassen, evenals de kleuren voor uw 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.

Een zelfstandige formulierpagina delen

Gebruik een link om je formulier weer te geven op een op zichzelf staande pagina. Iedereen met de link kan het formulier openen. De link kan niet verborgen of privé gemaakt worden.

De link voor delen kopiëren:

1. Ga in je HubSpot-account naar Marketing > Formulieren.
2. Beweeg de muis over een formulier en klik op Bewerken.
3. Klik rechtsboven op Bekijken en bijwerken.
4. Klik in het rechterpaneel onderaan op Bijwerken.
5. Klik in het dialoogvenster op Een gedeelde link kopiëren.
6. Klik onderaan op Kopiëren. Hiermee kopieer je het webadres van de pagina naar je klembord.
7. Open in uw browser een nieuw venster of tabblad en plak de URL van uw pagina in de adresbalk om deze te laden. Je kunt de URL van de formulierpagina ook rechtstreeks met anderen delen om hen toegang te geven tot het formulier.

Kopieer de insluitcode van het formulier

Sluit uw formulier in op uw externe pagina door de insluitcode van het formulier te kopiëren en op uw externe pagina te plakken. Om statistieken voor je ingesloten formulier bij te houden, moet je HubSpot trackingcode geïnstalleerd zijn op de externe pagina waar je het HubSpot-formulier insluit.

Om de insluitcode te kopiëren:

1. Ga in je HubSpot-account naar Marketing > Formulieren.
2. Beweeg de muis over een formulier en klik op Bewerken.
3. Klik rechtsboven op Controleren en bijwerken.
4. Klik in het rechterpaneel, onderaan, op Bijwerken.
5. Klik in het dialoogvenster op Insluitcode ophalen.
6. Klik op het tabblad Insluitcode op Kopiëren.
7. Plak de insluitcode in de HTML-module op je externe pagina.

Toegang tot de code van de formulierontwikkelaar

Embed uw formulier en pas de stijl aan met CSS in uw externe stylesheet. Met deze methode kunt u standaardstijlen opheffen, verfijnde styling toepassen op specifieke formulierelementen en globale regels instellen voor consistente styling van uw ingesloten formulieren. Meer informatie over het definiëren van aangepaste opmaak voor ingesloten formulieren met CSS.

Toegang tot de ontwikkelaarscode:

1. Ga in je HubSpot-account naar Marketing > Formulieren.
2. Beweeg de muis over een formulier en klik op Bewerken.
3. Klik rechtsboven op Controleren en bijwerken.
4. Klik in het rechterpaneel, onderaan, op Bijwerken.
5. Klik in het dialoogvenster op Insluitcode ophalen.
6. Klik op het tabblad Ontwikkelcode (Geavanceerd).
7. Schakel het selectievakje Ik begrijp de risico's in en laat me de code zien in als u het risico wilt accepteren dat wijzigingen in CSS of JavaScript uw formulier kunnen beschadigen.
8. Klik onderaan op Kopiëren.
9. Voeg de insluitcode van het formulier toe aan uw externe pagina. Nadat je je formulier hebt ingesloten, kun je het formulier in je externe stylesheet opmaken met CSS.
   • De CSS-variabelen die je kunt overschrijven staan in dit artikel.
   • Globale stijlen overschrijven de stijl op het hoogste niveau voor al je ingesloten formulieren. Je kunt ook individuele elementen van je formulieren aanpassen, zoals de rij van een formulierelement, verzendknoppen of formulierkoppen.