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.