How to create a contact form with landing page creator

You can find contact form widget while you work with our Drag&Drop landing page creator. This designer enables you to create pop-up templates, landing pages, thank you pages, etc.

If you want to create and design a template of a form in Drag&Drop landing page creator from scratch, you need to start with creating its framework or, in other words, layout. Then, you have to fill the structure with widgets, which are basic graphic elements of an interface. In this designer, you can select both standard and advanced widgets.

Here is an exemplary landing page which you can create in our Drag&Drop landing page creator:

Go to WEBSITE MARKETING => CONTACT FORMS => LANDING PAGE


Main steps

  1. Layout
  2. Widgets
  3. Advanced widgets
  4. Your widgets

1. Layout

[1] Layout – in this section, you can select one from seven kinds of layouts which in the next step you need to fill in elements which you can find in Widgets section.

[2] Widgets – in this section, you can choose from a variety of elements which you will add to the layout, e.g. text, heading, image, button, etc.

[3] Advanced Widgets – in this section, you can find developed widgets.

[4] Your Widgets – this section includes ready-made widgets which you have created and saved.


2. Widgets

Contact form enables a user to subscribe and get into the SALESmanago system. The form can consist of any number of fields you like, which you can add after you go into its settings. You can ask the user about various information (e.g. contact details, personal details, the name of the company, etc.).

After you click , you will be able to see the window below. There are three tabs in which you can change the settings concerning field layout, detailed settings of the layout and the appearance of the button.

[A] Field layout 

In this section, you can choose one of three layouts.

Add new field

Choose one of three field layouts which consist of columns. Then, in each of the column add a new field in which you can ask the user about various kind of information. You can choose pieces of information from the dropdown list next to Field name on contact card [1] (e.g. name, surname, address, postal code, country, etc.).

Additionally, you can add Custom detail which you can display as a checkbox (in this field you can type in the content of the agreement to receive notifications).

After you click Add new field, you will see this view:

[1] from a dropdown list choose the kind of information you want to ask the user in your contact form.

[2] the name in this field will display automatically once you choose the kind of information in the first field. It will be the same as in the first field. You can’t change this option because the information from this field will be mapped on the contact card of this user and you will be able to find it there under this particular name (e.g. if you choose Address, this information will be saved on the contact card under the name).

[3] in this section you can write a prompt for the user.

[4] tick it, if you want this field to be required.

[B] Settings 

In this section you can adjust detailed settings with regard to the field layout in the form.

[1] adjust the field height.

[2] adjust the column padding.

[3] adjust the distance between fields.

[C] Button 

In this section, you can customize the appearance of the button.

[1] type in any text you would like to display on the button.

[2] set the background color of the button.

[3] set the font color.

[4] adjust the border radius.

[5] choose the alignment of the button.

[6] adjust the height of the button.

[7] adjust the width of the button.

 

In Widgets section there are seven other, editable elements:

[1] Heading – after you drag and drop it in the layout, you will be able to type in any text which will display in the form of the heading.

[2] Text – it is a field in which you can type in any amount of editable text.

[3] Image – you can upload any image in your form. In the settings you can also add URL address, so right after clicking the image, the user will be redirected to this particular URL. Additionally, you can retain the original size of the image and adjust its margins.

[4] Divider – it separates the space within the form between the widgets. You can customize its appearance freely. It can take the form of solid line or dashed line. You can change its color, size, length, top and bottom margin.

[5] Margin – this widget creates an interval in your form. Additionally, you can adjust its height.

[6] Button – it is a button which enables the user to subscribe. You can customize its appearance by choosing the color of the background, the color of the border, its height and width, its framing and the border radius. Moreover, you can decide where the button will be placed on the form.

[7] Social media – you can link your profile to social media (Facebook, Twitter, Google+, Linkedin, Youtube, Vimeo, Pinterest, Instagram, Flickr, WordPress, Tumblr, WeChat and Youku)


3. Advanced Widgets

In this section, you can find developed widgets.

[1] Image + Text – it is a combination of image and a text. You can choose an image from gallery or upload your own.

[2] Product frame – you can add a product frame in which there will be displayed recently viewed products by the contact. You can choose the type of recommendation (AI Recommendation or recently viewed products by the contact), the background color of the frame and the maximum amount of products displayed in a row.

[3] Menu – you can add your own menu to the form. Settings enable you to change the font.

[4] Banner – you can upload your own banner here. Choose an image from the default gallery or upload your own. Additionally, you can retain the original size of the image and adjust its margins.


4. Your widgets

In this section, you can make use of the ready widgets which you have created and saved.

Once you’re done, click Save and continue.