The Smarketly Drag and Drop Builder allows you to create your first form within minutes. You can edit a ready-made template or create your own one from scratch without any coding or designing experience. 

Learn how to create one here.

How to build your first form

1. Go to Builder → Forms to start building your form.

2. In the Templates section, you can click "Form Builder Tutorial" and learn step-by-step how to use the Drag and Drop Builder to create a form.

Tip: If you don't see the Form Builder Tutorial template straightaway, use the search field to find it by name.

3. Next, you need to either select a ready-made form template to use (scroll down to view all options) or hit "Blank Template" and create a new one from the ground up in the Drag and Drop Builder.

4. Find different elements under the Elements tab in the toolbar on the left-hand side like “Input Field”, “Checkbox”, “Radio Button”, etc.

You can look for an element by name using the search field.

Below it, you can preview what the default element looks like.

Click on one of them and then drag-and-drop it into your form.

5. Go to the Inspector tab by clicking the relevant tab in the toolbar on the left-hand side or click the Pencil icon in the formatting toolbar right above a selected element to start customizing it.

7. Under the Inspector tab, you you have a number of options to customize the appearance of your form.

Under Attributes, you can choose the device(s) that will show the selected element, align it on the page, change the class, ID, height and width.

8. Under Text Style, you can choose one of our fonts or access Google fonts by clicking the G icon, set the text size and line height.

You can also embolden, italicize, underline, strikeout and color your text areas, as well as align text left or right, center or justify it.

9. Under Padding, you can generate space around content and different elements.

Padding enables you to clear an area around the content (inside the border) of an element.

10. Under Margin, you can generate space around content and different elements.

Padding enables you to set the size of the white space outside the border of an element.

11. Under Background, you have the option to add a background color, image or gradient.

12. Under Border, you have the option to specify the style, width, and color of an element's border.

13. Under Border Roundness, you can round up the corners of an element's border.

14. Under Shadows, you can choose the shadow's angle, color, distance, blur, spread, and specify a part of an element you want to add a shadow to.

15. In the Steps tab, you can add a second step to your form by clicking "Add Thank You Step" in the toolbar on the left-hand side.

16. Once you click "Add Thank You Step", a copy of your form will be created which you can fully customize to fit the desired next step.

17. Add analytics and tracking information to your form in the Analytics tab in the toolbar on the left-hand side.

Under this section, you can specify your Google Tag Manager and Google Analytics account ID, assign IDs to every button, video, and form, and insert External Conversion Code or a snippet of code for Google Webmaster Tool Meta Tag Verification.

18. Check out how your form and each one of its elements will look like on different devices and edit them to meet your specific business needs by clicking on one of the devices in the top toolbar.

Just select a device you want to see this form on and edit any element to make it different on this device only. 

19. Preview the form on each device by clicking the Eye icon in the top toolbar.

20. Switch between devices to see how your form will look on them.

Click "Back to builder" to go back to form setup.

21. You can also add a custom script to your form in the Source tab section in the top toolbar. 

Thus, for example, if there is a specific element you want to add to your form which we do not have in our list of elements, you can go to the Source tab to copy and paste your code exactly where you need it. 

22. Set up auto-save in the settings tab under the Gear icon in the top-right menu.

Make your choice by toggling the relevant button on or off for free element dragging and the auto-save feature.

23. If everything is correct, then hit the "Save" button to save your changes.

You can also make use of arrows to undo or redo a step.

Click "Next" to save your creation and leave the Drag and Drop Builder.

Tip: You can hit "Save" as often as you'd like.

24. Later you can find your form under Builder → My Templates. Sort all the elements by category by clicking "Category" and choosing "Form" in the drop-down menu.

You can also create landing pages, emails, and popups in Smarketly's Drag and Drop Builder.