Create a breakdance multi-step form

Tutorials, Knowledge

Contents

In this tutorial, I'll show you how to create a Breakdance Multi-Step Form! Multi-step forms are a great way to improve the user experience by breaking down complex information or data into manageable sections.

Set up form

1. plan breakdance multi-step form

Before you start breakdancing, take some time to plan your form. Determine what information you want to collect and how you can break it down into logical steps. This will simplify the process of building your form.

2. create form

To add a form to a breakdance page, click on the button "Add" and type "form" in the search field. Then select the module "Form Builder" .

3. add steps

First insert the form fields for your first form step. You can then add a further field for which you can set the type "Step" select. Each "Step" create a new step in your form. Give each step a clear, short title that indicates what information users should provide.

4. add form fields

Add the desired Form fields added. Breakdance has a powerful Form with a variety of field types such as text fields, drop-down lists or checkboxes. Combined with the option to define conditions and dependencies, you have a powerful tool for your form. Now select the right fields for each step of your form.

5. add steps

After you have inserted your input fields, you can add further fields for which you have set the type "Step" select. Each "Step" create a new step in your form. Give each step a clear, short title that indicates what information users should provide.

Design and test the form

6. styling the form

There are many options for designing your Breakdance Multi-Step form. You can find the design settings for this under "Other" > "Stepper". Breakdance also offers options for customizing the design and functionality of the navigation elements.

7 Validation and data storage

Configure the validation of form fields to ensure that users enter correct information. Breakdance automatically saves the respective form data after each step to minimize the risk of data loss. This function can be configured under "Actions" can be deactivated.

The texts that appear for the website user depending on their status are also important. Here is an overview:

  • Submit Text: This is the text that is displayed on the button with which the user submits the contact form. It usually says something like "Send", "Submit" or "Send request".
  • Success Message: This is the message that is displayed to the user after the contact form has been successfully submitted. It is a confirmation that the message has been sent successfully. For example: "Thank you very much! Your message has been successfully submitted."
  • Error Message: This is the message that is displayed to the user if an error occurs when submitting the contact form. The error message should inform the user that something has gone wrong, for example: "Something went wrong". This gives the user the chance to try again or to contact us by phone or email.
  • Hide Form On Success: This option makes it possible to hide the contact form after it has been successfully sent. If this option is activated, the contact form is replaced by the success message after sending. This can be helpful to show the user that the message has been sent successfully and to prevent multiple messages from being sent by mistake.
  • Redirect After Submit: With this option, you can specify where the user is redirected to after submitting the contact form. You can specify a custom URL to which the user should be redirected. For example, a "thank you page" where you can display further information or suggest further actions.

You must also specify what happens to the data entered after you click the Send button. You can make the settings for this under "Actions" > "Email" before. You can specify the following here:

  • Subject: This is the subject line of the email that is sent to the recipient. It should contain a brief description of the content of the message.
  • To Email: Here you enter the e-mail address to which the message should be sent. This is usually the e-mail address of the administrator or the person responsible for the contact request.
  • From Email: This is the email address of you or your company that is displayed in the "From" field of the recipient's email. It is the address from which the message appears to be sent. It should be a valid email address from which emails can be sent.
  • From Name: Here you enter the name of yourself or your company, which will be displayed in the "From" field of the recipient's email.
  • Reply To: This is the email address to which replies to your message should be sent. Normally this is the same address as the "From email" address, unless you want replies to be sent to a different email address. If you do not enter anything, the e-mail address you use to receive this form message is also the address to which the recipient can send messages.
  • Message: This is the body of the email. Here you have the option of defining the structure and content of the email. You can use variables to integrate the content of the individual form fields into the email. The variable {all_fields} is entered by default. This variable inserts all fields with the corresponding label into the email. You can output individual form fields via the ID of the field in curly brackets. As an example, you could integrate the entered e-mail address into the text with the variable {email}.

8. test your form

Before you publish your Breakdance Multi-Step form, test it thoroughly to ensure that all steps work properly. Test different scenarios to identify and fix potential problems.

Conclusion

Congratulations! You have successfully created a Breakdance Multi-Step Form. Users can now easily navigate through the different steps of the form and efficiently provide the required information.

Share
Contact now

Let's finish your website.

What we guarantee

You will only receive an invoice if we have been able to help!

Our team works hard every day to solve problems quickly for our customers or to achieve optimal results during implementation. As a result, bedemy is now known for its first-class service and has many happy customers. Our past experience and belief in our abilities enables us to offer new customers a unique promise that underlines our commitment to customer satisfaction.

We only issue an invoice if we have really been able to help!

If we are unable to help with a problem or implementation, we will not issue an invoice. Even if we have already invested time. You have no risk, because even in the event that we have implemented everything as requested, our costs are transparent, agreed in advance and never exceed the planned budget!

What our help costs

No nasty surprises

We charge according to a fixed hourly rate, which we will inform you of in a written offer before we charge you for the use of our team. This means that implementing a small feature or fixing a problem is usually quick (often within a few minutes) and therefore doesn't cost much. The implementation of a complete site, on the other hand, can take a few days (depending on the scope).

But you don't have to worry about the costs.

Firstly, you will always receive a quote from us in advance via email, even for smaller support requests. Secondly, we always stick to this cost estimate unless we tell you otherwise. If, during implementation, we realize that the task assigned to us is more complex and will take longer, we will contact you with a revised cost estimate. You can then decide whether you are prepared to accept this revised offer or not. If it's too much for you, we'll stop the project and you won't pay a penny. Not even for the work we have already invested in the project up to that point (according to the initial estimate).