Login to eoBox Contact us

User interface portal

Logging in to the eoBox service

The eoBox user interface portal can be accessed using the following URL:

https://k8kji1bwwd.execute-api.us-east-1.amazonaws.com/eoBox_web_ui

Enter your user ID and drag-n-drop your login key file from Windows Explorer into the area with the green border. Upon successful login you will be redirected to the Messages tab the of portal.

Messages tab

The Messages tab displays the received form submissions. The form submissions are listed 25 at a time in the message list panel on the left hand side of the screen, newest first. Further messages can be loaded using the paging arrows at the top of the message list. Click on a message title in the message list panel to display the form submission data. Note that it is not possible to delete messages. The system automatically deletes them after 60 days.

Form designer tab

The toolbar for the form designer contains the form management buttons and the drag-n-drop form element buttons, circled in red in the below image. Previously created forms can be opened from the Forms button. In the following example we will create a standard contact form. Click on the New button to create a form. You can directly edit the title of the form as well as the text of the form submission and cancel buttons. Don’t forget to save your work!

Now we will add two single line text fields and a textbox. Drag each element onto the form area. As a form field is dragged over the form area the insertion position is highlighted by a red "drop zone."

The labels can be edited directly. Change the first element's label to "Name:", the second element's label to "Email:" and the textbox’s label to "Message:". Each form field has three buttons associated with it as shown in the below image.

To delete a form field click on the Delete button. Form fields can be reordered by clicking/holding down the Move button and dragging the form field into a new position.

Click on a form field’s Options button to bring up a field’s configuration dialog. By default all form fields are required. A form field can be set to optional by checking the appropriate checkbox as in the image below. The configuration dialog also allows for entering a custom form field validation error message.

The configuration dialog for single line text fields also allows for setting the type of the field: text, number or email. The default type is 'text'. The eoBox service will validate the user entered text based on the form field type. For drop down lists the first value in the list is selected by default. Hence, a custom error message is not applicable. The values for a drop down list can be set in its configuration dialog. Enter the values in the order in which you want them to appear, one per line.

When a checkbox or radio button form field is dragged onto the form, a button group is created with a single checkbox/radio button. You can add additional checkboxes/radio buttons to the group through the right-click menu as shown below. Note that by default form fields are required. For checkboxes, unless the form field is set to optional in its dialog, all checkboxes must be checked by the user.

Website integration

When a form is saved to the eoBox service it is assigned a form ID and a static URL, as shown in the image below. There are two ways to display the form. Either link directly to the static URL, or display the form on your website. For the second method you will need to link to the eoBox javascript file in the HTML header section of your page.

In order to load a form and display it to a website visitor we first need to link to the eoBox javascript file and initialize the library. Two lines of code need to be included in the HTML page's HEAD section in the following order:


<head>
<script src="https://s3.amazonaws.com/eobox/eobox.js"></script>
<script>eobox.init(#)</script> 
</head> 

Replace # with your user id.

Show a form

A form can be shown using javascript:

eobox.showForm(#)

# should be replaced by the ID number of the form that is to be displayed to the user. In the From Designer section we created a contact form which was assigned the form ID number of 1. In the examples bellow we will be using this number. However, you will need to substitute in the form ID numbers for your own forms.

Link example

The eobox.showForm command can be added directly to a link:

<a href="javascript:eobox.showForm(1);">Contact us</a> 

Button example

The eobox.showForm command can be added directly to a button:

<button onclick="eobox.showForm(1)">Contact us</button>

HTML element example

Any HTML element can be assigned a click event handler. However, for this method you will need to do a bit of javascript programming. In plain javascript you will need to add an event listener to the "DOMContentLoaded" event. For example, the following code adds a click event handler to the HTML element with ID of "example_id":


document.addEventListener("DOMContentLoaded", init);
function init(){
   document.getElementById('example_id').addEventListener("click", function(){ eobox.showForm(1); });
}