Multi Step Form – Anleitung

Multi Step Form – Anleitung

Hallo liebe Blogger und WordPress-User,
erstellt ganz einfach und schnell mehrstufige Formulare für eure Website und überzeugt mit dem animierten Fortschrittsbalken. Das ist Usability: Begeisterte User, die kinderleicht mit dem WordPress-Plugin „Multi Step Form“ Daten übermitteln!

Umfrage, Datenübermittlung oder unkomplizierter Kontakt zwischen dir und deinem Leser – dies und viel mehr geht mit diesem kostenlosen Plugin.

Features

  • Mit diesem Tool lassen sich ganz simple Formulare für die Website erstellen, so dass auch Ungeübte damit umgehen können. Dies geschieht in einem übersichtlichen Interface
  • In der kostenfreien Variante werden die wichtigsten Formularfelder und Elemente per Drag-&-Drop platziert oder angeordnet
  • Mit Einfügen der Formular-ID kann das Formblatt in einen Beitrag oder auf einer Website problemlos eingebunden werden
  • Der Formularinhalt wird als E-Mail an eine oder verschiedene E-Mail-Adressen geschickt
  • Die Pro Version enthält zusätzliche Erweiterungen wie beispielsweise Datei-Upload oder auch Support
  • Die optisch auffällige Fortschrittsanzeige ist eine Besonderheit und bietet eine grafische Führung durch die Formulare. Der Nutzer erkennt schnell an welcher Stelle des Formulares er sich befindet und welche Schritte noch vor ihm liegen
  • Das Plugin ist responsive, d.h. das Layout passt sich dem jeweiligen Endgerät an. Egal ob auf dem Smartphone, Tablet oder Desktop PC, es sieht immer gut aus

Installation

1. Im Backend von WordPress auf Plugins ->installieren klicken

screen_01

2. Im Suchfeld auf der rechten Seite „Multi Step Form“ eingeben und bestätigen

screen_02

Konfiguration

1. Im Backend von WordPress auf Einstellungen ->„Multi Step Form“ klicken

screen_03

2. Unter „Basic Settings“ das Format der versendeten E-Mails sowie die Zusammenfassung der Daten für den User ein- oder ausschalten.

3. Unter „Styling“ verschiedene Farben und andere Einstellungen vornehmen:

screen_04

  1. Den Fortschrittsbalken ein- bzw. ausschalten (standardmäßig eingeschaltet)
  2. „Boxed Layout“ betrifft die Inhaltsboxen im Formular. Wenn des Häckchen gesetzt ist, werden die Inhaltsboxen mit einer grauen Hintergrundfarbe und einem farbigen Balken auf der linken Seite angezeigt. Die Farbe des Balkens resultiert aus der Farbe, die man in dem Feld „Active Step Color“ auswählen kann. Deaktiviert man den Haken hier, dann bekommt man ein Layout ohne Hintergrundfarbe und Balken auf der linken Seite
  3. Der Farbwert, den man bei „Active Step Color“ einstellen kann, ist die Primärfarbe des Fortschrittbalkens sowie die Balkenfarbe der Inhaltsboxen
  4. Der Farbwert, den man bei „Visited Step Color“ einstellen kann, ist die Farbe im Fortschrittsbalken für die bereits ausgefüllten Schritte im Formular.
  5. Der Farbwert, den man bei „Next Step Color“ einstellen kann, ist die Farbe im Fortschrittsbalken für die noch nicht ausgefüllten Schritte im Formular
  6. Der Farbwert, den man bei „Button Color“ einstellen kann, ist die Farbe des Buttons unten zum vor- und zurücknavigieren

Erstellung eines Formulares

1. Im Backend von WordPress auf „Multi Step Form“ ->„Add New“ klicken

screen_05

2. Unter „Steps“ die einzelnen Schritte und Felder im Formular festlegen. Es gibt „Steps“, „Sections“ und „Elements“. Die Schritte (Steps) werden in Untersektionen (Sections) gegliedert, die mit Formularelementen (Elements) gefüllt werden können. Dadurch entsteht eine klare Strukturierung des Formulars!

screen_06

  1. Name des Formulars, wird nur im Backend verwendet und angezeigt. Mit „Add Step“ erstellt man einen neuen Schritt im Formular
  2. Hier sind die Elemente, die man per Drag & Drop in den „Sections“ auf der rechten Seite platzieren kann
  3. Name des Schrittes, wird im Fortschrittsbalken angezeigt, unterhalb der Zahl
  4. Die Überschrifft des Formulars. Wird oberhalb des Fortschrittbalkens angezeigt
  5. Der Text unterhalb der Überschrift
  6. Das ist der „Section“-Bereich. Hier werden die Formular-Elemente platziert – entweder per Drag & Drop oder per Klick auf den Button „Add Element“

3. Unter „Mail-Settings“ die Einstellungen für die Versendung der Daten per E-Mail definieren

screen_07

  1. Emailadresse des Empfängers (also du als Blogger oder Website-Betreiber) eintragen. Es können auch mehrere Adressen hinterlegt werden (wichtig hier: Trennung der E-Mail-Adresse durch Komma!)
  2. Betreffzeile der E-Mail hinterlegen (z.B. Reservierungsanfrage oder Umfrage zum Benutzen von Lippenstiften)
  3. Ein einleitender Text für die E-Mail kann hier geschrieben werden. Wird in der versendeten Mail oberhalb des Inhaltes des Formulares angezeigt

Integration des Formulares

1. Im Backend von WordPress auf „Multi Step Form“ ->Shortcode markieren und kopieren

screen_08

2. Die gewünschte Seite bzw. den Blog-Post öffnen und den Shortcode einfügen

screen_09

3. FERTIG! Das Ergebnis kann sich sehen lassen!

screen_12

 

Merken

Merken

Merken

Merken

Merken

Merken

Merken

Merken

Merken

56Comments
  • Caitlin/ 10.01.2017Antworten

    Hello, this plugin is amazing and exactly what I was looking for design wise so thank you. But I am having difficulty receiving the emails from the form submission, I have tried a few different addresses in the „emails to“ section but they don’t appear.

    Do you have any ideas why this might be happening? I would like to fix this as I really love this plugin!

    • admin/ 10.01.2017Antworten

      Is it possible to send administrative mails via the wordpress installation?
      Some of the providers may produce problems with the mails.
      If the form is empty it will not send the mails. Minimum is one field with content.

    • Ben/ 24.01.2017Antworten

      I am also getting this problem Caitlin , did you find a way to fix it in the end?

      • admin/ 24.01.2017Antworten

        Same to you Ben, can you send administrative Mails via the system? Sometimes the plugin does not send mail via localhosts. Some provider block theese mails too ;-(

    • Chris/ 31.01.2017Antworten

      Make sure that your wordpress instance is configured to send emails, correctly. This plugin uses WP’s built in mail function (wp_mail) so if WP can send emails, so should this plugin.

      Check under Admin Area > Settings > Writing and make sure you have the correct details there.

  • Heidi/ 13.01.2017Antworten

    Bei mir funktioniert es. LG Heidi

  • Chris/ 31.01.2017Antworten

    Is this plugin on GitHub?

    I’ve modified to include captcha (optionally) and I’d like to submit a PR to improve the plugin!

  • Chris/ 31.01.2017Antworten

    Actually, sorry – if you would just be so kind as to add an action to the send_mail method, anyone could do their own validations…

    Something like add_action(‚fw_before_send_email‘) after the POST validations in class-mondula-multistep-forms-shortcode.php around line 71

    Thanks!

    • admin/ 31.01.2017Antworten

      Dear Chris, we will contact you via mail. At the moment there is no open github, but we will send you a mail as soon as it is available. Thx for your support, thx for you help. We will integrate an action as soon as possible. You can find that in the next update.

  • Fernando/ 02.02.2017Antworten

    Hi, Congratulations on the plugin, but I have a problem, when typing in a text field, you write from the total left below the image of the box and it does not look well what has been written, and another thing, is it possible to decrease The space between text fields?

    • admin/ 03.02.2017Antworten

      Hi, thx for your comment.
      Can you send a link so we can have a look please…best

  • Antoni/ 12.02.2017Antworten

    Bonjour
    Plugin super. Merci de l’avoir créé.
    SUGGESTION :
    Rendre compatible pour formulaire d’inscription d’un utilisateur (avec Buddypress) se serait super

    Hello
    Super Plugin. Thank you for creating it.
    SUGGESTION:
    Make it compatible for a user registration form (with BuddyPress) will be great

    • admin/ 13.02.2017Antworten

      Hi, thx for the comment, we will think about it and let you know soon.

  • Stephan Becker/ 22.02.2017Antworten

    Hi there. Great idea! Is it possible to use 3d paty email marketing tools such as Get Response or Aweber in conjunction with this tool? I mean by that, can form fields send data to 3d party tools? Thanks

  • admin/ 22.02.2017Antworten

    Hi Stephan Becker,

    sorry but it is not possible to send form fields to 3rd party tools.

    Regards Mondula

  • Gabriel/ 05.03.2017Antworten

    Hi, I really love this plugin I used it in my project but unfortunatley I have more than 5 steps to use in my form , please how can I extend the form to more than 5 steps. Thanks

    • admin/ 06.03.2017Antworten

      Hi Gabriel,
      we are currently working on a pro version that will support more steps and extended features.
      Best wishes,
      Mondula

  • Tilsner/ 09.03.2017Antworten

    Ist es möglich die Schriftgröße anzupassen für meinen Geschmak ist die Wiedergabe zu groß ?

    • admin/ 09.03.2017Antworten

      Nicht über das Backend. Es wird in der Pro-version erweiterte Einstellungen zum Design geben, derzeit müsste das „per Hand“ individuell angepasst werden.

  • Ron/ 15.03.2017Antworten

    Tolles Plugin! Gibt es eine Möglichkeit die Sprache zu ändern (von z.B. „submit“ zu „absenden“)? Bzw. wo finde ich die englischen Bezeichnungen im code?

    • admin/ 15.03.2017Antworten

      Moin Ron,
      wir arbeiten gerade daran, die Unterstützung für Mehrsprachigkeit einzubauen. Die gesamte Community hat dann die Möglichkeit, Übersetzungen zu erstellen und hochzuladen. https://translate.wordpress.org/projects/wp-plugins/multi-step-form

      Bis es so weit ist, kannst du natürlich die Labels händisch in den PHP-Files anpassen (z.B. includes/lib/class-mondula-multistep-forms-wizard.php)

      Beste Grüße

  • Eric/ 16.03.2017Antworten

    This is *almost* perfect, but for some reason no matter where I paste the shortcode, the form shows up at the top of the page. Is there any way I can change that? I won’t be able to use it if I can’t put it in a specific spot on the page. Thanks!

    • admin/ 20.03.2017Antworten

      Hi there,
      this is fixed as of version 1.1.5. Enjoy!

  • Waqar/ 17.03.2017Antworten

    Dear admin!
    Thank you for a great plugin. I am simply in love with it. But I am having some issues in styling.
    1. Progress bar is always in vertical position which I want in horizental setting.
    2. When selecting an option from radio button, it doesn’t seem to select ant option though it send that option in mail so our users seems to be confused while this option is selected or not.
    3. While I add 4th step, it add an icon instead of number. Can we have a consistancy like having numbers in all steps or having icons??
    Waiting for your kind response. Keep doing great work.

    • admin/ 20.03.2017Antworten

      Hello and thanks for using and enjoying our plugin!
      For question 1 and 2, you seem to be having issues with our stylesheets being overwritten by a third party plugin or theme. If you’re familiar with CSS, you can try to inspect the CSS rules to find conflicts and correct these. Which theme are you using?
      Regarding the third question: Yes, we will give you the option to change the flag icon to a number in a future version.
      Cheers, Mondula

  • Jack/ 19.03.2017Antworten

    Hi,

    Is it possible to add images next to radio buttons?
    If so, how?

    • admin/ 20.03.2017Antworten

      Hi, we’ve noticed that some more users were requesting a feature like that. It’s definitely on out list, so stay tuned for updates.
      Cheers

  • Adam/ 23.03.2017Antworten

    Hello, we are experiencing some issues where the icons are not appearing correctly in the field. Can you help?

    • admin/ 23.03.2017Antworten

      Yes probably we can if you can send us some more information about your problem 😉

  • Bhaskar/ 29.03.2017Antworten

    Hey, I have installed it on one of website, I am just getting the Top check box buttons & Previous step, Next step buttons, Like this – http://prntscr.com/epy4cl

    All data is there on the backed but can’t see on website

  • ken/ 16.04.2017Antworten

    my clients dont get notification emails after submitting the form, is there any way out? Please help

    • admin/ 18.04.2017Antworten

      Uh. we cannot debug or help without a Link. Please send us information via info@mondula.com best regards.

      Mondula

  • Mervin/ 19.04.2017Antworten

    This plugin is not working. Already set all the settings but it has an error „Undefined“ when savings the settings and don’t have a clear instruction about the error and a solution on how to fix.

    • admin/ 20.04.2017Antworten

      Hi,
      we need more than the provided information to help you.
      Please send us a link.
      Did you tried to set up a fresh wordpress?
      best – Mondula.

  • steve/ 25.04.2017Antworten

    The plugin was working fine for a short while but now the dropdown boxes on all questions have ceased functioning – can you help?

    • admin/ 26.04.2017Antworten

      you got mail 😉

  • Harry/ 26.04.2017Antworten

    Hi there. A couple of things:

    1. Can anything be done about the field layout? eg. If we want First and Last Name next to each other(2 columns)…
    2. Is there a way of duplicating Sections / Fields? I know you can duplicate Steps.

    Thanks and Kind regards,
    Harry

    • admin/ 26.04.2017Antworten

      1. If you are able to modify CSS you can 😉 (more than one colum are planned for the Pro, we will release it very soon)
      2. You can duplicate the form, but not single steps. (In the Pro we will provide a json in- and export, that might make it easier.)

      best and thx a lot for your comment

      Mondula Team

  • Santiago/ 27.04.2017Antworten

    Hi, I’m having two issues with the plug in.
    1- When the form is completed, I’m not receiving all the data by email but just some of the fields.
    2- The icons are not showing well. Can I erase them?
    Thank you. Please help me.

    • admin/ 02.05.2017Antworten

      Hi ,

      as we are currently developing a PRO version for Multi Step Form,
      we do not have the resources to handle individual requests right now.

      Best wishes,
      Mondula

  • Barton/ 29.04.2017Antworten

    Looks fantastic and you’ve put a lot of work into getting the Plugin to look superb.

    Is is possible to have conditional options, so the next panel / step cold be skipped based on the selection in the current panel?

    For example, if we sell a door, the first panel would say „Do you need a handle“, if they select yes, displays Step 2, if no handle required, move to Step 3 and select a letter box etc…

    Or could this functionality be achieved through using FORM Elements on the individual panel?

    Thank you and great work,

    Barton.

    • admin/ 02.05.2017Antworten

      Hi Ali,

      as we are currently developing a PRO version for Multi Step Form,
      we do not have the resources to handle individual requests right now.
      But thx a lot for your information, we will discuss and come back to you asap

      Best wishes,
      Mondula

      Mondula Team

  • Martina/ 02.05.2017Antworten

    Hello,
    really great plugin.
    How can I send the email automatically to the user email? In the form setting „Email address to which the mails are sent“.

    Thank you

    • admin/ 02.05.2017Antworten

      Hi,
      not now,
      in the Pro Plugin (late summer 2017) or maybe in one of the following free versions we might integrate a USER Mail.

      thx for using Multi Step Forms

      Mondula Team

  • swapnil/ 03.05.2017Antworten

    having same problem to getting data on my email 🙁

    • admin/ 03.05.2017Antworten

      Hi,
      thx for your comment.
      This might be a problem with your WP installation.
      Disable all Plugins except the MSF, switch to a plain WP-Template and try again.
      If you get admin mailings the plugin will send mails too.

      I hpe that helps.

      best

  • raj/ 05.05.2017Antworten

    Hi,

    why Email Function is Not Working

    • admin/ 05.05.2017Antworten

      Hi,
      if you want us to take that serious we need more information to help you out.
      The PlugIn ist tested with a lot of configurations.
      With a fresh wordpress wich is able to send administrative mails (like e.g. User Notifications) the form will send mails.
      It’s a good workaround to check first if your WP is working correctly.

      best

      Mondula Team.

  • Marc/ 16.05.2017Antworten

    Hello,
    I translate the files (po) to Dutch. Where do I have to place the translation files in my installation? Other question: is it possible to „multi“ upload files?

    • admin/ 17.05.2017Antworten

      Hi,
      you can modify the .po files. Afterwords you have to create a .pot (https://wordpress.org/plugins/poeditor/). After saving your file upload it to the /lang-Folder and replace the .pot-File.

      At the moment there is no possibility for a multi-file-upload ;-(

      best

      Mondula Team.

  • admin/ 17.05.2017Antworten

    We just recieved a mail from Brazil. At http://www.canalwp.com they created a fantasic tutorial for our Plugin in portuguese. Thanks to Gabriel we can now provide all information about the multi-step-plugin in portuguese! https://www.canalwp.com/tutorial-wordpress/formulario-contato-etapas-wordpress/

  • Daniel/ 20.05.2017Antworten

    Hallo,
    habe eine kleine Frage zu eurem wirklich sehr gelungenen Plugin:
    Mich verwirrt die „Select/Dropdown“ funktion. Da dies nur eine Dopdown-Funktion ist und mir keine möglichkeit gibt eines Multiple-Select feldes. Oder bin ich einfach nur verwirrt und übersehe das die ganze Zeit?
    Perfekt wäre es, wenn es die PRO Version schon geben würde, da ich sie bis Mittwoch benötigen würde 🙂

    Danke trotzdem
    lg
    Daniel

    • admin/ 22.05.2017Antworten

      Moin,
      tut uns leid, die Pro verspätet sich leider etwas, wir hoffen diese im Laufe des Sommers mit vielen interessanten Features anbieten zu können.
      Dort wird es dann sicherlich auch eine Lösung zum Drop-down geben 😉
      best regards – Mondula Team

Leave a Comment