Creating Forms in Sitebuilder: Step by Step
Forms are essential for any website. Whether you need a contact form, registration form, or survey, Sitebuilder provides all the tools to create professional forms without technical knowledge.
Why Forms Are Important
Forms bridge the gap between you and your visitors. They make it possible to:
- Collect contact details from potential customers
- Receive feedback and reviews
- Process newsletter sign-ups
- Receive quote requests
- Conduct surveys and research
Adding a Form
Step 1: Place the Form Block
- Open the page where you want to place the form
- Click on the plus icon to add an element
- Search for Form in the elements library
- Drag the form block to the desired position
Step 2: Choose Form Type
Sitebuilder offers various pre-made form templates:
- Contact Form: Name, email, and message
- Newsletter Sign-Up: Email only
- Quote Request: Extensive with multiple fields
- Blank Form: Fully customizable
Select the type that best fits your goal.
Adding and Configuring Fields
Available Field Types
Sitebuilder supports various field types for every situation:
Text Fields
- Short text (for names, subjects)
- Long text (for messages, comments)
- Email (with automatic validation)
- Phone number
- Website URL
Choice Fields
- Dropdown menu (choose one option)
- Radio buttons (one option, always visible)
- Checkboxes (multiple options possible)
Special Fields
- Date picker
- Time picker
- File upload
- Star rating
- Signature
Adding a Field
- Click on the form in the editor
- Select Add Field
- Choose the field type
- Fill in the field name
- Optionally set a placeholder
Making a Field Required
Some fields must not be left empty. Here’s how to make a field required:
- Click on the field you want to adjust
- Open the field settings
- Turn on the Required switch
- Optionally add a custom error message
Form Settings
Email Notifications
Receive an email for every submission:
- Click on the form
- Go to Settings
- Fill in your email address under Recipient
- Adjust the subject
- Choose which fields are included in the email
Confirmation Page
After submission, you can redirect visitors or show a message:
Show Message
- Select Show Message
- Type your thank you message
- Style the message as desired
Redirect to Page
- Select Redirect to URL
- Fill in the URL of your thank you page
- Optionally create a special thank you page
Spam Protection
Prevent spam submissions with these options:
Add reCAPTCHA
- Go to form settings
- Enable reCAPTCHA
- Link your Google reCAPTCHA keys
- Choose between v2 (checkbox) or v3 (invisible)
Honeypot Field
This is an invisible field that only bots fill out:
- Enable Honeypot in settings
- Spam will be automatically filtered
Advanced Options
Conditional Logic
Show or hide fields based on previous answers:
- Select the field that should be conditional
- Click on Conditions
- Set the rule (for example: show only if...)
- Choose the trigger field and value
Example: Show a text field Other reason only if someone selects Other in a dropdown.
Multi-Step Form
Long forms can be divided into steps:
- Add a Step element
- Place fields in each step
- Configure the Next and Previous buttons
- Optionally add a progress indicator
File Uploads
Allow visitors to attach files:
- Add a File Upload field
- Set allowed file types (PDF, JPG, PNG)
- Configure the maximum file size
- Choose whether multiple files are allowed
Form Styling
Adjust Appearance
- Select the form
- Go to Design
- Adjust:
- Background color
- Border style and color
- Font and size
- Field height and width
- Button style
Style Submit Button
- Click on the submit button
- Change the text (Submit, Sign Up, Request)
- Adjust colors
- Add hover effects
Managing Submissions
View Submissions
All form submissions are saved:
- Go to Forms in your dashboard
- Select the form
- View all submissions chronologically
- Click on a submission for details
Export Submissions
- Go to form submissions
- Click on Export
- Choose format (CSV or Excel)
- Download the file
Tips for Effective Forms
Keep It Short
- Ask only what is necessary
- Combine first name and last name into one field
- Avoid optional fields unless useful
Clear Labels
- Use clear field names
- Add placeholders as examples
- Show error messages directly at the field
Mobile Friendly
- Test forms on your phone
- Ensure large touchable elements
- Use the right keyboard (email, phone)
Related Articles
- Custom HTML and CSS in Sitebuilder
- Adding Social Media Buttons
- Creating a Multilingual Website
- More Information on Building Websites at Theory7
Need Help?
We are here for you! Are you facing any issues or do you have questions? Our support team is happy to assist you personally. Send us a message via the ticket system - we usually respond within a few hours and are happy to help.
0 van 0 vonden dit nuttig