Een legacy-formulier op een externe site instellen en opmaken

Nadat je een formulier in HubSpot hebt aangemaakt, kun je dit toevoegen aan HubSpot-pagina’s of aan pagina’s die je buiten HubSpot hebt gemaakt. Formulieren kunnen op je externe, niet door HubSpot gehoste website worden gedeeld op de volgende manieren:

• De formuliercode in een bestaande pagina in te sluiten.
• Een aparte formulierpagina aan te maken waarnaar je kunt linken.

Bij beide methoden worden wijzigingen die je in de formuliertool van HubSpot aanbrengt, automatisch doorgevoerd in het live formulier op je externe site. Nadat je je formulier hebt toegevoegd, kun je de opmaak van je ingesloten HubSpot-formulier op je externe pagina’s aanpassen in de formuliereditor of met CSS in je externe stylesheet. Als je met WordPress werkt, lees dan hoe je een formulier in je WordPress-bericht of -pagina kunt invoegen.

Let op: dit artikel is uitsluitend bedoeld voor bestaande formulieren die zijn gemaakt met de oude editor. Het wordt aanbevolen om de vernieuwde formulier-editor te gebruiken voor het maken en beheren van formulieren. Lees hier hoe je formulieren kunt opmaken en insluiten op een externe site.

Voordat u aan de slag gaat

Wanneer u de insluitcode van uw formulier op een externe pagina toevoegt, moet het domein van die pagina als sitedomein worden toegevoegd om als vertrouwd domein te worden behandeld. Als dat niet gebeurt, worden inzendingen via het formulier ook naar uw spamfolder gefilterd.

De insluitcode van het formulier ophalen

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 muisaanwijzer over een formulier en klik op Acties > Delen.
3. Als u in het dialoogvenster contactpersonen die het formulier invullen 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 aan uw formulier koppelt, wordt de insluitcode van het formulier gewijzigd. In dat geval moet u de insluitcode opnieuw toevoegen aan uw externe site.
4. Klik op 'Kopiëren'.
5. Plak de insluitcode in de HTML-module op je 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 deel-link. Via een deel-link wordt het formulier weergegeven op een zelfstandige pagina met een eigen URL. Deze deel-link kan niet worden verborgen of privé worden gemaakt. Iedereen met de deel-link heeft toegang tot het formulier.

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 Acties > Delen.
3. Klik in het dialoogvenster op het tabblad 'Deel-link '.
4. Klik op 'Kopiëren' om de URL van de formulierpagina naar uw klembord te kopiëren.
5. Open in uw browser een nieuw venster of tabblad en plak de URL van de formulierpagina 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.
   
   

Pas de opmaak van uw ingesloten formulier aan in de formuliereditor

Wanneer je je ingesloten formulier opmaakt met de HubSpot-formuliereditor, kun je een thema gebruiken of je eigen aangepaste stijl toepassen.

Let op: thema's en stijlen die in de formulier-editor zijn ingesteld, zijn alleen van toepassing op ingesloten formulieren of op zelfstandige formulierpagina's. Formulieren op je HubSpot-pagina's kunnen alleen worden opgemaakt met de stijlopties van de formuliermodule in de inhoudseditor.

Je formulier opmaken met een thema

Als je je oudere formulier wilt aanpassen zonder aangepaste code te schrijven, kun je vooraf ingestelde thema’s toepassen op je ingesloten formulier of op een op zichzelf staande formulierpagina. Deze thema’s bieden je meer aanpassingsmogelijkheden voor je formulieren, naast de algemene stijlinstellingen voor formulieren.

Zo pas je de stijl van je formulier aan met een thema:

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 muisaanwijzer over een formulier en klik op Bewerken.
3. Klik in de formuliereditor op het tabblad 'Stijl en voorbeeld '.
4. Als je een ouder formulier bewerkt, schakel dan in het linkerdeelvenster het selectievakje 'Oud thema behouden' uit. Hierdoor wordt de vroegere standaard HubSpot-opmaak die op dit formulier was toegepast, verwijderd. Eventuele aangepaste CSS of JavaScript die je aan het formulier hebt toegevoegd, werkt dan niet meer. Dit selectievakje is niet van toepassing op nieuwe formulieren die in je account worden aangemaakt.
5. Selecteer een thema.
6. Klik rechtsboven op 'Publiceren ' of 'Bijwerken'.

Een aangepaste stijl gebruiken

U kunt formulieren ook op een gedetailleerder niveau opmaken.

Een aangepaste stijl toepassen:

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 in de formulier-editor op het tabblad 'Stijl en voorbeeld '.
   • Klik in het linkerdeelvenster op het gedeelte'Stijl '. Hier kunt u de breedte van de formuliervelden, het lettertype, de lettergrootte, de letterkleur en de formulierknop instellen. Deze stijlen worden per formulier ingesteld en hebben voorrang op de algemene stijlinstellingen voor formulieren.
   • Nadat u uw formulier hebt aangepast, klikt u rechtsboven op ‘Publiceren ’ of ‘Bijwerken’.

Pas de stijl van uw ingesloten formulier aan met CSS in uw externe stylesheet (verouderde methode)

Als u een verouderd formulier gebruikt, kunt u uw formulier als een onbewerkt HTML-formulier insluiten. Vervolgens kunt u dit ingesloten formulier opmaken met CSS in uw externe stylesheet.

Let op: alleen verouderde formulieren kun je instellen als onbewerkte HTML. Lees meer over het opmaken van je ingesloten formulier met CSS in de vernieuwde formulier-editor.

Om je ingesloten formulier met CSS op te maken:

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 in de formulier-editor op het tabblad 'Stijl & voorbeeld '.
4. Klik om de schakelaar 'Instellen als onbewerkte HTML-formulier' in te schakelen. Het formulier wordt dan weergegeven als een onbewerkt HTML-element op je externe pagina, in plaats van binnen een iframe. Eventuele standaard HubSpot-opmaak die op het formulier is toegepast, wordt verwijderd.
5. Klik rechtsboven op ‘Publiceren ’ of ‘Bijwerken’.
6. 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, ongestileerde versie. Nadat je je formulier hebt ingesloten:
   
   • Je kunt het formulier in je externe stylesheet opmaken met CSS.
   • Je kunt ook de insluitcode van het formulier aanpassen om het formulier verder naar wens aan te passen. Aangezien HubSpot-formulieren zijn gebouwd met JavaScript en niet met HTML, heb je voor het aanpassen van de insluitcode de hulp nodig van een ontwikkelaar die bekend is met JavaScript.