Contact forms are essential for any modern website. It allows our visitors to get in touch with us, give us feedback or ask about our services and products. To be honest it’s been years since I last seen a single website without some kind of a contact form!

If you tried building a contact form from scratch though you will probably notice it’s not a simple task, since it requires more than HTML and CSS knowledge. You will also need PHP to add the send mail functionality and Javascript (or an AJAX library) to add validation to the fields.

Luckily for us Webydo, a new and sophisticated website builder, provides an easy way to build custom forms as well. For those unfamiliar with the platform, Webydo is a DMS (Design Management System) that allow us to create websites visually without writing a single line of code.

Furthermore we can publish our website online immediately, enjoying fast cloud hosting and managing our content easily through its intuitive CMS interface.

In this tutorial we’ll explore the form building tools of Webydo and show you how fast it is to build a completely custom form with some sort of anti-spam protection and validation.

To follow along, simply go and register for a free account in Webydo and start with the blank layout.

Let’s get started!

To start designing our form, click on the “Form” tool to place a form element in our canvas. We can then move it and resize it to suit our needs.

The top panel changes to give us tools to design our form and the right panel have some further options for the selected form elements. In the case of the form container we can see a new tab called “Form”.

From the “Form” tab, you can add the email you want to receive the form data. You can also add more than one emails if you wish by clicking the “+Add email” button.

Let’s start now designing our form!

We can use the “Shape” tool to create regions and organize our data better. We can add labels to them using the “Text” tool. Or we can add images with the “Image” tool.

I already added a shape and a text frame and now continue by adding 3 “Text input” fields. We’ll use them to get name, email and website of the visitor. To add the element in the form, simply click in the “Text input” field.

The “Text input” element is actually a group of elements and consists of a label text, the input field itself, and the validation text. We can click on any of these separate elements and edit them.

Let’s start by editing and setting the label texts. To do so, double click on the “Label Text”.

After you finish click on the input field itself.

On the right panel go to the “Field” tab. Here we can choose the type of the field. The available choices are single line, multi-line & password.

Below we can choose a validation option and more specifically if it is email, number, telephone or date. We can also change the font, size and color of the typed text.

Below we can set if default text will appear on our field. To do so we can type it in “Predefined Text”. We can also check if the field is required or not, and make the error message visible or invisible by toggling the eyeball. After finish simply click on another field to continue with your edits.

Let’s now click on the email input field and set its validation option to email.

We’ll also make the website field optional by clicking on it and unchecking “Required Field”. We’ll also hide the error message by toggling the eyeball.

Let’s now add a drop down menu. The Drop down menu element is also a group of 3 elements: the Label, the drop down menu and the error (validation) message.

Click on the drop down menu itself. This gives us the Dropdown panel on the right where we can add, edit or delete items, set their font, mark it as required or not, set a title for the passive state and show or hide the error message.

To add an element in the dropdown menu, click on the +Add button. To delete an element, click on the trashcan icon. You can rearrange items by clicking and dragging the four-directional arrow on the left of the element.

Let’s now add another text input field and make it multi-line.

Finally we can also add a checkbox, asking the user to click it if they are human. This will prevent the less evolved spam bots to send us automated messages.

To add a checkbox, click on the “Checkbox” element at the top toolbar. That will place it on the canvas. We’ll just need one checkbox, so let’s delete the extra fields.

So at this point we have an operational form, and we can now add colors to its elements, strokes, shadows and rounded corners to make our form more visual appealing.

When you finish simply hit “Publish” and your website will go live along with an operational custom form ready to receive data! Just as easy and without writing any code at all!

I hope you found this tutorial useful and feel ready to start building your own forms and websites using the most professional website creator, Webydo!

If you have any questions feel free to comment below!

Written by Anna Mendelev: Graduated from the Holon Institute of Technology , with a degree in design. She has 3 years of experience in customer service and support. Anna currently works as the training and support manager at Webydo. She’s obsessed with dogs, hate’s mangos and enjoys romantic comedies and collecting shoes.