Skip to main content

Mini App Form Elements

Mini App Form Wrapper​

This is a wrapper for the entire mini app form.

data-sf="mini-app-form" /* Required */
Example!
<form data-sf="mini-app-form">
    {/* All other Mini App Form elements go inside */}
</form>
caution

This data attribute is required to be in a <form> element.

First Name​

This is the first name input.

data-sf="first-name-input" /* Required */
Example!
<input
  type="text"
  data-sf="first-name-input"
>
caution

This data attribute is required to be in a <input> element.

Last Name​

This is the last name input.

data-sf="last-name-input" /* Required */
Example!
<input
  type="text"
  data-sf="last-name-input"
>
caution

This data attribute is required to be in a <input> element.

Email​

This is the email input.

data-sf="email-input" /* Required */
Example!
<input
  type="text"
  data-sf="email-input"
>
caution

This data attribute is required to be in a <input> element.

Confirm Email​

Add confomation email input.

data-sf="confirm-email-input" /* Not Required */
Example!
<input
  type="text"
  data-sf="confirm-email-input"
>
caution

This data attribute is required to be in a <input> element.

Country​

Country select input.

data-sf="confirm-email-input" /* Not Required */
Example!
<select className="form-control" data-sf="country-select">
    <option value="GB">United Kingdom</option>
    <option value="US">United States of America</option>
    <option value="AU">Australia</option>
    <option value="CA">Canada</option>
    <option value="CN">China</option>
    <option value="FR">France</option>
    <option value="DE">Germany</option>
    <option value="GG">Gurnsey</option>
    <option value="IT">Italy</option>
    <option value="JP">Japan</option>
    <option value="JE">Jersey</option>
    <option value="KR">South Korea</option>
    <option value="LU">Luxembourg</option>
    <option value="MX">Mexico</option>
    <option value="NL">Netherlands</option>
    <option value="NZ">New Zealand</option>
    <option value="NO">Norway</option>
    <option value="PL">Poland</option>
    <option value="OTHER">Other</option>
</select>
caution

This data attribute is required to be in a <select> element.

Feel free to add or remove countries to the list, just make sure the value is two letter country code.

Postcode​

Postcode input.

data-sf="postcode-input" /* Required */
Example!
<input
  type="text"
  placeholder="Postcode"
  data-sf="postcode-input"
>
caution

This data attribute is required to be in a <input> element.

Telephone​

Telephone input.

data-sf="telephone-input" /* Required */
Example!
<input
  type="text"
  placeholder="Telephone"
  data-sf="telephone-input"
>
caution

This data attribute is required to be in a <input> element.

Job Source​

Will return all the job sources from HR Recruit

data-sf="job-source-select" /* Required */
Example!
<select data-sf="job-source-select">
    <option></option>
</select>
caution

This data attribute is required to be in a <select> element.

CV​

Upload CV input.

data-sf="cv-input" /* Not Required */
Example!
<input
  type="file"
  data-sf="cv-input"
>
caution

This data attribute is required to be in a <input> element, with type of "file".

Cover Letter​

Upload Cover Letter input.

data-sf="cover-letter-input" /* Not Required */
Example!
<input
  type="file"
  data-sf="cover-letter-input"
>
caution

This data attribute is required to be in a <input> element, with type of "file".

GDPR Statement​

Will return the company's GDPR statement.

data-sf="
mini-app-form-gdpr-statement
" /* Required */
data-sf="
mini-app-form-custom-statement
" /* Not Required */
Example!
<div data-sf="mini-app-form-gdpr-statement"></div>
<div data-sf="mini-app-form-custom-statement"></div>
http://localhost:3000

By entering your personal information you are permitting "company name", and any processing agents, to access and use the information for recruitment purposes or as they state. Should this company be part of a larger group, the other companies within this group may have access to your personal information.

For more about how we use your information, see our Policy Privacy Notice.

GDPR Checkbox & Label​

data-sf="
mini-app-form-gdpr-checkbox
" /* Required */
data-sf="
mini-app-form-gdpr-label
" /* Required */
Example!
<div class="row">
  <input
    id="mini-app-form-checkbox" // This isn't required
    type="checkbox"
    data-sf="mini-app-form-gdpr-checkbox"
  >
  <label 
    for="mini-app-form-checkbox"  // This isn't required
    data-sf="mini-app-form-gdpr-label"
  >
  </label>
</div>
caution

Data attributes mini-app-form-gdpr-checkbox is required to be in a <input> element with type of "Checkbox".

Mini App form Message​

This is the message that will appear after the user submits the form.

data-sf="mini-app-form-msg" /* Required */
Example!
<div data-sf="mini-app-form-msg"></div>

Mini App form Iframe​

This is the iframe that will appear after the user submits the form of the application form.

data-sf="mini-app-form-iframe" /* Required */
Example!
<div data-sf="mini-app-form-iframe"></div>

Mini App Form Submit​

This is the Mini App Form submit button.

data-sf="mini-app-form-submit" /* Required */
Example!
<button type="submit" data-sf="mini-app-form-submit">Apply</button>
http://localhost:3000