WYSIWYG Web Builder Hands-On Tutorial | Forms

Learn how to create secure, contact / feedback forms using WYSIWYG Web Builder.

In this tutorial, you’ll learn how to set up form containers, organize input fields, implement form validation, and configure the built-in PHP form processor to handle form submissions and send emails.

About WYSIWYG Web Builder
WYSIWYG Web Builder is a visual website design tool that lets you create professional websites without writing code manually.

Online Tutorial & Reference:
Explore the full documentation: https://www.wysiwygwebbuilder.com/forms.html

#WYSIWYGWebBuilder #WebDesign #WebsiteBuilder #NoCode #WebForms #PHPForms #DragAndDrop #WebDesignTutorial

---

Closed Caption:

Today, we are going to build a
fully-functional, secure feedback form
that routes visitor data straight into
your email inbox. By the end of this
tutorial, your visitors will be able to
type in their details, click submit, and
seamlessly land on a custom confirmation
page. To follow along, you need two
things: WYSIWYG Web Builder open on your
desktop and access to a web hosting
account that supports PHP.
Before we touch any form controls,
create two new blank pages in your
project. We'll use one as a success
destination and the other as an error
page. Go to your toolbox and drag either
a standard form container or a layout
grid with form functionality enabled
onto the canvas. This container acts as
your form area. If you are building a
responsive page, use the layout grid and
enable its form functionality in the
properties menu. This allows your form
to adapt to different screen sizes. Now,
let's add the controls. Drag two edit
boxes inside your form area, one to
collect the visitor's name and another
for their email address. For those
inputs to function properly, every
submitted control requires a valid,
unique name property.
Avoid using spaces, commas, or special
characters in these names. Next, place
three radio buttons inside the form to
create a simple user rating system.
Label your three radio buttons as poor,
good, and excellent. To ensure a visitor
can only pick one rating, open the
properties for each radio button and
assign them the exact same group name.
Add text label objects next to your
inputs. In the label properties, use the
four drop-down to link each label to its
corresponding input. This makes your
form accessible to screen readers and
lets users click the text itself to
select an option. Finally, add a button.
Open its properties and set the type to
submit. This gives the user a way to
trigger the data transfer. But, how does
that data actually reach you? The form
action setting decides. Double-click the
main form container to open its
properties and locate the action
settings block. You might see an older
option called mail to, but it is highly
unreliable. It tries to force the
visitor's personal email application to
do the heavy lifting, which often
results in lost messages. Instead, we
use the built-in form processor. This is
a script that runs on your server. Think
of it as a background engine that
handles the delivery silently, so the
visitor doesn't have to. Check the box
labeled use built-in PHP form processor
script.
You need to configure three mandatory
text fields here. Type in the
destination email address, a clear
subject for your notifications, and an
introductory message that will appear
above the submitted data.
Use the drop-down menus to link the
success and error pages we built
earlier.
When the PHP script finishes its job, it
routes the data to your inbox and safely
guides the user to a confirmation
screen. Before we publish, we need to
prevent users from submitting blank
fields or fake email addresses.
Double-click the email edit box to open
its properties and navigate to the
validate tab. Set the data type to email
address and choose the info bubble mode
for real-time feedback. Real-time info
bubbles pop up immediately if the user
types invalid data, keeping your design
looking professional instead of
triggering an intrusive browser alert.
If your host requires authenticated
SMTP, open the advanced tab. Here, you
can enable PHP mailer and provide the
exact port and password credentials your
server demands. We have one final step
in the software before we test. We have
to open the page properties and alter
the file extension to PHP. Because this
script requires an active server, you
cannot verify if the form works by using
a local desktop preview. To test a PHP
script, you must publish your project
files directly to a live PHP enabled
server. If you have followed every step
and emails still fail to arrive, contact
your web host support team. Posting
rules differ wildly and they can check
the specific error logs on their end.
The built-in PHP form processor converts
a static web page into a secure data
collection system without custom code or
third-party plugins. The form builder
also includes native functionality to
securely accept user file uploads. For
data storage, submitted records can be
written directly into a MySQL database
or exported as a CSV file. To automate
communication, you can configure an auto
responder to instantly send a
confirmation receipt back to the
visitor. Server protection is handled by
integrated anti-spam tools using CAPTCHA
and hidden honeypot fields to intercept
automated bot traffic. Using the
built-in PHP processor takes the heavy
lifting off the visitor's computer. The
server handles everything behind the
scenes, ensuring reliable delivery.
Thank you for watching and see you in
the next tutorial.