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 på uden for HubSpot. Formularer kan deles på din eksterne, ikke-HubSpot-hostede side ved enten:

• Indlejring af formularens kode på en eksisterende side.
• Oprettelse af 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 du indsætter en formular på dit WordPress-indlæg eller 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 tilføje kontakter, der indsender formularen, til en Salesforce-kampagne, skal du i dialogboksen 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 websted 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 rates 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 Del link i dialogboksen.
• Klik på Kopier 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 kunstyles med formularmodulets stilindstillinger i indholdseditoren.

Stil din formular med et tema (legacy)

Hvis du vil style din gamle formular 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 Behold gammelt tema 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 er oprettet på din konto.
• Vælg et tema.
• Klik på Udgiv eller Opdater øverst til højre.

Brug en brugerdefineret stil

Man kan også style formularer på et mere detaljeret niveau.

For at anvende en brugerdefineret stil:

• På din HubSpot-konto skal du navigere til Marketing > Formularer.
• Hold musen over en formular, og klik på Rediger.
• Hvis du redigerer en ældre formular og har et Marketing Hub Starter-, Professional- eller Enterprise-abonnement , skal du klikke på fanen Style & Preview i formulareditoren.
  • Klik på sektionen Style 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å Publish eller Update øverst til højre.
    
    

• Hvis du bruger den opdaterede formulareditor, skal du klikke på Styling-ikonet i venstre side.
  • Når du tilpasser din tekst, dine indtastningsfelter eller din knap, kan du vælge mellem eksisterende stilarter ved hjælp af Quick field input styles. Alternativt kan du manuelt tilpasse stilen for hver komponent i din formular:
    • Felter: Tilpas feltet, inklusive baggrund og kanter. Du kan også tilpasse skrifttype, skriftstørrelse og farver for dine labels samt farverne for din hjælpetekst, pladsholdere og fejltekst.
    • Knapper: Tilpas knappens højde, hjørneafrunding, baggrund, gradient, og tilføj en skygge til knappen. Du kan også tilpasse skrifttype, skriftstørrelse og farve for knapteksten.
    • Paragraph (Rich Text): Tilpas skrifttype, skriftstørrelse og farve til din brødtekst.
    • Overskrift: Tilpas skrifttype og tekstfarve for din overskrift. Du kan vælge at tilføje slagskygge til din overskriftstekst.
    • Baggrund: Tilpas baggrunden for din formular og formularens trin. Du kan vælge at indstille en baggrundsfarve eller bruge et billede som baggrund. Du kan bruge AI-assistenter til at generere billeder. Du kan også vælge at sætte en kant på din formular.
    • Fremdriftslinje: Tilpas fremdriftslinjen på din formular, herunder farven på fremdriftslinjen og skrifttypen på fremdriftslinjen.

Stil din indlejrede formular med CSS i dit eksterne stilark (legacy)

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

Bemærk: Du kan kun indstille ældre formularer som rå HTML.

For at style 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 stedet for 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 ind lejringskode 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