Getting Started with Zapof

Zapof provides a form builder that reduces complex tasks of creating a form into simple steps of adding questions and web elements and choosing their settings.

To create your first form, sign in at https://zapof.com/signin

It will bring you to your Home space. Your Home space is where you can:

View templates, your forms, submitted forms, web pages, archived and trashed stuff.
Manage your account such as updating account details, redeeming purchased code, resetting password, adding extensions, and submitting support request.
Upgrade plan.

Creating a form from scratch.

At your Home space, click the ‘Create’ button on the left toolbar if you are not currently on the Create panel.
Click the ‘Create’ button on the ‘New blank design’ card. (Select ‘Web page’ and click ‘Create’ if you want to create a web page). This opens the editor with a blank page.

Adding Question or Web Element.

Click the ‘Add Question & Element’ button on the left toolbar. It opens the ‘Add’ panel with all types of questions and web elements.
Click the ‘Add’ button on the ‘Single-line text input field’ card. It appends the input field to the editor content.
To edit the text of the input field, click the pencil button or click the ‘Enter Text’.
Type 'First name:'
Click the pencil button to deactivate field’s text editing.

Copying, Pasting and Adding Line Break.

Select the first name input field.
Note: if you click the text, it activates the text editing. Deactivate the text editing by clicking the pencil button on the element’s toolbar.
Press Ctrl+C or Cmd+C to copy this first name input field.
Note:
If the input field is not selected, click the input field to select it and press Ctrl+C or Cmd+C.
Instead of pressing Ctrl+C or Cmd+C, you can also click the ‘Copy’ button on the editing toolbar.
Click the line break button to add a line break after the first name input field.
Select the line break by clicking the small circle at the end of the line.
Note: While the line break is selected, to add more line break, press Enter.
Press Ctrl+V or Cmd+V to paste the input field and update the text to ‘Last name’.
Note: you can also use the ‘Paste’ button on the editing toolbar.

Inserting an element.

Adding a question and web element from the Add panel appends the question or web element at the end of the editor content if there is no selection in the content. Let’s insert an email address input field in between the first name and last name input field:

Select the first name input field.
Click the ‘Add Question & Element’ button on the left toolbar. Browse the elements to find the ‘Email input field.’ Alternatively, type email in the search input and press Enter.
Click the ‘Add’ button on the ‘Email input field’ card.
It inserts the email input field after the first name.
Click the line break button to add a line break before the email input field.
Update the field’s text to ‘Email address’.

Moving an element using ‘drag-and-drop’ or ‘cut-and-paste.’

If you still follow the above steps, the email is at the wrong place. Let’s move it after the last name.

Click the email address input field to select it.
Note: if you click the text, it activates the text editing. Deactivate the text editing by clicking the pencil button on the element’s toolbar.
Click the drag-drop-handle and drag it. Drop handle appears on other elements in the content for you to drop the element to the desired location.

Drag-and-drop may not always the best way to move an element, especially the desired location is too far or outside the viewing area. An easy way to do it is to cut and paste.

Click the email address input field to select it.
Click the ‘Cut’ button on the editing toolbar. Alternatively, press Ctrl+X or Cmd+X.
To insert the email address input field after the line break below the first name, click the small circle of the line break.
Click the ‘Paste’ button on the editing toolbar, or press Ctrl+V or Cmd+V. The email address is now below the first name.

Resizing an element.

Add another ‘Single-line text input field’, update the text to ‘Address’, and continue with the following steps:

Select the address input field.
To resize the text box, click and drag the small circle next to the text.
To resize the address input field, click and drag the small circle at right end of the element.
To resize the height, click and drag the small circle at the bottom of the element.

Deleting an element.

Select the address input field.
Click the ‘Trash’ button on the editing toolbar. Alternatively, press Del.

Undo and Redo.

To undo the previous action, press Ctrl+Z or Cmd+Z. To redo previously undone action, press Ctrl+Y or Cmd+Y.

Alternatively, you can use the Undo and Redo buttons on the editing toolbar.

Adjusting element settings.

Each type of question or web element has its own toolbar. The toolbar appears when you select the question or the element. To show the what each button on the toolbar is, click the last button (right-arrow button) on the element’s toolbar. To close the button labels, click the right-arrow button again.

Making a question mandatory.

Select the first name input field.
Click the mandatory (asterisk) button on the element’s toolbar.
Note: the form will not submit until the user answers this mandatory input field.
To remove the mandatory attribute, click the mandatory button again.
Note: the button is a colored button when we enable the attribute. Otherwise, it’s non-colored button.

Changing Input Field Position.

Select the first name input field.
Click the input field position button on the element’s toolbar.
Choose 'Adjacent to the question', 'Below the question', or 'Above the question'.

Updating form title and its settings.

Click the ‘Title & Settings’ button on the left toolbar. It opens ‘Settings’ panel.
Enter the title and description of the form.
Enable options that suit your requirement. Let’s enable the option ‘Allow the user to download the submitted form as a PDF file.’
Select the regional and the time zone if necessary. We should have automatically set it according to your local regional and time zone when you sign up.
Click the ‘Apply’ at the top right corner.

Auto-saving and saving.

Zapof Form Builder has built-in auto-saving feature that auto-save periodically or when you go back to ‘Home’ space without saving it first.

To save your form, click the ‘Save’ button on the top toolbar.

Previewing.

To preview your form before publishing, click the ‘Preview’ button on the top toolbar.

Publishing.

Public does not have access to your form until you publish your form. To publish it, click the ‘Publish’ button on the top toolbar.

Getting the URL link or embed code to add them to your website.

Click the ‘Share’ button on the left toolbar. It opens the ‘Share’ panel.
To test the link, click the ‘Open link to a new window’ button.
Note: if you have published it, the link opens a ‘Not yet published’ page.
Click the ‘Copy Link to Clipboard’ button, or select the URL and copy it. Paste the link to your webpage editor.
Alternatively, if you want to embed the form in your webpage, enter the domain of the website such as www.example.com
Click the ‘Show Code’ button.
Click the ‘Copy Code to Clipboard’, or select the code and copy it. Paste the code in your webpage editor.