Opsæt og style en HubSpot-formular på et eksternt site

Når du har oprettet en formular i HubSpot, kan du tilføje den til HubSpot-sider eller sider, du har oprettet uden for HubSpot. Formularer kan deles på din eksterne, ikke-HubSpot-hostede side ved enten:

• Integrere formularens kode på en eksisterende side.
• Oprette en selvstændig formularside, som du kan linke til.

Med begge metoder vil ændringer, der foretages i formularen i HubSpots formularværktøj, automatisk blive afspejlet i live-formularen på dit eksterne site. Når du har tilføjet din formular, kan du style din indlejrede HubSpot-formular på dine eksterne sider i formulareditoren eller med CSS i dit eksterne stylesheet.

Hvis du arbejder med WordPress, kan du lære, hvordan duindsætter en formular i dit WordPress-indlæg eller på din WordPress-side.

Bemærk: Fra den 16. maj 2024, når du tilføjer din formularindlejringskode på en ekstern side, skal domænet for siden tilføjes som et webstedsdomæne for at blive behandlet som et betroet domæne. Hvis ikke, vil indsendelser til formularen også blive filtreret til dine spamindsendelser.

Tilføj formularens indlejringskode

• På din HubSpot-konto skal du navigere til Marketing > Formularer.
• Hold musen over en formular, og klik på Handlinger > Del.
• Hvis du vil føje kontakter, der indsender formularen, til en Salesforce-kampagne i dialogboksen, skal du klikke på rullemenuen Tilføj kontakter til en Salesforce-kampagne og vælge en kampagne. Hvis du knytter en Salesforce-kampagne til din formular, vil formularens indlejringskode blive ændret. I dette tilfælde skal du tilføje indlejringskoden til dit eksterne site igen.
• Klik på Kopier.
• Indsæt indlejringskoden i HTML-modulet på din eksterne side. For at spore analyser for din formular skal din HubSpot-sporingskode være installeret på den eksterne side, hvor du placerer en HubSpot-formular.

Opret en selvstændig formularside

Du kan også dele din formular via Share-linket. I et Share-link vises formularen på en selvstændig side med sin egen URL. Dette delingslink kan ikke skjules eller gøres privat. Alle med delingslinket vil kunne få adgang til formularen.

• På din HubSpot-konto skal du navigere til Marketing > Formularer.
• Hold musen over en formular, og klik på Handlinger > Del.
• Klik på fanen Share link i dialogboksen.
• Klik på Copy for at kopiere formularsidens URL til din udklipsholder.
• Åbn et nyt vindue eller en ny fane i din browser, og indsæt formularsidens URL i adresselinjen for at indlæse den. Du kan også dele formularsidens URL direkte med andre for at give dem adgang til formularen.
  
  

Stil din indlejrede formular i formulareditoren

Når du styler din indlejrede formular med HubSpots formulareditor, kan du enten bruge et tema eller anvende din egen brugerdefinerede stil.

Bemærk: Temaer og stilarter, der er indstillet i formulareditoren, gælder kun for indlejrede formularer eller selvstændige formularsider. Formularer på dine HubSpot-sider kan kun styles med formularmodulets stilindstillinger i indholdseditoren.

Stil din formular med et tema

Hvis du vil style dine formularer uden at skrive nogen brugerdefineret kode, kan du anvende forudindstillede temaer på din indlejrede formular eller selvstændige formularside. Disse temaer tilføjer flere tilpasningsmuligheder til dine formularer ud over eventuelle globale indstillinger for formularstil.

For at style din formular med et tema:

• På din HubSpot-konto skal du navigere til Marketing > Formularer.
• Hold musen over en formular, og klik på Rediger.
• Klik på fanen Style & Preview i formulareditoren.
• Hvis du redigerer en ældre formular, skal du fjerne markeringen i afkrydsningsfeltet Keep old theme i venstre rude. Dette vil fjerne den tidligere standard HubSpot-styling, der blev anvendt på denne formular. Eventuel brugerdefineret CSS eller JavaScript, som du har tilføjet til formularen, vil ikke længere fungere. Dette afkrydsningsfelt gælder ikke for nye formularer, der oprettes på din konto.
• Vælg et tema.
• Klik på Udgiv eller Opdater øverst til højre.

Brug en brugerdefineret stil

Hvis du har et Marketing Hub Starter-, Professional- eller Enterprise-abonnement sammen med din HubSpot-konto, kan du også style indlejrede formularer på et mere detaljeret niveau.

Sådan anvender du en brugerdefineret stil:

• På din HubSpot-konto skal du navigere til Marketing > Formularer.
• Hold musen over en formular, og klik på Rediger.
• Klik på fanen Style & Preview i formulareditoren.
• Klik på afsnittetStil i venstre rude. Her kan du konfigurere din formularfeltbredde, skrifttypefamilie, skriftstørrelser, skrifttypefarver og formularknap. Disse stilarter indstilles for hver enkelt formular og tilsidesætter de globale indstillinger for formularstil.
• Når du har tilpasset din formular, skal du klikke på Udgiv eller Opdater øverst til højre.
  
  

Stil din indlejrede formular med CSS i dit eksterne stilark

Hvis du har et Marketing Hub- eller Content Hub Professional- eller Enterprise-abonnement med din HubSpot-konto, kan du indlejre din formular som en rå HTML-formular og derefter style denne indlejrede formular med CSS i dit eksterne stilark.

Sådan styler du din indlejrede formular med CSS:

• På din HubSpot-konto skal du navigere til Marketing > Formularer.
• Hold musen over en formular, og klik på Rediger.
• Klik på fanen Style & preview i formulareditoren.
• Klik for at slå Set as raw HTML form switch til. Formularen vil blive gengivet som et råt HTML-element på din eksterne side i modsætning til inde i en iframe, og enhver standard HubSpot-styling, der er anvendt på formularen, vil blive fjernet.
• Klik på Udgiv eller Opdater øverst til højre.
• Tilføj formularens indlejringskode til din eksterne side. Hvis du allerede har indlejret din formular, skal du erstatte den eksisterende indlejringskode med denne nye, ustilede version. Når du har indlejret din formular:
  
  • Du vil kunne style formularen i dit eksterne stylesheet med CSS.
  • Du kan også ændre formularens indlejringskode for at foretage yderligere formulartilpasninger. Da HubSpot-formularer er bygget med JavaScript, ikke HTML, kræver tilpasning af formularens indlejringskode hjælp fra en udvikler, der ved, hvordan man arbejder med JavaScript.