Creating and Editing Forms
Creating a Form
- To create a new form click New Form on the Forms page.
- Select a form template or select "Empty form" if you want to start from scratch:
- Enter a name for your form.
- Click Create. The form will be created and opened in the form editor.
Editing a Form
The form editor shows form editing tools and content building blocks on the left side and the form editing area on the right side of the page:
Adding a Block
To add a block to the form, just click it on the Content tab to add it to the bottom of the form or drag it to any row on the form. When you drop the field, the Block tab will automatically open where you can configure the block.
All the blocks are organized into the following two groups:
- Blocks. In this group most fields are saved to predetermined database fields and you cannot change it.
- Custom Blocks. In most of these blocks, you can select into which person field to save the field data.
Moving a Block
Simply drag a block to a new location. You can use the icon as a drag handle.
Removing a Block
Point at the block you want to remove and click the dust bin icon .
Copying a Block
Point at the block you want to copy and click .
Saving a Form
Click Save to save your changes to the current form. The Save button is only enabled when there are not yet saved changes in your form. Please note that saving a form will not automatically update it on your site. You have to publish it to update it on the site.
Exiting the Form Editor
Click Exit if you want to leave the editor. You will be asked to confirm if you want to leave without saving your changes.
Checking Form Submits
To see the detailed information about all times the form has been submitted, click Submits. (This command shows the same "Submits" page shown using the Submits command in the list of all forms.)
Click Export to Excel to export the list of form submits into an Excel file.
Renaming a Form
Click next to the form name and type the new name:
Click or hit Enter to save the name.
Previewing a Form
Click Preview to test how your form will look and work in a real web page:
Select Show for Identified to verify your form for known site visitors:
and select Show for Anonymous to verify the form for yet unknown site visitors:
To add a form to your HTML 5 web page you need to insert a special DIV element to your HTML code.
If you created your site using WordPress or Joomla then select WordPress or Joomla, respectively, for instructions to add Vine forms to your web pages. You can do this using the WordPress Vine plug-in or Joomla Vine plug-in, respectively.
For all other systems, select Other and then copy the given DIV code which you need to paste to your web page where you want the form to appear:
Click Copy and then paste the copied code to the needed place in your page.
Embedding a Form
<!-- This has to be added to all web site pages to make Vine tracking work: -->
<!-- CSS file can be linked if needed -->
<!-- This DIV has to be added in the place where you want the form to appear: -->
<div class="VineForm"data-form-id="1300355205">Form 1300355205 to be rendered here.</div>
Click OK to close the dialog.
Click Publish when you want to update the form in all web pages where it is used.