How to add a contact form to your website? | BOWWE Tutorial

How to add a contact form to your website?

A contact form is an intuitive website element that allows your site visitors to contact you very quickly. For this reason, it’s much more inviting to contact you than simply a phone number or e-mail address. That’s how a contact form allows you to get more inquiries about your business.

 

In this tutorial, you will find out how to add and effectively configure a contact form on your site.

How does a contact form work and look like?

You have probably already seen contact forms on many websites. They allow you to contact the company/owner of the site. Contact forms find their use in many business areas, including lead generation, marketing or customer service.

In contact form, the user most often provides his name, email address (necessary to get an answer to his question) and the subject on which he/she is contacting. At the end there is usually a field to enter message text.

This is, of course, the most standard example of a contact form. What kind of form you put on your site is up to you. BOWWE offers tremendous customization options for contact forms. So how to add one to your website? Find out below:

How to add and configure a contact form in BOWWE?

1
Open your website in the BOWWE Builder
2
Click the Green + button located on the right panel. From the MAIN WIDGETS group, select FORM

SIDENOTE: You can create a contact form from scratch or choose one of the ready-made layouts. All you need to do in them is to change only the images, colors and complete the contact information and you will be able to use them on your site!

3
Drag the widget and drop it on your site, wherever you want
4

After dropping the widget, the Settings panel will open

Now you can set basic and advanced useful settings for your contact form. Let's discuss them briefly:

The Show placeholder and Show labels options are responsible for describing the Contact form’s field to your visitors. You can select if you want to put the label inside or outside the field, on the left side or from the top. You can even select two options at the same time. Both labels have the same description but may have different styles depending on how you edit them in the BOWWE Builder.

Form fields width can be either Variable, which activates the ability to edit the width of the given fields on the right or Constant - which sets the fields automatically.

Option Columns is responsible for automatically dividing the fields into the selected number of columns 1-4.

Option Save form data to file additionally attaches all data attached by the filler to the file along with the message to the recipient. The file name must not contain spaces or characters other than in the English alphabet.

Option Redirect after successful form submit redirects the user to the page you specified after successful form submission. So you can for example: redirect the user to a “Thank you” page.

In the field below you should type text, which will be displayed to the user, after successful form submission. Most often, a “Thank you” is placed in this field.

Integrations

In the INTEGRATIONS section, select where you want the content of the completed form to be sent. Once you select one of the options, a pop-up will appear where you can enter your email address and the title of the email (by default, this is populated with the email configured with your account and if you are using the BOWWE template then you will find a placeholder to replace it).

Custom API Mapping

The Custom API Mapping option is dedicated for professionals and allows to integrate the form with the functionalities of your system after you enter the appropriate code.

Contact form fields

On the right side of the Settings panel you can see the current boxes of your form, which you can edit, delete or add new ones.

In the Label column, you can type the name for the field displayed to your site visitors.

The Type column is responsible for the type of data that will be possible to enter in certain fields (e.g.: the Phone Number type accepts only numbers, while the Email type will not allow you to send the form to the user if they enter an incorrect email address).

The Width column allows you to change the width of the given fields (you can choose between 100%, 75%, 66%, 50%, 33% and 25%).

Required field defines whether the field must be filled in for the form to be submitted (mostly used for email addresses).

Click the ADD FIELD button to add a new field for editing.

Click the SHOW FIELD NAMES button to see how the field is named in the code (this is an option for developers and professionals).

You can delete unneeded fields by clicking the trash can icon.

Use BOWWE drag-and-drop to finalize contact form’s design

Once you have approved the contact form settings, you will be free to move all its fields with drag-and-drop and change their order as you wish.

Congratulations!

Now you know how to add a contact form to your website!

Remember about:

 In addition to Portfolio, you can put on the Customer Reviews page. You will build even greater trust of potential customers in your company.
Use only high-quality photos in the Portfolio. Find out where to get them here!
Update Portfolio min. 1 a week. You will achieve higher rankings in search engines!

Dedicated to you

Didn't find the answer?

No matter what your problem is. We are here to help you find a solution.