HubSpot-formulieren opmaken en insluiten op een externe website

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

Door een formulier in te sluiten, worden ingevulde formulieren rechtstreeks gesynchroniseerd met je HubSpot-account, waar je contacten kunt beheren, automatiseringen kunt activeren en de prestaties kunt analyseren. Je kunt bijvoorbeeld een HubSpot-formulier toevoegen aan een productpagina op de website van je bedrijf om aanvragen voor demo's vast te leggen en hierop te reageren met een geautomatiseerde e-mail.

Als je formulier is gemaakt in de oude formulier-editor, lees dan hoe je een oud formulier op een externe site kunt instellen en opmaken.

Voordat je aan de slag gaat

Lees, voordat u met deze functie aan de slag gaat, de technische vereisten en overwegingen voor het gebruik van formulieren op externe sites door.

Vereisten

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

Beperkingen en aandachtspunten

• Het instellen van je formulier als een 'raw HTML'-formulier is niet mogelijk in de bijgewerkte formulier-editor. Alleen formulieren die zijn gemaakt met de oude formulier-editor kunnen worden ingesteld als 'raw HTML'.
• Voor het aanpassen van de insluitcode van een formulier is de hulp nodig van een ontwikkelaar die bekend is met JavaScript. Geavanceerdere aanpassingen kunnen worden uitgevoerd met een op maat gemaakt formulier en de HubSpot Forms API.

Je formulier opmaken

Pas de tekst, invoervelden, knoppen en achtergrond van je formulier en de formulierstappen aan. Aanpassingen aan de vormgeving van het formulier worden toegepast op alle formulierstappen. Je kunt afzonderlijke formulierstappen niet apart opmaken.

1. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Marketing > Formulier. Als Meer niet in je account verschijnt, navigeer dan direct naar Marketing > Formulier.
2. Maak een nieuw formulier aan of plaats de muisaanwijzer op een bestaand formulier en klik op 'Bewerken'.
3. Klik in het menu in de linkerzijbalk op het pictogram ' styles -stijlen'.
4. In het paneel 'Formulierstijlen' kunt u de volgende onderdelen aanpassen:
   • Velden: pas het veldaan , inclusief achtergrond en randen. U kunt ook het lettertype, de lettergrootte en de kleuren voor uw labels aanpassen, evenals de kleuren voor uw helptekst, plaatshouders en foutmeldingen.
   • Knoppen: pas de hoogte, de afgeronde hoeken, de achtergrond en het kleurverloop van de knop aan en voeg een slagschaduw toe aan de knop. U kunt ook het lettertype, de lettergrootte en de kleur van de knoptekst aanpassen.
   • Alinea (Rich Text): pas het lettertype, de lettergrootte en de kleur van uw hoofdtekst aan.
   • Koptekst: pas het lettertype en de tekstkleur van je koptekstaan . Je kunt ervoor kiezen om een slagschaduw toe te voegen aan je koptekst.
   • Achtergrond: pas de achtergrond van uw formulier en de stappen in het formulier aan. U kunt een achtergrondkleur instellen of een afbeelding als achtergrond gebruiken. U kunt AI-assistenten gebruiken om afbeeldingen te genereren. U kunt er ook voor kiezen om een rand rond uw formulier in te stellen.
   • Voortgangsbalk: pas de voortgangsbalk op uw formulier aan, inclusief de kleur van de voortgangslijn en het lettertype van de voortgangsbalk.

Een zelfstandige formulierpagina delen

Gebruik een deel-link om uw formulier op een afzonderlijke pagina weer te geven. Iedereen met de deel-link heeft toegang tot het formulier. De URL's van deel-links worden automatisch gegenereerd en kunnen niet worden bewerkt of aangepast.

Om de deel-link te kopiëren:

1. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Marketing > Formulier. Als Meer niet in je account verschijnt, navigeer dan direct naar Marketing > Formulier.
2. Bewe eg de muisaanwijzer over een formulier en klik op Bewerken.
3. Klik rechtsboven op 'Controleren en bijwerken'.
4. Klik onderaan in het rechterpaneel op 'Bijwerken'.
5. Klik in het dialoogvenster op 'Een deelbare link kopiëren'.
6. Klik onderaan op 'Kopiëren'. Hiermee wordt het webadres van de pagina naar uw klembord gekopieerd.
7. Open in uw browser een nieuw venster of tabblad en plak de URL van uw pagina in de adresbalk om deze te laden. U kunt de URL van de formulierpagina ook rechtstreeks met anderen delen om hen toegang tot het formulier te geven.

Kopieer de insluitcode van het formulier

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

Om de insluitcode te kopiëren:

1. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Marketing > Formulier. Als Meer niet in je account verschijnt, navigeer dan direct naar Marketing > Formulier.
2. Beweeg de muis over een formulier en klik op Bewerken.
3. Klik rechtsboven op 'Controleren en bijwerken'.
4. Klik onderaan in het rechterpaneel 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.

Ga naar de code voor formulierontwikkelaars

Sluit uw formulier in en pas de stijl aan met behulp van CSS in uw externe stylesheet. Met deze methode kunt u standaardstijlen overschrijven, gedetailleerde opmaak toepassen op specifieke formulierelementen en algemene regels instellen voor een consistente opmaak in al uw ingesloten formulieren. Lees meer over het definiëren van aangepaste opmaak voor ingesloten formulieren met behulp van CSS.

Om toegang te krijgen tot de ontwikkelaarscode:

1. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Marketing > Formulier. Als Meer niet in je account verschijnt, navigeer dan direct naar Marketing > Formulier.
2. Beweeg de muis over een formulier en klik op Bewerken.
3. Klik rechtsboven op 'Controleren en bijwerken'.
4. Klik onderaan in het rechterpaneel op 'Bijwerken'.
5. Klik in het dialoogvenster op 'Inbeddingscode ophalen'.
6. Klik op het tabblad 'Ontwikkelaarscode (Geavanceerd) '.
7. Als u het risico accepteert dat wijzigingen die extern in CSS of JavaScript worden aangebracht, ervoor kunnen zorgen dat uw formulier niet meer werkt, vink dan het selectievakje 'Ik begrijp de risico's, toon mij de code' aan.
8. Klik onderaan op 'Kopiëren'.
9. Voeg de insluitcode van het formulier toe aan uw externe pagina. Nadat u uw formulier hebt ingesloten, kunt u de opmaak van het formulier in uw externe stylesheet aanpassen met CSS.
   • De CSS-variabelen die u kunt overschrijven, staan in dit artikel vermeld.
   • Globale stijlen overschrijven de op het hoogste niveau gedefinieerde opmaak in al uw ingesloten formulieren. U kunt ook individuele elementen van uw formulieren aanpassen, zoals een rij met formulierelementen, verzendknoppen of formulierkoppen.