HomeWebsite ManagerEdit an existing websiteHow to create custom lead form on website

How to create custom lead form on website

 

To create custom lead form and tag on website to create lead

To create form you can use these below fileds as key fields inside ng-model to capture value

You need to enable and add ng-controller=”_leadCtrl” in top of your form inside div

//Use these input fields:

// name

<div class=”tw-custom-form-input-group”>

<label class=”item item-input item-stacked-label”>

<ion-label>Name*</ion-label>

<div><input type=”text” ng-model=”leadObject.contact_info.first_name”></div>

</label>

</div>

 

// email

<div class=”tw-custom-form-input-group”>

<label class=”item item-input item-stacked-label”>

<ion-label>Email Address*</ion-label>

<div><input type=”email” ng-model=”leadObject.contact_info.email_id”></div>

</label>

</div>

 

// number

<div class=”tw-custom-form-input-group”>

<label class=”item item-input item-stacked-label”>

<ion-label>Phone Number*</ion-label>

<div class=”row no-padding”>

<div ng-if=”leadObject.contact_info.additional_data.complete_address.country” class=”tw-form-mobile-country-code”> +{{leadObject.contact_info.additional_data.complete_address.country}}</div>

<input type=”text” ng-model=”leadObject.contact_info.phone_no”>

</div>

</label>

</div>

 

// message/query

<div class=”tw-custom-form-input-group”>

<label class=”item item-input item-stacked-label”>

<ion-label>Message</ion-label>

<div>

<textarea class=”tw-custom-form-textarea” rows=”5″ cols=”65″ name=”{{form_line.key}}” ng-model=”leadObject.query”></textarea>

</div>

</label>

</div>

// fields to be used for form(ng-model):-
Name: leadObject.contact_info.first_name
Email: leadObject.contact_info.email_id
Phone: leadObject.contact_info.phone_no
Message: leadObject.query

 

Use this configuration on submit(ng-click event) button function (fnSubmitThisLead) to control form:-

To make mandatory(required) fields of form:-

1) lines to make required fields
‘lines’: [
{
‘tw_key_field’: ‘first_name’,
‘required’: true
},{
‘tw_key_field’: ’email_id’,
‘required’: true
},{
‘tw_key_field’: ‘phone_no’,
‘required’: true,
},{
‘tw_key_field’: ‘query’,
‘required’: false,
}
],

2) to provide form name/source channel
‘source_channel’: ‘Form Name’,

3) on success callback of api
‘success_callback’:{
‘redirection’:{
‘link’:’/about-us’,
‘new_tab’:true
},
‘message’:’Thanks for your query, we well get back to you soon.’
},

‘redirection’: To redirect your customer after successful submission where link is link of wherever you want to redirect and new_tab is for if you want to open in new tab or is same tab.

‘message’: Message is if you want to show any message after successful submission of form

4) on error callback of api
‘error_callback’:{
‘redirection’:{
‘link’:’http://test.twirll.com/register.html?email=//email_id//’,
‘new_tab’:false
},
‘message’:’Error while submitting form, please try later.’
}

‘redirection’: To redirect your customer after form submission error or failure where link is link of wherever you want to redirect and new_tab is for if you want to open in new tab or is same tab

‘message’: Message is if you want to show any message after failure of form submission

Was this article helpful to you? Yes No