Edit form field with widget type

StoreHippo allows you to edit the form field with the widget type. Editing a form field with the widget type involves following steps:

• Adding a widget in the design theme  
• Editing form field widget type
• Using that name in form field settings
• Adding logic in that widget so that scope fields will get data and set the value accordingly

Add a widget in the design theme 

You can add a new widget in design theme section in the StoreHippo Admin Panel. After you have added the widget, you can proceed with the next steps.

Edit form field widget type

To edit the form field widget type, follow the steps given below:

• Go to the Site > Forms section of the StoreHippo Admin Panel.

• Select the forms from the list of forms.

• Choose the label name for the customization. In the same row you will find a dropdown for Type, a select Widget from the dropdown.

• Click on the settings icon next to the dropdown. 

Use that name in form field settings

• Now, type the name of your widget which you have created, in front of the widget input box.

• Click the Save button to apply the changes.

Here are some examples of the widget customization for form fields.

Example 1: 

1. After going to the design theme panel, click on add a new widget and add the widget name.

2. Check out an example of the code generating city name with the help of Pincode.

So for that, the template code would be like this as shown,

<label for="{{field.name}}">{{field.label|msTranslate}}</label>
<input type="text" ng-readonly="field.settings.read_only" class="form-control" id="{{field.name}}"
       ng-model='fields[field.name]'
       placeholder="{{field.settings.placeholder|msTranslate}}">

3. This is the controller code.

function ($scope) {
 $scope.$watch('fields.zip', function (newValue, oldValue) {
   if ($scope.fields['zip'] == '122001') $scope.fields[$scope.field.name] = 'Gurgaon'
 })
}

4. The output will as shown below. By typing Pincode 122001, automatically Gurgaon will come under city-input box.

Example 2: 

1. Now if you want by typing City name, Pincode will appear that functionality can be achieved by the below code. 

2. Template code will be the same as above, but the controller code would look like this.

function ($scope) {
 $scope.$watch('fields.city', function (newValue, oldValue) {
   if ($scope.fields['city'] == 'Delhi') $scope.fields[$scope.field.name] = '110001'
 })
}