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. Als je inhoud buiten HubSpot wordt gehost, kun je formulieren toevoegen met de volgende methoden:

• Embed het formulier door de embedcode te kopiëren en toe te voegen aan je externe pagina.
• Gebruik de koppeling voor het delen van formulieren, waarmee je een zelfstandige webpagina voor je formulier krijgt waarnaar je kunt linken.

Met beide methoden worden wijzigingen in het formulier automatisch bijgewerkt op het live formulier op je externe site. Je kunt je ingesloten HubSpot formulier stijlen in de formuliereditor of met CSS in je externe stylesheet.

Voordat je begint

• Als je je formulier als onbewerkt HTML-formulier wilt instellen, is deze optie niet beschikbaar in de bijgewerkte formuliereditor. Alleen formulieren die gemaakt zijn met de oude formuliereditor kunnen ingesteld worden als onbewerkte HTML.
• Als je je HubSpot-formulier insluit op een externe pagina, moet je de HubSpot-trackingcode installeren om analytics bij te houden. Leer hoe je de HubSpot trackingcode installeert.

Geef je formulier stijl

Pas de tekst, invoervelden, knop en achtergrond van je formulier en formulierstappen aan. De stijlopties die je instelt op het tabblad Globale stijl 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 menu aan de linkerkant op het pictogram styles Styling.
4. U kunt de stijl aanpassen voor de volgende formulieronderdelen:
   • 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.

De insluitcode van het formulier kopiëren

Je kunt je HubSpot-formulier insluiten 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 toegang te krijgen tot de insluitcode:

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.

Gebruik de link Delen om een zelfstandige formulierpagina te delen

Je kunt je formulier delen met de link delen, waarmee het formulier op een op zichzelf staande webpagina wordt weergegeven. Deze link kan niet verborgen of privé gemaakt worden. Iedereen met de link delen heeft toegang tot het formulier.

Om de link te delen:

1. Ga in je HubSpot-account naar Marketing > Formulieren.
2. Ga met 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 formulierpagina naar je klembord.
7. 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 je ingesloten formulier vorm met CSS in je externe stylesheet

Gebruikers met een Marketing Hub of Content Hub Professional of Enterprise account kunnen formulieren insluiten en deze opmaken met CSS in het externe stylesheet. Met deze methode kunt u standaardstijlen opheffen, verfijnde opmaak toepassen op specifieke formulierelementen en algemene regels instellen voor consistente opmaak voor al 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.