<img src="abc.png" />
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:


Enter the name of the form.


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
  • select
  • checkbox
  • radio
  • password
  • date
  • phone

Following are the special field types available:

countryShows all countries in the dropdown list.
stateShows the states of the selected country in the dropdown list.
widgetAllows you to specify a theme widget name that can be used to build custom form fields. The widget must be present in the theme.
phoneAllows phone number validation on the basis of the selected country.
E.g. +917894561230 is valid in India  +17894561230 but not in USA. 

Field Settings

Next, to each field, you will see a gear icon. Click on the icon to edit the settings for the field. Field settings allow you to edit the field properties e.g.
  • Validation Rules
  • Field-specific properties e.g. option values in the case of select, checkbox, radio types.
  • Placeholders
  • Default Values etc.
  • Show/Hide the field
  • Field Groups: If you want to group your fields, you can mention the name of the group here. By default, the value of field group is "default".


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


Enter the title of the form.


While rendering the form, the description can be displayed below the form title to brief user about the form. It could include instructions for users on how to fill the form.


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.
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.
Send Email

Mail template: Name of the mail notification to be sent. The name of the template and variables should be same as mentioned in notification template.  

Sender Email: Email id of sender email.

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" . 

Note: (.exe,.mp3,.zip not supported)


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.


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>