Custom HTML Entry forms

CSS and HTML are available on the Advanced and Power plans. If you are on the Basic or Standard plans, you will need to upgrade to use custom CSS or HTML.

To use a custom form, visit your campaign’s Design section and click on the Form Element. In the menu that opens on the left, click the Code icon to open the HTML editor for that element. You can modify the existing code, or delete and replace it with your custom form.

Do not use a separate HTML element. For your form to work, you must paste your code into the Form Element on the Entry page. Woobox will not collect data for any forms outside of the Form Element on the Entry page.

Basic HTML Entry Form Example

<form name="myform" action="">
Enter Email Address: 
<input 	type='text' 
   name='email' 
   rules='required' 
   error='You must enter an email address'/>
<input type='submit' name='submitbutton' value='Submit' />
</form>

The basic form above will collect email addresses from users. Let’s take a look at the important elements.

1. The <FORM> tag
Your input form should start with:

<form name="myform" action="">

You’ll notice the action parameter is empty. Our system will automatically fill that in.

2. The <INPUT> tags
You can use whatever HTML input tags you want including SELECT and TEXTAREA. For more details about input tags please see this link. All input types are supported including file uploads. You can have as many input fields as you like.

<input type='text' name='Email' rules='required' error='You must enter an email address'/>

• name – name name is required and must be unique for every input tag. This will determine the name that is shown in error messages and in your input export file.
• rules – rules is an optional parameter. Currently Woobox supports the required rule which allows you to require the submitted field is not empty.
• error – error is an optional parameter. The message you put in the error parameter will be shown to the user when the rules are not met.

3. Submit button

<input type='submit' name='submitbutton' value='Submit' />

The submit button input type will allow users to submit your form.

4. Close </FORM>

</form>

Don’t forget to close your form with a closing form tag.

Accessing User-Submitted Form Data

After you save your Form Element’s HTML, our system will detect the input fields and display them in the left-hand menu under Settings.

All user input into your form will be saved in the export file that you can download for your campaign. The downloadable file is in CSV format and should import easily into your favorite spreadsheet software. You’ll notice the top row contains the column names that correspond to your input field names.