Forms have always been the simplest way to capture leads, do market research, conduct customer surveys or even get registrants for an event. But are they really that ‘simple’? Web forms have come a long way since their humble beginnings and are packed with some really powerful features nowadays. The easiest way to get your free form up and running today is via a versatile form builder such as Arengu.
Once you are logged into Arengu, select ‘Create a Form’ and choose your preferred form template. The four available form types are self-explanatory, so choose whichever suits your business needs the best.
In this tutorial, I’m going to give you a walkthrough of the Scratch Form that lets you build a custom form with powerful features.
Once you select Scratch Form, you will be taken to an intuitive builder that boasts a user-friendly interface. Let’s begin by creating a lead generation form for a salon.
The basics of a form field
Add the field ‘Text’ by dragging it from the left bar into the builder. You can rename the field label by clicking on it. I have changed the label to ‘What is your full name?’.
On the right hand side of the dashboard, under Field Settings, you can change the field type if needed by selecting one from the dropdown menu. The field ID is mandatory and assigned by default, which you change if needed.
Next, you will find the following checkboxes to personalize the field further:
- Label: Uncheck to remove the label.
- Hint Text: Add additional text below the Label or use it as the label itself.
- Required: Make a field mandatory.
- Transient: Disable field data persistence to avoid saving sensitive information. Data is not stored in Arengu.
- Multiline: Increase the height of the container for longer response.
There are other options to include a Placeholder Text (a descriptive text displayed inside the input field until it is filled by the user), incorporate a Default Value or specify the minimum and maximum character length of the user input.
To preview and test your form at any point, simply Publish it, go to the Share tab at the centre of the header and then under Direct link, click Preview link in new tab. After submitting a form, you will be able to view the responses under the Submissions tab.
Other field types
The Email and Phone fields that come next are self-explanatory and are equipped with a similar set of field settings as mentioned above. Apart from capturing user input such as the email address and phone number, you can create simple or complex form validations (make custom HTTP requests to multiple web services to verify user information) using Flows by Arengu, which we will cover in a separate tutorial.
Choice: This field is particularly helpful if you wish to give the user the option to choose their preferred time for a callbackcall back, for example. The text has been renamed to ‘When should we call you back?’ and the choices have been added via Add new option.
You will also notice that for this particular field, there is a new checkbox called Multiple Choice under the Field Settings. You can select or deselect this checkbox depending on whether you wish to give the user the option to select multiple options or just one.
The URL field type is easy to understand, so let’s explore further.
Password: Lets you collect passwords which is usually seen in sign up forms. For this particular field, you will find a new setting on the right called Hash that allows you to select your preferred hash function from the dropdown menu.
Payment: Lets you collect one-time or recurring payments using Stripe. Other payment providers will be added gradually. At this point, you can actually split your form into multiple steps to reduce friction and boost conversions. Multi-step forms are great for collecting payments or getting registrations.
To set up the payment field in a multi-step form, select Add new step at the bottom. Drag and drop the Payment field here and rename the labels if you wish to. You will find additional options under Field Settings where you need to select the payment type and enter the Public Key and Private Key obtained from Stripe.
Legal: Allows the user to agree to your terms and conditions by clicking on the checkbox. This is typically placed at the end of the form.
Dropdown: Allows you to specify multiple options from where the user can choose anyoneany one. To add options, click on the field and go to Add new option under Field Settings on the right. Once added, you can also easily rearrange the options.
Number: Can be used to fetch any user input that is a number only. For example, you can ask How many times do you visit a salon in a month? or How much do you spend on salon services every month?
Date/Time: Can be used to gather input such as the user’s preferred date or time for the salon appointment. Don’t forget to change the Format on the right-handright hand side depending on whether you wish to capture the date or the time.
Yes/No: This is a boolean field which means that the response will be either true or false. The **Default value ** toggle makes Yes (or true) the default response.
Every time someone fills out your form, you will be notified via email. Needless to say, you can easily access the form submissions in real-time and if needed, export the data as CSV or JSON.
So that’s it! Start creating beautiful forms on Arengu and share them with a direct link or embed them in your webpage with a single line of code. And, don’t forget to give us a shout when you do!
In the next tutorial, you will learn how to create a Flow on Arengu to give your forms even more power.