Articles in this section

See more

Creating and Editing Forms

Vine-Tuki
  • Updated
Follow

Creating and Editing Forms

Creating a Form

  1. To create a new form click New Form on the Forms page.
  2. Select a form template or select "Empty form" if you want to start from scratch:

  1. Enter a name for your form.
  2. 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:

Embedding a Form

To add a form to your HTML 5 web page you need to insert a special DIV element to your HTML code.

Click Embed.

If you created your site using WordPress then select WordPress for instructions how to add the form to your web pages. You can do this using the WordPress Vine plug-in.

For all other systems, select Other and then click Copy to get the needed DIV code to the clipboard:

Now you can go to your web page and paste the code from the clipboard in the place where you want the form to appear.

For example:

Copy

Embedding a Form

<html>
<head>
 <!-- This has to be added to all web site pages to make Vine tracking work: -->
 <script src="https://cdn.vine.eu/vscript/330348929.js" data-cookieconsent="ignore"> </script>

 <!-- CSS file can be linked if needed -->
 <linkrel="stylesheet"type="text/css"href="newsletter.css">
</head>

<body>
 <p>hi</p>
 <!-- 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>
 
</body>
</html>

Click OK to close the dialog.

Publishing a Form

Click Publish when you want to update the form in all web pages where it is used.

Comments

0 comments

Please sign in to leave a comment.