Adminja's Forms module provides a way for you to quickly create your own custom forms to capture information.
Forms you create will include your logo and are automatically available at adminja.co, OR you can embed them in your own website for even deeper integration with your brand.
Forms can take the following actions when submitted:
- Create a new Lead on your Adminja Leadboard
- Create a new Task
- Create a new Note
- Send an Email containing all of the submitted information
Where can I manage custom forms?
Forms are created and managed from your account settings.
Visit Manage in the main menu and select Account. From your account profile, select the Forms tab.
Creating your first Form
- From the Forms tab, click Create a New Form.This will open a new form window:
- Give your form a descriptive name.
Your visitors will not see this name. It is for your own internal use.
- Decide what the form action should be: Create a Lead, Create a Task, Create a Note, Send an Email.
- If you selected Create a Lead, choose which Leadboard stage leads should be added to.
- If you selected Create a Task or Create a Note, choose which Workspace and List items should be added to.
- If you selected Send an Email, specify the email address that should receive the form data.
- (Optional) Add a some instructions or an introduction to your form. These instructions will appear at the top of your form under your logo.
- By default, form submissions will receive a generic confirmation:
For deeper brand integration, you can specify your own confirmation page by checking the "custom confirmation page" box and providing a URL in the field provided:
- Click "Save" to create the form and customize the fields you want to use.
NOTE: If you are using a custom confirmation page, you'll need to create that in your website first. Make sure that the confirmation page URL matches the URL you entered in your form settings so your visitors are directed to the correct response after they've submitted your form.
Working with Default Fields
Adminja's custom forms have built in support for a number of the most common contact fields. To use any of these fields, select the Manage Default Fields tab and enable the fields you would like to include.
You may also change the order of the fields by dragging them up and down the list.
Note: Forms that create Leads REQUIRE the First Name, Last Name and Email address fields at a minimum. If you've selected "Create a Lead" you will not be able to disable these fields.
When the form is rendered, Default fields will appear under your form instructions, prior to any Custom Fields you configure.
Working with Custom Fields
By selecting the Manage Custom Fields tab you can create your own fields and form elements to make sure your forms capture exactly the information you need.
To get started, click Add a Form Element:
This will reveal a form where you will specify which element you want to add along with it's configuration:
Simply select the type of element you'd like and complete any fields that appear.
The following form elements are supported:
- Small Text Field
- Large Text Field (textarea)
- Select Drop Down Field
- Checkbox Field
For fields, you can specify whether or not the field is required, along with the field text.
For Select fields, you can specify multiple options in the field provided. Enter 1 option per line.
For Headings, Subheadings and Paragraphs, you can specify their text copy.
Dividers and vertical Spacers have no settings.
Note: For groups of checkbox fields, it's always a good idea to place a subheading above them all to provide the question context.
Saving and Arranging
Once you've configured your new element, click Add and the new element will appear in your Custom Fields list.
Once you have more than 1 element added to your custom fields, you may rearrange them by dragging them up and down the list.
Viewing your Form
You can view your form at any time by clicking View Hosted Form
You can test your form by filling it in and submitting it here.
Sharing your Form
The URL to view your form view will appear near the bottom of the form window when you save it.
Simply copy this URL and use it in email or website links or share it directly with anyone you wish to direct to the form.
Embedding Forms in Your Website
If you'd like to present your forms from the context of your own website and brand, you'll need to embed your form's code in a page on your website.
- Open the Form and, at the bottom, click View Embed Code
- This will reveal the HTML code you'll need to embed the form in your web page:
- Click Copy to Clipboard
- Open the page on your site where the form should go in a text editor and paste the Embed code in the exact location you'd like the form to appear.
If you are using Wordpress: Add a Custom HTML block to your page and paste the embed code in it.
If you are using Wix: Add an HTML Element to your page, select the "code" option and paste the embed code into the element.
If you are using Squarespace: Add a Code Block to your page and paste the embed code into it.
Styling Embedded Forms
We've purposefully implemented very few style choices in embedded forms to ensure the form appears as if it is part of your own website design.
If you would like to add custom styling, please rely on the following structural notes:
- The form itself has a class of: .adminja-lead-capture-form
- Every field is wrapped with a DIV with the class of: .adminja-field
- Each of these DIVs also has a class denoting it's type:
.adminja-field-label (for subheadings)
- For field elements, each of these DIVS contains 2 elements: A <label> and the field itself (<input>, <textarea>, <checkbox>, <select>)
- For non-field elements, each of these DIVS contains 1 element: An <h3>, a <label>, a <p>, an <hr>, or in the case of spacers, and empty paragraph.
- The submit button has the class of: .adminja-submit-button