Creating your own form with Elfsight Form Builder

A brief tutorial to help you find your way around Elfsight Form Builder

Creating your own form on a website used to be a difficult task, but now, with all the form-building widgets it’s getting easier to do. One of the latest, most capable and simple widgets is our own Elfsight Form Builder widget.

Most of the settings are easy and intuitive, but there is a couple of tricky moments. Let me walk you through the most basic steps by looking at the settings tabs, one by one. Hopefully, this will help you get started.

Selecting a template

The first thing you need to do when you start creating your own form is to select a template for it.

Templates are a relatively new thing for our service, and one of the first apps to get them is actually Form Builder. Templates provide you with a ready-made form for specific purposes. Let’s take a look at the templates available with the Form Builder app:

As you can see, we have tried to think of as many use-cases as we could, and we created templates for a contact form, an online survey, for sending a feedback and a booking template. We also have a blank template that you can use to convert to any form you like.

Let’s take the Survey template as an example, and check each element to see how exactly they can be adjusted to fit your specific use-case.

Form tab

The place to start shaping your website form is Form tab. After you’ve selected your template, you’re going to be redirected to that tab, to customize your template:

What this settings tab basically does is let you fill in the content of your form – questions, answer options, information that you need to request.

First things first, let’s start with setting up your form’s header. Click on Header section in the left-hand menu section, and you’ll get to the screen where you can work with header settings. Here’s what you can do:

  • Switch Show Form Header to off to remove the header – 1;
  • Change and format the header text – 2,3;
  • Change header icon – 4.

Next, let’s see what we can do with the form elements. Click on Share Your Opinion element in the left-hand menu to go to the editing screen.

On this screen you can change the name and the description of the survey in corresponding fields. This is about the easiest part here.

You can duplicate, remove or add any form element. To duplicate, click on the Duplicate icon next to the name of the element, to remove – click on Remove, and to add an element – click on Add button below the list of elements.

For our purposes, let’s edit the very first element, Rate Your Experience. Click on the name of the element in the list, and you’ll go to the editing screen. Once there, here are the things that you can do:

  • Change the question of the survey – 1;
  • Set the maximum number of stars – 2;
  • Set the question as a required field – 3;
  • Change the description of the question – 4;
  • Change the column layout of the field – 5.

By clicking on Duplicate, you can duplicate the items in the form, and by clicking on the name of the item on the list, you can also edit it. The duplicated items will appear in the list of form elements, and you can drag and drop it to the right place, to make sure it’s displayed in the correct area:

And here comes a point that might be tricky with the Survey template. After you save the changes you’ve made to one form element, you need to go back to Form Elements screen to select another form element to edit, but to see the edits you make you also need to click Next on the form page itself:

Only then you’ll be able to see the second form element:

So basically, with the Survey template, each form element is in a sense a separate step.

Make all the changes in the same way as you’ve edited the first form element and return to Form tab.

The last thing you can edit on Form tab, is the Submit button. Click on Submit Button section, and you’ll get to a screen where you can edit the text on the button:

Settings tab

After you’ve created the questions and the content of your form, you can switch to configuring technical settings and display mode. Click on Settings tab, and you’ll be redirected to the screen where you can do the following:

  • Set the email your surveys will be sent to – 1;
  • Choose what happens after the form is sent – 2;
  • Edit Thank You message text – 3;
  • Activate/deactivate saving form progress – 4;

Save all the changes you’ve made by pressing Apply, and move on to Layout tab, to adjust your form display on the page.

Layout tab

As you can see, on this tab you can do the following things:

  • Change the layout – 1;
  • Set the widget’s width – 2;
  • Activate/deactivate progress bar – 3.

You can choose one of the three predefined layouts. If you choose Floating to make the form scroll along with the page as a visitor is browsing it, you’ll also have to choose an icon for your floating widget:

Width field is a very important one. By default, the width is set to 580 px. However, if you need your form to be mobile responsive, you need to set widget width to auto. In this case the widget will automatically calculate its width according to the size of the screen it’s browsed on.

Important!!! For better mobile responsiveness, set the widget width to Auto!

Style tab

Having finished on Layout tab, you can move on to Style. This is the tab where you can choose one of the predefined display styles, set the colors for your form and add custom CSS:

It’s important to know where the CSS field is located in the settings!

CSS are small bits of code that are often used to make individual changes to a widget. If you require any specific widget customization, chances are that you’ll be doing it via CSS. So to make these codes work with your widget, you need to add them to Custom CSS field and save the changes.

I hope this article’s helped you find your way around the Form Builder app. Remember, that we’ve used just one of the available form templates as an example. The others are a bit different, and have different controls and fields, but all the templates work in the same way, and so this article should be good for you.

However, if you have any questions that weren’t covered here, you’re welcome to find the contacts of our Support Center below, and to message me for information. I’ll be delighted to chat! 🙂