Building forms for your website can often feel overwhelming, especially when you’re just starting out. The DevelopmentBucket Form Builder makes the process smooth and intuitive. Whether you need a contact form for customer inquiries or something more complex, this guide will help you create and customize forms with ease.

1. Access the Admin Panel and Locate the Website Option

Start by logging into the admin panel of your DevelopmentBucket account. Once inside, look to the left sidebar for the "Website" option. You’ll find it listed as the third option in the menu.

*Insert image showing the sidebar with the Website option highlighted*

Clicking on this will reveal a dropdown menu.

2. Select the Page for the Form

From the dropdown menu, you’ll see three options:

• Pages
• Categories
• Posts

Click on "Pages" to open a list of all the pages on your website. Choose the page where you want to add the form. For this guide, we’ll use the Home Page as an example.

*Insert image of Pages list and Home Page selection*

3. Open the Page Editor with Live Edit

Once you’ve selected the page, look for the "Live Edit" button in the top-right corner. Clicking on this will take you to the page editor, where you can view and make changes to your live website.

*Insert image showing Live Edit button*

4. Add a Contact Us Layout

To begin adding your form, follow these steps:

• Click on the "Add Layout" option.
• A pop-up will appear with design categories on the left and layout previews on the right.
• Scroll through the categories and click on "Contact Us" (seventh in the list).
• Select the layout that matches your needs from the right side.

*Insert image showing layout selection with Contact Us highlighted*

5. Customize the Form Fields

Hover your cursor over the form’s boundaries until you see a "Settings" icon.

Click on the "Settings" icon to open the Form Fields menu.

From here, you can:

• Add New Fields (e.g., Phone Number or Address)
• Edit Existing Fields (e.g., change "Name" to "Full Name")

*Insert image showing the form with editable fields*

6. Configure Auto Respond Settings

Navigate to the "Auto Respond Settings" tab in the form editor.

Enable the option to send an automated response email.

Here, you can:

• Draft a personalized thank-you message
• Specify the "Reply to" email address

Example message:

"Thank you for reaching out! We’ve received your inquiry and will get back to you shortly."

*Insert image showing Auto Respond Settings panel*

7. Adjust Contact Settings

Under the Contact Settings tab, you can:

• Rename the form (e.g., “Home Page Contact Form”)
• Update the description for added context

*Insert image showing Contact Settings options*

8. Set Up Receivers for Submissions

Navigate to the Receivers tab in the settings.

Enable the option to send form data to custom email addresses.

Example: Add support@yourwebsite.com for customer inquiries.

*Insert image showing custom receiver email input*

9. Explore Advanced Settings

The Advanced Settings tab includes:

• Captcha: prevent spam submissions
• Thank You Pop-Up Message
• Newsletter Subscription Checkbox
• Agreement Checkbox for terms & conditions
• Data Saving Options

*Insert image showing Advanced Settings options*

10. Change the Template Design

Go to the Templates section.

Browse designs under "Current Skin / Template".

Select a new design to instantly update your form’s look.

*Insert image of template selection interface*

Wrapping Up

With DevelopmentBucket Form Builder, creating and customizing forms is easy. Here’s a quick recap:

• Access the admin panel and locate "Website"
• Select the page and open it with Live Edit
• Add a Contact Us layout
• Customize the form fields
• Set up Auto Respond messages
• Adjust Contact Settings
• Set up specific receivers
• Use Advanced Settings for more control
• Change the template design if needed

Make your forms live today and see how they can transform user interactions on your website!