webCRM's new forms gives you the freedom to design your own forms directly in webCRM - without the use of integrations or knowledge of HTML.
In this article, we will look into how you can easily design a form in line with your brand using our new form editor.
Box
In the box section, you can determine the overall visual expression of your form - i.e. the frame and composition.
1. Background colour
You can change the background colour by using a colour code or by using the colour picker on the colour spectrum.
2. Width
The width determines how wide the form is.
💡TIP! If you have a text-heavy form, you can choose to make the form wider so that it can contain more text horizontally. By doing so, you avoid the recipient having to scroll through the form.
3. Border radius
Decide whether you want square or round edges around your form.
4. Padding
How much air would you like to surround the content in the form? Here, you determine the distance from the right and left side of the form to the content itself.
5. Spacing
How much space would you like between lines in the content? Here, you determine the vertical distance between the data lines applies.
Label
Once we have the layout and overall framework in place, we can look into how we would like the actual content and data fields presented.
A label is the heading or explanation that accompanies each data field in the form.
1. Visible
You can choose to show or hide the labels of the data fields.
2. Font
Choose the colour, font and size of your labels.
3. Align
Choose the location of the labels. Would you like them to be placed to the left, centre or right of the data field?
4. Margin
Determines the amount of space between label and data field.
5. Inline
Where would you like the label to be placed in relation to the data fields?
6. Wrap
Should the text wrap to the next line if it does not fit in the data field?
Field
In the field section, you decide how the content of the data fields is presented - both when they are displayed or filled out/edited.
1. Font
You can change the colour, font and size of the text that the recipient fills out in the data fields.
2. Background colour
Choose the background colour for the fields.
3. Border colour
You have two options:
The colour box on the left determines the colour that surrounds data fields when the fields are not updated by the receiver.
The colour box on the right determines the surrounding colour of the current data field that the receiver is updating or if they hover over the field.
4. Border radius
Similar to the setting for the surrounding edges of the form, you can choose the edge sounding of the data fields - would you like them to be completely square, round, ore somewhere in in between?
5. Placeholder
You can choose to activate a small help text in the empty data fields. The placeholders has the same texts as the label texts. An example where you could use this, would be if you have chosen not to make the label text visible in the 'Visible' section of Label.
Button
You need a button to submit the data that is filled in or updated in the form. Under the button section, you can decide how it should look.
1. Font
You can change the colour, font and size of the button.
2. Background colour
You have two options:
The colour box on the left determines the colour of the button when the recipient does not click or hover over the button.
The colour box on the right determines the colour of the button when the recipient clicks or hover over the button.
3. Border radius
Should the edges of the button be square or round?
4. Which
How wide should the button be in relation to the width of the form?
Custom CSS
If you want to make further design changes than what the editor allows, you have the option of using CSS.
Note! webCRM support does not provide help with setting up CSS.
Note! Remember to enable your form before using i!
Read more about:
Read more about setting up forms, or see how you can get an overview of the submitted forms and statistics.