Native Forms

Native forms allow you to build forms using Encharge and embed them on your website (or use a public shareable link) to collect email contacts and information about people.

Accessing forms 

To access forms in your account, go to https://app.encharge.io/forms or click Forms in the top navigation bar.

The list of forms will be displayed on the All Forms page, while under Folders, you will see the folders you created.

Here are the details that you will find for each form in the table:

  • Name - Displays the name of the form together with an action button (three-dot icon) and a status indicator beside it, indicating if the form is active (green) or not (gray).
  • Created - The date and time when the form was created. 
  • Updated - The date and time when the form was last edited.
  • Link - A link to view the list of form submissions.
  • Views - The number of times the form is viewed.
  • Submissions - The number of times the form is submitted.
  • Conversion rate - The percentage of submissions over the number of views.
  • Folder - The name of the folder to which the form is added.

Create a new form

To create a form, click the blue plus sign ( + ) at the bottom left. 

A box will pop up in the middle of the screen where you can choose a name for the form and select the folder to which you want to add the form.

After typing the name and selecting a folder, click the Create Form button to create the form. Note that selecting a folder is not required so you will be able to create a form without choosing one from the Folder dropdown, you can, however, move a form to a folder at a later stage.

The Create Form button will create the form and you will be taken to the main interface of the form builder. This page has two primary tabs: Edit Form and Integrate Form.

The form builder

Changing a form name
Click the name of the form in the top left and type the new name of the form. Note that this name is used for internal purposes only. 

Viewing form submissions
On the right, you have a button to view all form submissions, which will take you to the form submissions page in a new tab.

Saving a form
It's important to note that forms in Encharge are saved automatically! This means that there's no Save button. The time on the right shows when your form was last saved. It's also important to understand that if you start making changes to a live form that is embedded on your site (or shared via link) you are making updates to the form in live mode, so we recommend deactivating a form first and then making changes to it.

The form builder consists of two main sections/tabs:

  • Edit form - with all form settings and options
  • Integrate form - settings for embedding or sharing your form

Edit Form section

You can make changes to the form from its default settings in this section. The preview of the form is shown on the left, which consists of two stages: the actual form and the success message (what users see when they submit the form). On the right sidebar, you will see the Fields, Style, and Options tabs.

Fields 

The Fields tab lets you make changes to the fields, text, and success message of the forms. Here are the actions that you can perform in this tab:

Change the text on your form 

You can change the text on the form and add a custom above, between, or below the fields. To do this, click Text on the Fields tab and type the text you want to appear on the form.

Add and delete fields 

To add a field to your form, click the Add field button and select the field from the list. You can delete a field by selecting the field under Form and clicking the delete button. Note that you can not remove the Email field - an email field is required to be able to identify the people submitting your forms.

Change a field's label, type, and placeholder

The fields that are added to your form are shown under "Form". Expanding a field by clicking it will show you the Field label, Field type, Field placeholder, and a toggle to make the field required.

  • Field label - By default, this is set to the name of the field, but you can set a custom label that you want to show on the form. This is the text that shows above the field box. You can use markdown for the field label.
  • Field type - Supported field types are Text, Textarea, Number, Email, Date, Select, and Checkbox (also known as a Boolean  - True/false - field in Encharge). When editing existing fields, some field types might not be available - for instance, you can't turn the default Full Name field into a number field or the Lead Score field into a text field. 
  • Field placeholder - Set a custom placeholder. This is the text that will appear in the actual field. The placeholder is a good place to show an example field value - e.g., for Full Name, you can use "John Smith" as a. Note that when a person clicks on the field and starts typing, the placeholder becomes hidden, that's why it's recommended always to have a clear field label.
  • Require field - A toggle that allows requiring the field in your form. When enabled, the form cannot be submitted if the field is empty.

Form button 

The form button text is set to "Submit" by default, but you can change it to any text you want. To do this, click "Button" below Add field and type your preferred text.

Marketing consent

This option will ask people to check a box before they are able to submit their form. You can add custom text and links (using markdown) to the label of this field in order to link to your privacy policy or other agreements. When checked sets the "Unsubscribed" field value to "false" and sets all email categories to "Opted in"

Change the success message 

The success message will appear after the submission of the form. It is set to "Thank you! Your submission has been sent." but you can change this by clicking Text below the Success message section and typing your new success message in the box.

Style

Making visual changes to the form can be done in the Style tab using the Form Styles feature or by adding a custom CSS. Explore the sections below to discover the visual changes that can be made in each of them.

Form

  • Background - changes the background color of the whole form.
  • Max width - changes the maximum width of the form and is set to 500px by default.
  • Font - changes the font and applies to all elements.
  • Horizontal padding - changes the horizontal padding of the form container.
  • Vertical padding - changes the vertical padding of the form container.
  • Elements space - changes the top and bottom spacing between the form elements.
Text

  • Color - changes the text color of the form, including the Success message.
  • Size - changes the text size of the form.
  • Alignment - changes the alignment of the text on the form.
Button

  • Text - changes the text color of the Submit button.
  • Text size - changes the text size of the Submit button.
  • Background - changes the background color of the Submit button.
  • Border - changes the color of the border of the Submit button.
  • Radius - changes the roundness of the corners of the Submit button.
  • Alignment - changes the alignment of the Submit button.
  • Horizontal padding - changes the horizontal padding of the Submit button.
  • Vertical padding - changes the vertical padding of the Submit button.
Fields

  • Label - changes the color of the field labels.
  • Input text - changes the color of the input text.
  • Text size - changes the text size of the fields.
  • Background - changes the background color of the fields.
  • Border - changes the color of the border of the fields.
  • Radius - changes the roudness of the corners of the fields.
  • Horizontal padding - changes the horizontal padding within the fields.
  • Vertical padding - changes the vertical padding within the fields.
Custom CSS

Copy and paste the custom CSS here to override the embedded CSS of the form.

Here's a list of the CSS classes that you can use to update the look of the form:

  • encharge-form-group
  • encharge-form-label
  • encharge-form-input
  • encharge-form-submit-button
  • encharge-form-success-message
  • encharge-form-error
  • encharge-form-top-text
  • encharge-form-checkbox
  • encharge-form-body
  • encharge-form-container
  • encharge-marketing-consent  - this class will apply changes only to the marketing consent section. 
  • But you can also use any other CSS class on the embed or the public page.

For instance, to update the background color of the button, you can add: .encharge-form-submit-button { background-color: red }

Note that some CSS selectors like "name" will not work.

Options

The Options tab allows you to enable and set up actions that will happen after people submit your form.

You can:

  • Show them your success message or redirect them to another page
  • Add tags 
  • Send an internal email to your team
  • Send contacts an email for a personalized confirmation/welcome.
Show success page 

This action will show the success message you set on the Success Message section of the Fields tab. Enabling this automatically disables the Redirect to page action.

Redirect to page

The Redirect to page action sends your subscribers to another page after submitting the form. You can choose between showing a success message or redirecting to a new page, so when enabled, the Show success page action is automatically disabled. 

To set it up, click the toggle to enable and paste the URL of the page into the box underneath.

Add tag

After form submission, add a tag to the people who submitted the form by enabling Add tag under Form submit actions.

Enable it by clicking the toggle and selecting a tag or tags from the list of existing tags you have in your account. You can even create a new one by typing the new tag and clicking Create just below the box. Note that you can add more than one tag at a time.

Send internal email

Send an internal notification to you or your team when someone submits the form.

  • Recipients - enter your email or the emails of your team members. You can add up to 5 recipients per form.
  • Subject - the subject line of the email. You can use merge tags.
  • Message - the message of the internal email. You can use merge tags.

Send email to contact

Send an automated email to the person who submitted the form. This could be a confirmation email that you have received their request or a welcome email, for example.

  • Subject - The subject of your email. For example, "Thank you for your submission, {{person.firstName}}". You can use merge tags
  • Message - The message of the email. You can use merge tags. For example, you use merge tags with the form fields to confirm their form submission response.

Integrate Form section

This section gives you options to share your form by embedding the form on your website or using a public link on the Encharge website.

You can also deactivate your form from here. Note that forms are activated by default. If you want to make changes to a live form (a form that is embedded on your site or shared with your audience), we highly recommend deactivating the form first.

Embed code

If you want to embed the form into your website or web page, you need to use this option. To do that copy the code of the form and paste it into the HTML code of your website, where you want the form to appear.

Link

This is a publicly shared page with your form. If you don't have a website or don't want to embed code, you can share this page directly with your audience.

Using forms in flows

To use a form in a flow, you need to add the Encharge Form Submitted trigger. This will add people to the flow when they submit the form.

Redirect Contacts and Pre-populate fields with Encharge data

You can now use redirect URLs like https://encharge.io/course-creator-thanks?email={{email}}. Where "email" is the API name of the field you are using (you can check the API name from the Custom Fields page in Settings). 

Please note this will only replace fields that were filled by the user in the form.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.