call to replace anchor tags contains '/admin' in href

Creating custom forms

On several occasions, you might need to create custom forms to capture user input from your customers for marketing, auditing, data analysis or other purposes. StoreHippo allows you to create custom forms and uses them in store themes and on static pages. 

Go to Site > Forms section in StoreHippo Admin Panel to create a custom form. Click on Add New button in the top right corner. The following window appears with the fields described below:

Name

Enter the name of the form.

Fields

In the fields tab, enter the details of the fields that are part of the form. For each field, please enter the following subfields.

Field Label

Enter the label of the field that will be visible to the customer. 

Field Name

The field name is the name by which data for the given field is stored.

Field Type

The field type is the edit/display type of the form field, e.g. text, select, radio etc. Following are the available values of the field type:

Standard Field Types

  • text
  • textarea
  • file
  • select
  • checkbox
  • radio
  • email
  • password
  • date

Following are the special field types available:

  • country: Shows all countries in the dropdown list.
  • state: Shows the states of the selected country in the dropdown list.
  • widget: Allows you to specify a theme widget name that can be used to build custom form fields. The widget must be present in the theme.
  • phone: Allows phone number validation by the selected country. E.g. +917894561230 is valid in India +17894561230 but not in USA
  • captcha: Shows captcha on the form.

Field Settings

Next to each field, a gear icon is provided to edit the settings for the field. Field settings allow you to edit the field properties. Please refer to Metafields for complete information.

Settings

In the settings tab, you will see the following fields:

Title

Enter the title of the form.

Description

The description can be displayed below the form title to brief user about the form while rendering the form. You can include instructions for users on how to fill the form in the description.

Actions

Actions field allows you to choose the actions that will be performed when the user submits the form. Currently, there are two types of actions allowed.

Save Data: The data is saved when a user submits the form. You can view the form data in the data tab next to settings.

Send Email: Email is sent when a user submits the form. You have to specify the mail notification template, sender and receiver when you chose this action type.
In mail notification, you have to specify the variable as per your specified field_name.

  • Mail template: Name of the mail notification to be sent. The name of the template and variables should be the same as mentioned in the notification template.  
  • Receiver Email: Email id of the receiver email.
  • Attachment fields: Name of the field(s) having file type, which you want to send as an attachment in the email. If there are multiple attachment fields, use a comma to separate them. eg. "pan card,aadhar_card". Please note that .exe,.mp3,.zip are not supported.

Data

When you select Save Data as the field action type, then the form data submitted by the user can be seen here.

  • Click the export button to export the data in CSV format.
  • Click on the gear icon to view the raw data.
  • Click on delete button to delete a particular record.

FAQ

Q. How to display form title on storefront?

You can display the form title on the storefront using the following code:

<div ng-bind-html="ms.forms.formname.title"></div>
Q. How to display form description on storefront?

You can display the form description on the storefront using the following code:

<div ng-bind-html="ms.forms.formname.description"></div>
2019-02-21T13:13:32.750Z