If you want to add link in input

There are some requirements when you need to add link in your text input like this
In this particular requirement, whatever coupon code is added, user to click on “Apply Code” to redeem it.
This is now possible using form-control.
New form control name as “text-url” is added in form control service. (soon will be added in form control service)
It works as same as text from control with some new parameters added for link config.
Consider following things for this.
fields_config:
XHTML

[field coupon_code label="Coupon Code" type="text" edit=yes parent_class='col-md-12' link_text="Apply Code" link_class="apply_coupon" link_url="" /]

1
2

[field coupon_code label="Coupon Code" type="text" edit=yes parent_class='col-md-12'
link_text="Apply Code" link_class="apply_coupon" link_url="" /]
link_text, link_class, link_url, these 3 arguments important for link addition. (you can add these according to requirement).
Added Changes in text-url form control are

<strong>[if.not_empty module.link_text]
  <a href="[module.link_url default='#' /]" class="[module.link_class /]" > [module.link_text /] </a>
[/if.not_empty]</strong>

<strong>[if.not_empty module.link_text]

<a href="[module.link_url default='#' /]" class="[module.link_class /]" > [module.link_text /] </a>

[/if.not_empty]</strong>

CSS:

[if.not_empty module.link_class]
 [css.style]
  .[module.get link_class /]{
     position: absolute;
     top: 40px;
     padding: 0.9rem;
     right: 15px;
     z-index: 1;
   }
  [/css.style]
[/if.not_empty]

[if.not_empty module.link_class]

[css.style]

.[module.get link_class /]{

position: absolute;

top: 40px;

padding: 0.9rem;

right: 15px;

z-index: 1;

}

[/css.style]

[/if.not_empty]

Using link_class you can further code you ajax or redirect or anything as per your requirement.
For actual service code you can visit – text-url
Happy coding!

Updated on Jun 19, 2021