> For the complete documentation index, see [llms.txt](https://docs.cotter.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone/customize-the-form.md). # Customize the Form ## Customize the Form from the Dashboard You can now customize the form from [Cotter's Dashboard](https://dev.cotter.app/) > Project > Design. ![](/files/-MXtivfWqAyXySH8FbeI) **Customizable Features that are not available in the Dashboard:** * [Add Additional fields](/sdk-reference/web/web-sdk-verify-email-phone/older-sdk/advanced-customization.md#additional-fields) * [Advanced Styling](/sdk-reference/web/web-sdk-verify-email-phone/styling.md) ## Advanced Configuration Reference You can use our advanced config to have more functionality: #### Usage: ```javascript var cotter = new Cotter(config); // ๐Ÿ‘ˆ Put the config in here cotter .signInWithLink() .showEmailForm() .then(payload => {}) .catch(err => {}); ``` #### Config: Here's an example of a complete configuration: ```javascript var config = { // Required Basic Configuration ApiKeyID: "", Type: "PHONE", // EMAIL or PHONE ContainerID: "cotter-container-signup", IdentifierField: "phone", // Change Country Code CountryCode: ["+62"], // IT HAS TO BE AN ARRAY // Styling ButtonBackgroundColor: "#000000", ButtonTextColor: "#ffffff", ButtonText: "Sign Up Now", ButtonBorderColor: "#D2D3FF", // don't specify for no border // Adding fields AdditionalFields: [ { label: "Full Name", name: "name", placeholder: "Enter your full name" } ], // Intercepting before authentication is processed OnBegin: payload => { if (payload.identifier != "+12345678910") { return "Phone Number is not allowed"; } return null; }, // Add WhatsApp option to send verification code // (only for type = PHONE) // ################################################ // # ๐Ÿ‘ˆPlease read the section about WhatsApp ๐Ÿ‘ˆ # // # to comply with WhatsApp's Policy # // ################################################ PhoneChannels: ["SMS", "WHATSAPP"], // default = ["SMS"] // WhatsApp Button Styling ButtonWAText: "Continue with", ButtonWATextSubtitle: "Tell your customer that you'll be sending the verification code via WhatsApp", ButtonWABackgroundColor: "#128C7E", ButtonWABorderColor: "#075E54", ButtonWATextColor: "#ffffff", ButtonWALogoColor: "white", }; ``` ## **Description** | Field Name | Description | Required | | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | | ApiKeyID | your `API_KEY_ID` | Y | | Type | `"EMAIL"` or `"PHONE"` | Y | | ContainerID | `id` of the `
` where you want to serve Cotter Form. | Y | | ButtonBackgroundColor | Button background color. Use HEX format (e.g. `#000000`) | N | | ButtonTextColor | Button text color. Use HEX format (e.g. `#FFFFFF`) | N | | ButtonText | Button text. Default is "Sign Up Without Password" | N | | [AdditionalFields](/sdk-reference/web/web-sdk-verify-email-phone.md#additional-fields) | Additional fields that you want to include in the JSON obj. Check the specs for [Additional Fields Object](/sdk-reference/web/web-sdk-verify-email-phone.md#additional-fields) below | N | | IdentifierField | Field name for the identifier to include in the JSON obj. For example, if you want to include the phone number in the JSON obj under key `"phone"`, then fill in `IdentifierField = "phone"` | Y | | [OnBegin](/sdk-reference/web/web-sdk-verify-email-phone.md#onbegin) | A function that will be called before the signup process begin. Check the specs for [OnBegin](/sdk-reference/web/web-sdk-verify-email-phone.md#onbegin) below | N | | [CountryCode](/sdk-reference/web/web-sdk-verify-email-phone.md#countrycode) | **An Array** of country code options for the user | N | | PhoneChannels | **An Array** of channels to send verification code to your users. Default value is `["SMS"].`Available values are `SMS` and `WHATSAPP.` For example, to allow both SMS and WhatsApp, specify `["SMS", "WHATSAPP"]` | N | ### **Additional Fields** The additional fields will be used to generate more `` fields for your users. The format is as following: ```javascript var config = { ... AdditionalFields: [ { label: "Full Name", name: "name", placeholder: "Enter your full name" }, { label: "Address", name: "address", placeholder: "Enter your address" }, { label: "Prefilled Info", name: "prefilled", type: "hidden", // type can be "hidden", "text" or "number" initial_value: "autofill value" } ], } ``` > Available types: `hidden`, `text`, `number` This will be sent to you to the [RedirectURL](/sdk-reference/web/web-sdk-verify-email-phone.md#redirecturl) endpoint above as part of the JSON object. For example, with the fields above, you'll get a JSON object like the following. **JSON Object to be sent to `RedirectURL`:** ```javascript { "token": {...}, [IdentifierField]: "+12345678910", // Additional Fields "name": "Hello World", "address": "Street Address", "prefilled": "autofill value" ... } ``` ### **OnBegin** This function will be invoked before the Signup/Login process. You will receive the following payload as a parameter to your function **Payload passed into your OnBegin function** ```javascript var payload = { identifier: "+12345678910", identifier_type: "PHONE", device_type: "BROWSER", device_name: "Chrome ..." }; ``` You can do a check against the `identifier` here before the form is submitted. If you include `OnBegin` key, you have to either **return an error string**, or **return null** if you want to continue the authentication process: **A. If you want to continue submission:** ```javascript return null; ``` **B. If you want to stop submission with an error:** ```javascript return "Your error message"; ``` Example: ```javascript OnBegin: payload => { if (payload.identifier != "+12345678910") { return "Phone Number is not allowed"; } // No error, continue submission return null; }, ``` ### ### **CountryCode** The default value is `CountryCode: ["+1"];` {% hint style="warning" %} If you specify this, **you have to use an array** even though you only need 1 country code! {% endhint %} ex. with 1 country code ```javascript CountryCode: ["+1"]; ``` ex. with 2 country codes ```javascript CountryCode: ["+62", "+91"]; ``` {% hint style="success" %} Our SMS and WhatsApp messaging works **worldwide**! {% endhint %}