Bonnie – Platsanmälan

Installation

Lägg till denna rad på er webbplats där ni vill att formuläret ska visas:

<script src="https://widget.bonnieapp.com/bonnie-waitlist.js" data-center-id="o:xxxxxx"></script>

Byt ut o:xxxxxx mot ert hunddagis-ID (ni får detta av oss).

Det är allt. Formuläret visas automatiskt.

Fungerande exempel

Se hur formuläret fungerar i praktiken:

Grundformulär – enbart obligatoriska fält
Fullständigt formulär – alla valfria fält aktiverade

Formulärets innehåll

Formuläret samlar alltid in följande uppgifter:

Ägaren: förnamn, efternamn, e-post, telefon, adress, postnummer, ort (alla obligatoriska)
Hunden: namn (obligatoriskt)
Placeringsbehov: hur akut behovet är
Övrigt: övriga frågor och information om hunden

Utöver grundfälten kan ni aktivera valfria fält med attribut på skript-taggen (se nedan).

Valfria fält

Aktivera extra fält genom att lägga till attribut på skript-taggen:

<script
  src="https://widget.bonnieapp.com/bonnie-waitlist.js"
  data-center-id="o:xxxxxx"
  data-show-birth-date
  data-show-breed
  data-show-gender
  data-show-neutered
  data-show-height
  data-placement-types="Heltid,Deltid,Flex"
  data-weekdays="mon,tue,wed,thu,fri"
  data-show-other-centers>
</script>

Tillgängliga attribut:

data-show-birth-date – Hundens födelsedatum
data-show-breed – Hundens ras
data-show-gender – Hundens kön (Hane / Tik)
data-show-neutered – Om hunden är kastrerad/steriliserad
data-show-height – Hundens mankhöjd i cm
data-placement-types="Heltid,Deltid" – Typ av placering som en rullgardinsmeny med era värden (kommaseparerade)
data-weekdays="mon,tue,wed,thu,fri" – Önskade dagar som kryssrutor. Ange vilka dagar som är tillgängliga (mon, tue, wed, thu, fri, sat, sun)
data-show-other-centers – Intresse för annan enhet om den valda är full

Lägg till bara de attribut ni faktiskt vill använda. Fält utan attribut visas inte i formuläret.

Utseende

Formuläret fungerar med er befintliga webbplats-CSS — det ärver er sidas typsnitt, färger och formstil.

Om ni vill använda vår standardstyling, lägg till denna rad i er HTML <head>:

<link rel="stylesheet" href="https://widget.bonnieapp.com/bonnie-waitlist.css">

Ni kan också styla formuläret själva med dessa CSS-klasser:

.bonnie-form – Formulärbehållaren
.bonnie-section – Varje sektion (ägare, hund, placering, övrigt)
.bonnie-label – Fältetiketter
.bonnie-input – Textfält
.bonnie-submit-button – Skicka-knappen

Standardstylingen använder Bonnies färger. Byt ut dem genom att sätta dessa CSS-variabler på .bonnie-registration-widget-container i er egen CSS:

--bonnie-primary – Skicka-knappen och fältens kant vid fokus (#15825a)
--bonnie-primary-hover – Skicka-knappen när muspekaren är över den (#0f5a3e)
--bonnie-ink – Text och rubriker (#2c2823)
--bonnie-muted-ink – Platshållartext och rullgardinspilar (#766e63)
--bonnie-surface – Formulärets och fältens bakgrund (#FFFEFA)
--bonnie-input-border – Fältens kant (#DDD6CC)
--bonnie-focus-ring – Ringen runt ett fält i fokus (#D8E8DF)
--bonnie-danger – Felmeddelanden (#c4553d)

<style>
  .bonnie-registration-widget-container {
    --bonnie-primary: #2E5A78;
    --bonnie-primary-hover: #1F4159;
    --bonnie-focus-ring: #D6E2EB;
  }
</style>

Variablerna gäller bara formuläret och påverkar inget annat på er sida.

Integritetspolicy (GDPR)

För att visa er egen integritetsinformation i formuläret, skapa en dold div med er text:

<div id="min-integritetspolicy" style="display: none;">
  <p>Vi behandlar era personuppgifter enligt GDPR...</p>
  <p>Läs mer i vår <a href="/integritetspolicy">integritetspolicy</a>.</p>
</div>

<script
  src="https://widget.bonnieapp.com/bonnie-waitlist.js"
  data-center-id="o:xxxxxx"
  data-privacy-content-id="min-integritetspolicy">
</script>

Formuläret visar er integritetsinformation ovanför skicka-knappen.

Komplett exempel

<!DOCTYPE html>
<html>
<head>
  <title>Anmäl er hund – Vovvetassen Hunddagis</title>
  <!-- Valfritt: Använd standardstyling -->
  <link rel="stylesheet" href="https://widget.bonnieapp.com/bonnie-waitlist.css">
</head>
<body>
  <h1>Välkommen till Vovvetassen Hunddagis</h1>
  <p>Fyll i formuläret nedan för att anmäla er hund.</p>

  <!-- Integritetsinformation (dold, visas av formuläret) -->
  <div id="integritet" style="display: none;">
    <p>Vi behandlar dina personuppgifter för att hantera din platsanmälan.</p>
    <p>Läs mer i vår <a href="/integritetspolicy">integritetspolicy</a>.</p>
  </div>

  <!-- Formulär (en rad) -->
  <script
    src="https://widget.bonnieapp.com/bonnie-waitlist.js"
    data-center-id="o:xxxxxx"
    data-privacy-content-id="integritet">
  </script>
</body>
</html>

Webbläsarstöd

Formuläret fungerar i alla moderna webbläsare och mobila enheter. Besökare med mycket gamla webbläsare ser ett vänligt meddelande som ber dem kontakta er direkt.

Platsanmälan - Integreringsguide