BMI Rechner für Webseite kostenlos einbinden

Du möchtest Deinen Besuchern einen BMI Rechner auf Deiner Webseite anbieten? Dafür musst Du keinen eigenen Rechner programmieren. Im Internet gibt es verschiedene kostenlose BMI Rechner, die Du mit wenigen Handgriffen per HTML-Code, JavaScript oder iFrame in Deine Homepage einbinden kannst.

Auch mit WordPress ist die Integration normalerweise problemlos möglich. Du kopierst einfach den vom Anbieter bereitgestellten Code und fügst ihn an der gewünschten Stelle Deiner Webseite ein.

Auf dieser Seite stellen wir Dir kostenlose BMI Rechner für die eigene Homepage vor und zeigen Dir, wie Du einen solchen Rechner in HTML oder WordPress einbindest.

Kostenlosen BMI Rechner direkt ausprobieren

So sieht ein fertig eingebundener BMI Rechner aus. Gib einfach Körpergröße und Gewicht ein und teste unseren Rechner direkt hier auf der Seite.

BMI Rechner

Berechne kostenlos deinen Body-Mass-Index (BMI). Gib einfach deine Körpergröße und dein Gewicht ein.

Körpergröße in cm

Gewicht in kg

BMI-Einteilung für Erwachsene

Unter 18,5 Untergewicht

18,5 – 24,9 Normalgewicht

25,0 – 29,9 Übergewicht

30,0 – 34,9 Adipositas Grad I

35,0 – 39,9 Adipositas Grad II

Ab 40,0 Adipositas Grad III

Hinweis: Der BMI ist lediglich ein Orientierungswert und berücksichtigt beispielsweise Muskelmasse, Körperbau, Alter und Geschlecht nur eingeschränkt. Er ersetzt keine medizinische Beratung.

Was ist ein BMI Rechner?

BMI steht für Body-Mass-Index. Der BMI setzt das Körpergewicht eines Menschen ins Verhältnis zu seiner Körpergröße.

Die grundlegende Formel lautet:

BMI = Körpergewicht in kg / (Körpergröße in Metern × Körpergröße in Metern)

Eine Person mit einem Gewicht von 75 kg und einer Körpergröße von 1,80 m hätte beispielsweise einen BMI von rund 23,1.

Ein BMI Rechner übernimmt diese Berechnung automatisch. Der Besucher gibt lediglich Körpergröße und Gewicht ein und erhält anschließend seinen BMI angezeigt.

Gerade Webseiten zu den Themen Gesundheit, Ernährung, Sport, Fitness oder Wellness können ihren Besuchern mit einem solchen Rechner einen praktischen zusätzlichen Service anbieten.

Kostenlose BMI Rechner für die eigene Homepage

Du musst einen BMI Rechner nicht selbst programmieren. Verschiedene Anbieter stellen fertige Rechner zur Verfügung, die Du kostenlos in Deine Webseite integrieren kannst.

AidaForm

Mit AidaForm kannst Du einen fertigen BMI Rechner kostenlos in Deine eigene Webseite einbinden. Dafür ist keine Registrierung erforderlich: Du kopierst einfach den bereitgestellten Embed-Code und fügst ihn an der gewünschten Stelle Deiner Webseite ein.

Interessant ist AidaForm auch für Webmaster, die einen BMI Rechner individuell gestalten möchten. Über den Formular-Builder lassen sich unter anderem Farben, Schriftarten, Inhalte und die Ergebnisdarstellung anpassen. Für diese erweiterten Funktionen ist allerdings ein entsprechender AidaForm-Tarif erforderlich.

Geeignet für: HTML-Webseiten, Blogs und WordPress

Besonderheit: Fertiger BMI Rechner kostenlos und ohne Registrierung per Embed-Code einbindbar; zusätzlich steht eine individuell anpassbare BMI-Rechner-Vorlage zur Verfügung.

👉 Link: https://aidaform.com/de/templates/bmi-calculator.html

BMI-Calculator.net

Mit BMI-Calculator.net kannst Du einen kostenlosen BMI Rechner als Widget in Deine eigene Webseite einbinden. Besonders praktisch ist der integrierte Widget-Generator: Du kannst den Rechner zunächst konfigurieren und anschließend den fertigen Einbettungscode kopieren.

Das Erscheinungsbild lässt sich umfangreich an Deine Webseite anpassen. Zur Auswahl stehen verschiedene Designvorlagen, Rahmenstile und Farben. Außerdem kannst Du unter anderem die Breite des Rechners, die verwendeten Maßeinheiten und die Darstellung der Ergebnisse festlegen.

Neben dem klassischen BMI Rechner stehen zahlreiche weitere Rechner zur Verfügung, darunter ein BMI Rechner für Kinder, BMR-Rechner, TDEE-Rechner, Körperfett-Rechner und Idealgewicht-Rechner.

Geeignet für: HTML-Webseiten, WordPress, Wix, Squarespace, Webflow, Drupal und Joomla

Besonderheit: Umfangreich konfigurierbarer kostenloser BMI Rechner mit verschiedenen Designs, Farben und Einstellungen sowie fertigem Einbettungscode.

👉 Link: https://www.bmi-calculator.net/de/widget/bmi/

BMI-Rechner.biz

BMI-Rechner.biz bietet kostenlose BMI Rechner und weitere Gesundheitsrechner zum Einbau in die eigene Homepage oder den eigenen Blog an.

Der benötigte Code wird vom Anbieter fertig zur Verfügung gestellt und kann einfach kopiert und an der gewünschten Stelle in die Webseite eingefügt werden. Die Einbindung ist damit auch für Webmaster ohne umfangreiche Programmierkenntnisse möglich.

Neben verschiedenen BMI Rechnern stehen unter anderem Rechner für Idealgewicht, Grundumsatz und Blutdruck sowie weitere Gesundheits-Tools zur Verfügung.

Geeignet für: HTML-Webseiten, Blogs und WordPress

Besonderheit: Große Auswahl kostenloser Gesundheitsrechner mit fertigem Code zum Einbinden.

👉 Link: https://www.bmi-rechner.biz/webmaster.html

BMI-Rechner.net

BMI-Rechner.net stellt einen konfigurierbaren BMI Rechner für die eigene Homepage zur Verfügung.

Das Design des Rechners lässt sich unter anderem über Hintergrund-, Button-, Text- und Rahmenfarben anpassen. Anschließend wird der passende HTML-Code erzeugt.

Praktisch ist, dass der Anbieter auch Hinweise zur Integration in WordPress gibt.

Geeignet für: HTML-Webseiten und WordPress

Besonderheit: Design des Rechners lässt sich anpassen.

👉 Link: https://www.bmi-rechner.net/webmaster.htm

BodyMetricCalculator.com

BodyMetricCalculator.com bietet einen kostenlosen BMI Rechner als JavaScript-Widget für die eigene Webseite an. Für die Einbindung werden lediglich ein HTML-Element und ein Script benötigt – ein WordPress-Plugin oder zusätzliche JavaScript-Bibliotheken sind nicht erforderlich.

Der BMI Rechner unterstützt sowohl metrische als auch imperiale Maßeinheiten. Über verschiedene Parameter können unter anderem Farben, Hintergrund, Überschrift und Darstellung des Widgets angepasst werden. Durch die gekapselte Darstellung soll das Design des Rechners möglichst wenig mit dem vorhandenen CSS der eigenen Webseite kollidieren.

Geeignet für: HTML-Webseiten, statische Webseiten und WordPress

Besonderheit: Anpassbares JavaScript-Widget mit metrischen und imperialen Einheiten; der „Powered by BodyMetricCalculator.com“-Hinweis muss bei der kostenlosen Variante erhalten bleiben.

👉 Link: https://bodymetriccalculator.com/free-bmi-calculator-widget

FoodPal BMI Rechner

FoodPal bietet einen kostenlosen BMI Rechner HTML Code Generator an.

Du kannst zunächst den gewünschten Rechner auswählen und anschließend Sprache, Maßeinheiten und verschiedene Farben einstellen. Der benötigte HTML-Code wird automatisch erzeugt und kann anschließend kopiert werden.

Neben dem BMI Rechner stehen auch Rechner für Idealgewicht, Kalorienbedarf und Kalorienverbrauch zur Verfügung.

Geeignet für: HTML-Webseiten, Blogs und WordPress

Besonderheit: Umfangreiche Anpassungsmöglichkeiten und mehrere Sprachen.

👉 Link: https://www.foodpal-app.com/de/rechner/html-code-generator

haynes lab

haynes lab stellt einen kostenlosen BMI Rechner als JavaScript-Widget für die eigene Webseite bereit. Der Rechner kann mit einem fertigen Script-Code direkt in eine Webseite eingebunden werden und benötigt keine zusätzlichen Bibliotheken.

Neben der gehosteten Variante stellt der Anbieter auch eine selbstständige Inline-Version des Codes zur Verfügung. Der BMI Rechner unterstützt metrische und imperiale Maßeinheiten und zeigt das Ergebnis mit einer farblichen BMI-Skala an.

Geeignet für: HTML-Webseiten, WordPress, Shopify und Squarespace

Besonderheit: Wahl zwischen einem einfach eingebundenen JavaScript-Widget und einem vollständigen Inline-Code für die eigene Webseite.

👉 Link: https://hayneslab.dev/tools/widgets/bmi-calculator

Jotform BMI Calculator

Mit dem Jotform BMI Calculator kannst Du einen BMI Rechner in ein Online-Formular integrieren und dieses anschließend auf Deiner eigenen Webseite verwenden. Der BMI Rechner wird im Jotform Form Builder einfach per Drag-and-drop zum gewünschten Formular hinzugefügt – eigene Programmierkenntnisse sind dafür nicht erforderlich.

Besucher können ihre Körpergröße und ihr Gewicht eingeben und ihren BMI direkt innerhalb des Formulars berechnen. Dabei kannst Du zwischen metrischen Einheiten wie Kilogramm und Zentimetern sowie imperialen Einheiten wählen.

Interessant ist Jotform vor allem dann, wenn Du die BMI-Berechnung mit einem Formular kombinieren möchtest. So können beispielsweise Anmeldungen für Fitnessprogramme oder andere gesundheitsbezogene Formulare erstellt und die eingegebenen BMI-Daten zusammen mit weiteren Formularangaben erfasst werden.

Auch das Design lässt sich an die eigene Webseite anpassen. Neben verschiedenen Einstellungen für Beschriftungen, Größe und Ausrichtung unterstützt das BMI-Widget bei Bedarf eigenes CSS.

Geeignet für: Webseiten und WordPress, auf denen ein Jotform-Formular eingebunden werden kann

Besonderheit: BMI Rechner und Online-Formular in einem – besonders interessant, wenn neben der Berechnung weitere Angaben der Besucher erfasst werden sollen.

👉 Link: https://www.jotform.com/de/widgets/bmi-calculator

Smart Health Calculators

Mit Smart Health Calculators kannst Du einen kostenlosen BMI Rechner per fertigem Embed-Code in Deine Webseite einbinden. Eine Anmeldung oder ein API-Key sind dafür nicht erforderlich.

Vor dem Einbinden lassen sich unter anderem Farbschema, Akzentfarbe und die standardmäßig verwendeten Maßeinheiten auswählen. Der Rechner ist für mobile Geräte optimiert und passt seine Höhe automatisch an den benötigten Platz an. Nach Angaben des Anbieters werden die eingegebenen Daten lokal im Browser verarbeitet und nicht an den Anbieter übertragen.

Geeignet für: HTML-Webseiten, Blogs, Website-Baukästen und WordPress

Besonderheit: Kostenlos ohne Anmeldung, verschiedene Designs und Farben sowie automatische Größenanpassung. Der Anbieterhinweis muss bei der kostenlosen Nutzung erhalten bleiben.

👉 Link: https://www.smarthealthcalculators.com/embed

YAZIO BMI Rechner

Auch YAZIO stellt verschiedene kostenlose Rechner für Webmaster zur Verfügung. Neben dem BMI Rechner stehen beispielsweise Rechner für Idealgewicht, Kalorienbedarf und Kalorienverbrauch zur Auswahl.

Farben können an das Design der eigenen Homepage angepasst werden. Der anschließend erzeugte HTML-Code wird einfach in die Webseite eingefügt.

Der BMI Rechner ist responsive und damit auch für Smartphones und Tablets geeignet.

Geeignet für: Homepage, Blog und WordPress

Besonderheit: Responsive, farblich anpassbar und verschiedene Rechner verfügbar.

👉 Link: https://www.yazio.com/de/webmaster

BMI Rechner im Vergleich

Welcher BMI Rechner für Deine Webseite am besten geeignet ist, hängt vor allem davon ab, wie flexibel Du das Design anpassen möchtest und welches System Du für Deine Homepage verwendest.

Anbieter	kostenlos	Einbindung	WordPress geeignet	Responsive	Design anpassbar	Sprache des Anbieters
AidaForm	Ja	Embed-Code	Ja	Ja	Ja, mit AidaForm-Konto/Tarif*	Deutsch
BMI-Calculator.net	Ja	Embed-Code / Widget	Ja*	Ja	Ja, umfangreich	Deutsch
BMI-Rechner.biz	Ja	HTML / JavaScript	Ja*	abhängig von Variante	Nein / kaum	Deutsch
BMI-Rechner.net	Ja	HTML-Code	Ja	abhängig von Variante	Ja	Deutsch
BodyMetricCalculator.com	Ja	HTML / JavaScript	Ja	Ja	Ja	Englisch
FoodPal	Ja	HTML-Code	Ja	Ja	Ja	Deutsch
haynes lab	Ja	JavaScript / Inline-Code	Ja	Ja	Ja	Englisch
Jotform BMI Calculator	Ja, kostenloser Tarif verfügbar	Widget-Code, iFrame oder JavaScript-Einbettung	Ja, über HTML-/Embed-Block oder Jotform-Integration	Ja	Ja, über den Jotform-Formular- und Widget-Builder; Umfang abhängig vom Tarif	Deutsch verfügbar; Jotform international
Smart Health Calculators	Ja	iFrame / JavaScript	Ja	Ja	Ja	Englisch
YAZIO	Ja	HTML / JavaScript	Ja	Ja	Ja	Deutsch

* AidaForm: Der fertige BMI Rechner kann kostenlos und ohne Registrierung per Embed-Code in die eigene Webseite eingebunden werden. Die kostenlose Variante lässt sich jedoch nicht individuell anpassen und kann keine Leads sammeln. Für einen individuell gestalteten BMI Rechner kann die AidaForm-Vorlage im Formular-Builder bearbeitet werden; hierfür können kostenpflichtige Funktionen erforderlich sein.

* BMI-Calculator.net: Der BMI Rechner kann bereits per Einbettungscode in WordPress integriert werden. Ein eigenes WordPress-Plugin mit Shortcode- und Gutenberg-Block-Unterstützung befindet sich laut Anbieter noch in Entwicklung.

* BMI-Rechner.biz: Der Anbieter stellt verschiedene BMI- und Gesundheitsrechner kostenlos als fertigen Code für die eigene Homepage oder den eigenen Blog zur Verfügung. Der Code kann grundsätzlich auch über einen HTML-Block in WordPress eingebunden werden. Neben BMI-Rechnern für Erwachsene und Kinder stehen unter anderem Rechner für Idealgewicht, Grundumsatz und Blutdruck zur Auswahl.

Unser Tipp: Teste den gewünschten Rechner zunächst auf einer Testseite. So kannst Du kontrollieren, ob Darstellung, Ladezeit und mobile Ansicht zu Deiner Webseite passen.

BMI Rechner per HTML-Code einbinden

Bei einer klassischen HTML-Webseite ist die Integration besonders einfach.

Der Anbieter des BMI Rechners stellt Dir normalerweise einen fertigen HTML-Code zur Verfügung.

Diesen kopierst Du und fügst ihn an der Stelle in Deine HTML-Datei ein, an der später der Rechner erscheinen soll.

Das Prinzip sieht beispielsweise so aus:

<div>
    <!-- Hier wird der Code des BMI-Rechners eingefügt -->
</div>

Speichere anschließend die HTML-Datei und lade sie wieder auf Deinen Webspace.

Rufe danach die entsprechende Seite im Browser auf und überprüfe, ob der Rechner korrekt dargestellt wird.

Wichtig: Verändere den bereitgestellten Code nur, wenn der jeweilige Anbieter dies ausdrücklich erlaubt. Das gilt insbesondere für Copyright-Hinweise und Links zum Anbieter.

BMI Rechner in WordPress einbinden

Auch in WordPress kannst Du einen BMI Rechner ohne eigenes Plugin einbinden, wenn der Anbieter einen geeigneten HTML- oder JavaScript-Code zur Verfügung stellt.

Mit dem aktuellen WordPress-Blockeditor funktioniert das folgendermaßen:

Kopiere den HTML-Code des gewünschten BMI Rechners.
Öffne in WordPress die Seite oder den Beitrag, auf dem der Rechner erscheinen soll.
Klicke auf das +, um einen neuen Block hinzuzufügen.
Suche nach dem Block „Individuelles HTML“.
Füge den kopierten Code in diesen Block ein.
Nutze die Vorschau, um die Darstellung zu kontrollieren.
Speichere bzw. aktualisiere die Seite.

Damit kannst Du einen BMI Rechner in WordPress einbinden, ohne dafür zwangsläufig ein zusätzliches WordPress-Plugin installieren zu müssen.

BMI Rechner funktioniert in WordPress nicht?

Wird der Rechner nicht angezeigt, kann dies verschiedene Ursachen haben.

Manche WordPress-Konfigurationen oder Sicherheitsplugins entfernen bestimmte JavaScript-Bestandteile aus HTML-Blöcken. Auch Content-Security-Policy-Einstellungen oder Cookie- und Consent-Lösungen können externe Inhalte blockieren.

Prüfe außerdem, ob der Rechner über HTTPS geladen wird. Bei einer HTTPS-Webseite sollten externe Bestandteile ebenfalls verschlüsselt übertragen werden.

BMI Rechner per iFrame einbetten

Einige Anbieter stellen ihre BMI Rechner als iFrame zur Verfügung.

Das Grundprinzip sieht so aus:

<iframe
    src="URL-DES-BMI-RECHNERS"
    width="100%"
    height="500"
    style="border:0;">
</iframe>

Damit wird eine externe Webseite bzw. Anwendung innerhalb Deiner eigenen Webseite angezeigt.

Der Vorteil besteht darin, dass der eigentliche BMI Rechner weiterhin auf dem Server des Anbieters läuft. Änderungen und Aktualisierungen muss daher normalerweise nicht der Webmaster selbst durchführen.

Allerdings solltest Du darauf achten, dass der eingebettete Rechner auch auf Smartphones vernünftig dargestellt wird.

HTML-Code oder iFrame – was ist besser?

Das lässt sich nicht pauschal beantworten.

Ein iFrame ist häufig besonders einfach einzubauen. Allerdings hast Du meist weniger Einfluss auf Gestaltung und Verhalten des eingebetteten Inhalts.

Ein über JavaScript oder speziellen HTML-Code integrierter Rechner kann sich unter Umständen besser in das Design Deiner Webseite einfügen.

Achte bei Deiner Auswahl insbesondere auf:

responsive Darstellung
Ladegeschwindigkeit
HTTPS-Unterstützung
Anpassbarkeit des Designs
Werbung innerhalb des Rechners
vorgeschriebene Backlinks oder Copyright-Hinweise
Datenschutz und externe Verbindungen

Brauche ich für WordPress ein BMI Rechner Plugin?

Nicht unbedingt.

Wenn Du lediglich einen externen BMI Rechner in WordPress einbinden möchtest, reicht häufig der Block „Individuelles HTML“.

Ein spezielles BMI-Rechner-Plugin kann interessant sein, wenn Du den Rechner vollständig auf Deiner eigenen WordPress-Installation betreiben möchtest.

Dabei solltest Du jedoch bedenken, dass jedes zusätzliche Plugin gewartet und regelmäßig aktualisiert werden muss.

Für einen einfachen BMI Rechner kann ein externer Rechner deshalb die unkompliziertere Lösung sein.

Kann ich einen BMI Rechner selbst programmieren?

Natürlich kannst Du einen BMI Rechner auch selbst erstellen.

Die eigentliche Berechnung ist nicht besonders kompliziert. Für einen modernen Rechner benötigst Du im Wesentlichen:

HTML für die Eingabefelder,
CSS für die Gestaltung und
JavaScript für die Berechnung.

Der Vorteil einer eigenen Lösung besteht darin, dass Du keine externen Inhalte laden musst und das Design vollständig an Deine Homepage anpassen kannst.

Außerdem bist Du nicht davon abhängig, dass ein externer Anbieter seinen kostenlosen Service dauerhaft weiterbetreibt.

Für Webmaster mit grundlegenden HTML-, CSS- und JavaScript-Kenntnissen kann ein selbst programmierter BMI Rechner daher eine interessante Alternative sein.

Unseren BMI Rechner kostenlos in Deine Webseite einbauen

Du möchtest den oben gezeigten BMI Rechner auf Deiner eigenen Homepage verwenden? Wir stellen Dir den Rechner kostenlos als HTML-, CSS- und JavaScript-Code zur Verfügung. Du benötigst dafür weder eine Anmeldung noch ein WordPress-Plugin. Nutzung ausdrücklich auf eigenes Risiko / ohne Gewähr auf Richtigkeit der Angaben:

<div id="meh-bmi-rechner" class="meh-bmi-box">
  <h2>BMI Rechner</h2>
  <p class="meh-bmi-intro">
    Berechne kostenlos deinen Body-Mass-Index (BMI). Gib einfach deine Körpergröße und dein Gewicht ein.
  </p>

  <div class="meh-bmi-fields">

    <div class="meh-bmi-field">
      <label for="meh-bmi-groesse">Körpergröße in cm</label>
      <input
        type="number"
        id="meh-bmi-groesse"
        min="100"
        max="250"
        step="1"
        placeholder="z. B. 180"
        inputmode="numeric"
      >
    </div>

    <div class="meh-bmi-field">
      <label for="meh-bmi-gewicht">Gewicht in kg</label>
      <input
        type="number"
        id="meh-bmi-gewicht"
        min="20"
        max="300"
        step="0.1"
        placeholder="z. B. 75"
        inputmode="decimal"
      >
    </div>

  </div>

  <button type="button" id="meh-bmi-button">
    BMI berechnen
  </button>

  <div id="meh-bmi-ergebnis" class="meh-bmi-result" aria-live="polite"></div>

  <div class="meh-bmi-tabelle">
    <h3>BMI-Einteilung für Erwachsene</h3>

    <div class="meh-bmi-row">
      <span>Unter 18,5</span>
      <span>Untergewicht</span>
    </div>

    <div class="meh-bmi-row">
      <span>18,5 – 24,9</span>
      <span>Normalgewicht</span>
    </div>

    <div class="meh-bmi-row">
      <span>25,0 – 29,9</span>
      <span>Übergewicht</span>
    </div>

    <div class="meh-bmi-row">
      <span>30,0 – 34,9</span>
      <span>Adipositas Grad I</span>
    </div>

    <div class="meh-bmi-row">
      <span>35,0 – 39,9</span>
      <span>Adipositas Grad II</span>
    </div>

    <div class="meh-bmi-row">
      <span>Ab 40,0</span>
      <span>Adipositas Grad III</span>
    </div>
  </div>

  <p class="meh-bmi-hinweis">
    Hinweis: Der BMI ist lediglich ein Orientierungswert und berücksichtigt beispielsweise Muskelmasse,
    Körperbau, Alter und Geschlecht nur eingeschränkt. Er ersetzt keine medizinische Beratung.
  </p>
</div>

<style>
#meh-bmi-rechner {
  box-sizing: border-box;
  max-width: 760px;
  margin: 30px auto;
  padding: 32px;
  border: 1px solid #dddddd;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 5px 20px rgba(0,0,0,0.06);
}

#meh-bmi-rechner *,
#meh-bmi-rechner *::before,
#meh-bmi-rechner *::after {
  box-sizing: border-box;
}

#meh-bmi-rechner h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 30px;
  line-height: 1.2;
}

#meh-bmi-rechner .meh-bmi-intro {
  margin-bottom: 25px;
}

#meh-bmi-rechner .meh-bmi-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 20px;
}

#meh-bmi-rechner .meh-bmi-field label {
  display: block;
  margin-bottom: 7px;
  font-weight: 700;
}

#meh-bmi-rechner .meh-bmi-field input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #cccccc;
  border-radius: 8px;
  background: #ffffff;
  font-size: 17px;
  line-height: 1.3;
}

#meh-bmi-rechner .meh-bmi-field input:focus {
  outline: 2px solid #333333;
  outline-offset: 1px;
}

#meh-bmi-rechner #meh-bmi-button {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 14px 20px;
  border: 0;
  border-radius: 8px;
  background: #222222;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

#meh-bmi-rechner #meh-bmi-button:hover {
  opacity: 0.85;
}

#meh-bmi-rechner .meh-bmi-result {
  display: none;
  margin-top: 22px;
  padding: 20px;
  border-radius: 10px;
  background: #f5f5f5;
  text-align: center;
}

#meh-bmi-rechner .meh-bmi-result.is-visible {
  display: block;
}

#meh-bmi-rechner .meh-bmi-result-number {
  display: block;
  margin-bottom: 7px;
  font-size: 38px;
  line-height: 1;
  font-weight: 800;
}

#meh-bmi-rechner .meh-bmi-result-text {
  display: block;
  font-size: 19px;
  font-weight: 700;
}

#meh-bmi-rechner .meh-bmi-result-extra {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 400;
}

#meh-bmi-rechner .meh-bmi-error {
  border: 1px solid #cccccc;
}

#meh-bmi-rechner .meh-bmi-tabelle {
  margin-top: 30px;
}

#meh-bmi-rechner .meh-bmi-tabelle h3 {
  margin-bottom: 12px;
  font-size: 20px;
}

#meh-bmi-rechner .meh-bmi-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e5e5;
}

#meh-bmi-rechner .meh-bmi-row:first-of-type {
  border-top: 1px solid #e5e5e5;
}

#meh-bmi-rechner .meh-bmi-row span:first-child {
  font-weight: 700;
}

#meh-bmi-rechner .meh-bmi-hinweis {
  margin: 25px 0 0;
  padding-top: 18px;
  border-top: 1px solid #eeeeee;
  font-size: 14px;
  line-height: 1.6;
  color: #666666;
}

@media (max-width: 600px) {

  #meh-bmi-rechner {
    padding: 22px 18px;
    margin: 20px 0;
  }

  #meh-bmi-rechner h2 {
    font-size: 26px;
  }

  #meh-bmi-rechner .meh-bmi-fields {
    grid-template-columns: 1fr;
  }

  #meh-bmi-rechner .meh-bmi-row {
    grid-template-columns: 120px 1fr;
    gap: 10px;
  }
}
</style>

<script>
(function () {

  const button = document.getElementById('meh-bmi-button');
  const groesseInput = document.getElementById('meh-bmi-groesse');
  const gewichtInput = document.getElementById('meh-bmi-gewicht');
  const ergebnis = document.getElementById('meh-bmi-ergebnis');

  function berechneBMI() {

    const groesseCm = parseFloat(
      groesseInput.value.replace ? groesseInput.value.replace(',', '.') : groesseInput.value
    );

    const gewichtKg = parseFloat(
      gewichtInput.value.replace ? gewichtInput.value.replace(',', '.') : gewichtInput.value
    );

    ergebnis.classList.remove('meh-bmi-error');

    if (
      !groesseCm ||
      !gewichtKg ||
      groesseCm < 100 ||
      groesseCm > 250 ||
      gewichtKg < 20 ||
      gewichtKg > 300
    ) {
      ergebnis.innerHTML =
        '<strong>Bitte überprüfe deine Eingaben.</strong><br>' +
        'Gib eine Körpergröße zwischen 100 und 250 cm und ein Gewicht zwischen 20 und 300 kg ein.';

      ergebnis.classList.add('is-visible', 'meh-bmi-error');
      return;
    }

    const groesseMeter = groesseCm / 100;
    const bmi = gewichtKg / (groesseMeter * groesseMeter);
    const bmiGerundet = Math.round(bmi * 10) / 10;

    let kategorie = '';

    if (bmi < 18.5) {
      kategorie = 'Untergewicht';
    } else if (bmi < 25) {
      kategorie = 'Normalgewicht';
    } else if (bmi < 30) {
      kategorie = 'Übergewicht';
    } else if (bmi < 35) {
      kategorie = 'Adipositas Grad I';
    } else if (bmi < 40) {
      kategorie = 'Adipositas Grad II';
    } else {
      kategorie = 'Adipositas Grad III';
    }

    const normalMin = 18.5 * groesseMeter * groesseMeter;
    const normalMax = 24.9 * groesseMeter * groesseMeter;

    ergebnis.innerHTML =
      '<span class="meh-bmi-result-number">' +
      bmiGerundet.toFixed(1).replace('.', ',') +
      '</span>' +
      '<span class="meh-bmi-result-text">' +
      kategorie +
      '</span>' +
      '<span class="meh-bmi-result-extra">' +
      'Bei deiner Körpergröße entspricht der BMI-Bereich 18,5–24,9 ungefähr einem Gewicht von ' +
      Math.round(normalMin) +
      ' bis ' +
      Math.round(normalMax) +
      ' kg.' +
      '</span>';

    ergebnis.classList.add('is-visible');
  }

  button.addEventListener('click', berechneBMI);

  [groesseInput, gewichtInput].forEach(function(input) {
    input.addEventListener('keydown', function(event) {
      if (event.key === 'Enter') {
        berechneBMI();
      }
    });
  });

})();
</script>

Warum einen BMI Rechner auf der eigenen Webseite anbieten?

Interaktive Elemente können eine Webseite interessanter machen.

Statt Informationen lediglich zu lesen, kann der Besucher selbst etwas ausprobieren. Ein BMI Rechner liefert unmittelbar ein individuelles Ergebnis.

Besonders sinnvoll kann ein solcher Rechner beispielsweise auf Webseiten zu folgenden Themen sein:

Fitness
Sport
Ernährung
Gesundheit
Wellness
Abnehmen
Personal Training

Wichtig ist allerdings, dass der Rechner thematisch zur Webseite passt und dem Besucher tatsächlich einen Mehrwert bietet.

Häufige Fragen zum BMI Rechner für Webseiten

Kann ich einen BMI Rechner kostenlos auf meiner Homepage einbinden?

Ja. Verschiedene Anbieter stellen kostenlose BMI Rechner für Webmaster bereit. Beachte jedoch immer die jeweiligen Nutzungsbedingungen. Häufig müssen Copyright-Hinweise oder Links zum Anbieter erhalten bleiben.

Wie kann ich einen BMI Rechner in WordPress einbinden?

Wenn Du einen fertigen HTML-Code erhältst, kannst Du ihn im WordPress-Blockeditor normalerweise über den Block „Individuelles HTML“ einfügen. Ein zusätzliches Plugin ist dafür häufig nicht erforderlich.

Gibt es einen BMI Rechner als HTML-Code?

Ja. Mehrere Anbieter stellen einen fertigen BMI Rechner HTML Code zur Verfügung. Je nach Anbieter wird dabei HTML, JavaScript oder ein iFrame verwendet.

Kann ich das Design eines BMI Rechners verändern?

Das hängt vom Anbieter ab. Bei einigen kostenlosen BMI Rechnern kannst Du beispielsweise Hintergrundfarbe, Textfarbe oder Buttons konfigurieren. Bei anderen darf der bereitgestellte Code nur eingeschränkt verändert werden.

Funktionieren eingebettete BMI Rechner auch auf dem Smartphone?

Moderne Rechner sind häufig responsive. Du solltest die Darstellung trotzdem nach dem Einbau auf Smartphone, Tablet und Desktop testen.

Ist ein BMI Rechner für meine Webseite sinnvoll?

Wenn der Rechner thematisch zu Deinen Inhalten passt, kann er Deinen Besuchern einen zusätzlichen praktischen Nutzen bieten. Auf einer Fitness-, Gesundheits- oder Ernährungswebseite ist ein BMI Rechner beispielsweise deutlich sinnvoller als auf einer Webseite ohne Bezug zu diesen Themen.

Fazit: BMI Rechner einfach in die eigene Webseite einbauen

Einen BMI Rechner in die eigene Webseite einzubinden ist heute auch ohne Programmierkenntnisse möglich. Verschiedene Anbieter stellen kostenlose Rechner bereit, deren HTML-Code Du einfach kopieren und in Deine Homepage einsetzen kannst.

Auch WordPress ist kein Problem: In vielen Fällen genügt der Gutenberg-Block „Individuelles HTML“.

Vergleiche vor dem Einbau jedoch die verschiedenen Anbieter. Besonders wichtig sind eine responsive Darstellung, HTTPS-Unterstützung, eine möglichst einfache Integration und die Möglichkeit, den Rechner optisch an Deine Webseite anzupassen.

Wenn Du vollständige Kontrolle über Gestaltung, Datenschutz und Funktionsweise haben möchtest, kannst Du alternativ einen eigenen BMI Rechner mit HTML, CSS und JavaScript programmieren.

Weitere interessante Webmaster-Tools

Du möchtest Deine Webseite mit weiteren praktischen Rechnern, Widgets und interaktiven Funktionen erweitern? Auf meine-erste-homepage.com findest Du viele kostenlose Tools und Anleitungen für HTML- und WordPress-Webseiten:

Währungsrechner für Deine Webseite – aktuelle Wechselkurse direkt auf Deiner Homepage anzeigen und einen Währungsrechner als praktisches Zusatztool einbinden.
Uhrzeit und Datum in Deine Webseite einbinden – eine eigene Uhr mit Datum und Uhrzeit per JavaScript auf Deiner Webseite anzeigen.
Countdown zur EM, WM oder anderen Sportereignissen einbinden – einen kostenlosen Countdown als interaktive Funktion in Deine Homepage integrieren.
Learning-Apps als Widget in Deine Webseite einbinden – interaktive Lernspiele, Quizze und Übungen per Embed-Code in HTML oder WordPress einfügen.