help center

Add a form

Forms are easy implementations that allow you to collect a lot of important data about your customers. Discover how you can add them to your website and completely customize their styling in this article.

light-bulb-shine

This article will help you:

  • Implement a form on your webpage
  • Style a form

The first step is to create and edit a case in your editor. If you don’t know how to do this, you can follow this article about how to add a case .

  1. Once the editor has loaded you’ll have to click the + button to add an element to your page.
  2. After clicking the + button you’ll get a complete overview of all the elements that can be added to your page. Drag the Form button to the part of the page where you want to activate it.

    alert-trianglePlease note that you have to drag the button instead of just clicking it.

The next step is the configuration of the form.

  1. Method gives you the option to pick between GET and POST.

    A GET protocol keeps the information stored in the URL. This information is visible to everyone. GET is used to request data from a specified resource.

    POST is used to send data to a server to create/update a resource. This information is invisible to others and embedded in the body of the HTTP request.

  2. Action refers to the endpoint where your data will be stored. This is a page or server linked to your website.

When you’ve completed the configuration you can completely customize your form in the next step. You can customize all fields and style them by clicking the gear icon.

Every element has 5 key styling options:

  1. Background allows you to choose a specific background color or image to spice up your element.
  2. Typography allows you to change fonts, font sizes, color and so on. This enables you to match the design with the rest of your website.
  3. Decorations enables you to add borders to your element and change the radius of it. You can also add a shadow to your element in this part of the editor.
  4. Dimensions gives you the option to change the width and height of your element. Another feature of this part of the styling is the option to customize the padding and margin of your element.

    Padding enables you to change the position of for example the text of a certain element within the text area itself.

    Margin on the other hand enables you to change the position of the complete element compared to other elements in the pop-up.

  5. Position lets you decide the position your element towards other elements. A static position keeps the element in its place while an absolute position moves is to the back and puts the other elements on top of it. We recommend using static positions for elements in a pop-up.

Make sure your form has been saved, close the editor and add this case to one of your journeys. If you don’t know how to do this, you can read this article about how to add a journey .