Create forms

Build forms customers can use to provide feedback or request support.
  • Build feedback and support request forms

    Forms are a simple way for your customers to provide feedback or request support from you. You can build a form in Kustomer using a visual builder that allows you to select from a list of commonly used attributes and form components and then customize them to best suit your needs. This ensures that you receive all of the necessary information upfront, minimizing any back-and-forth between you and your customer and enabling you to provide a better response to their question.If you have multiple brands configured, you can create individual forms for each one of your knowledge bases.Who can access this feature?User typesAdmins can create forms.In this articleCreate a formUnderstand blocksCustomize component blocksUpdate your stylesheetUse the code editorCreate a formUse the visual form builder to quickly build a form and add it to your site. You can also use the Code editor to manually create a form. Since forms are created using the Conversation klass, the Email, Subject, and Preview fields are automatically added for you as required fields and cannot be deleted. You can add additional fields to customize your forms to suit your needs. There are no limit to how many fields you can add.To build a form using the Visual editor:Go to Settings> Knowledge Base > Forms.Select Add Form.Select Visual to use the drag-and-drop visual editor or Code to create a form manually.Note: Once you start building a form, you cannot change the type of editor you are using.Enter the following information:Brand is the brand for which you are creating the form. Internal form name is the internal name of the form that you'll see on the Forms page.Slug is the URL identifier for the form.In this example, we will build a Contact Us form. Select Add form.The left pane on the Form Builder editor shows all of your active standard and custom attributes, as well as components that can be added to the form. You can switch between available attributes by selecting an object from the drop-down menu.The center space in the editor is where you will build and customize the form to best suit your needs. Here, you can add all of the necessary attributes and components your customers will see when submitting a form. The Form Settings pane on the right shows all of the general settings that you can customize for your form, such as the button text. When you select a field in the editor, this pane changes to show all of the available settings for that specific block and is where you can visually customize them further. See Customize component blocks for more details.Continue to add fields as necessary. Select Save Changes.Understand blocksA block is essentially a row in your form that contains attributes or other component information, such as a radio button. You can add attributes and components to a block by dragging and dropping to the editor from the left pane.You can also select the Add field or + to open a menu that lists all the available attributes, components, and styling.Note: Attributes can only be used once. Those already used will appear in a gray box and visually indicate that they are no longer available.Customize component blocksYou can customize some component blocks by selecting them to view their individual options in the Field Settings panel on the right. For example, here, you can either delete the block from the form or customize the text displayed in the form.The following options are available for all components:Required lets you specify that information for this field or question must be entered before a user can submit the form.Overwrite Data lets you determine if the information entered for the field will overwrite the data currently in Kustomer. For example, if you turn on this setting for the Phone attribute, the number entered here will replace the existing phone number for the matching customer.Note: The options in the Field Settings panel will change depending on what type of component is currently selected.You can also use snippets to add translated content to your forms. For more information, see Reuse text with snippets.Once you make your changes, the visual settings are automatically applied in the editor. You can also see the styling by selecting View live.Note: Any changes to your forms are auto-saved and no previous versions are cached. It is important to note this prior to making new changes to your form.Update your stylesheetYou will need to update your form.css file so that forms display correctly.Go to Settings> Knowledge Base > Themes.Select Edit for your custom theme and select Create new draft.Open the form.css file and copy and paste the following block of code into it./*   ==============================   Columns   ============================== */ .form-row {   width: 100%;   display: flex; } .form-row-full .form-column {   width: 100%; } .form-row-half .form-column {   width: 50%; } If you are using the default theme, this will be added automatically.Select Save.Use the code editorYou can modify the form through code to remove or add certain fields, depending on how you would like it to look. To see the code, select the View code tab that is located at the bottom of the visual editor.If you want to make changes, select Convert to code. If you are sure you want to switch to the code view, enter CONVERT in the box and select the option confirming you want to make this change.Note: Once you convert the visual editor to code, you cannot undo this change.
  • Turn on recaptcha in forms

    You can turn on recaptcha on your contact forms to prevent spam and bots from submitting conversations in Kustomer.Who can access this feature?User typesContent administrators can access the Forms page.In this articleTurn on recaptchaUse recaptcha in a custom themeTurn on recaptchaGo to Settingsand select Knowledge Base > Forms.Select for the form you want to enable recaptcha.Turn on the Recaptcha toggle in the Form Settings panel.If using the code editor to create your form, you can add recaptcha by adding recaptcha={true} to the <Form> component as a property.To disable it, you can change the line to recaptcha={false} or remove it entirely from your code.Once recaptcha is turned on, the Submit button on your form will remain off until the recaptcha is selected.Use recaptcha in a custom themeIf you are using a custom theme, you may need to do some additional modifications to your theme for the recaptcha to display properly. Here are some FAQ when turning on recaptcha on a custom theme:Why does my Submit button look disabled (grayed out)?To solve this, please add the following code to your custom style.css theme:.btn:disabled {     opacity: 0.65; } .btn-primary:disabled {     background-color: #2D96CD;     color: white;     border-color: none; }My recaptcha widget is out of alignment. How do I position it differently?You can reposition the widget by creating a new CSS file in your theme.From Settings, select Knowledgebase > Themes.Select Edit for your theme.Select Add New.Select Global from the Theme Target drop-down menu.Enter recaptcha in the File Name box and select CSS from the File Type drop-down menu.Select Create.Go back to the Themes page and select the Default Theme.Open the recaptcha.css file and copy its contents.Go back to the Themes page and select your custom theme. Paste the file in your new recaptcha.css file for your theme.Select Save.
  • Customize fields in forms

    When building a form, you can edit and customize any fields using the Field Settings panel. You can access this panel by selecting the field you want to customize.Who can access this feature?User typesAdmins can access these settings.In this articleForm settings overviewField settingsAdd snippets to formsAdd, edit, or remove list optionsAdd conditions for attributesForm settings overviewIf nothing in the form is currently selected, the right panel will show the form settings, which control high-level options that impact the overall functionality and appearance of the form.Select any component in the main builder preview, then review the right panel to access field settings for the selected field.Field settingsEvery field has the following options:Required lets you determine whether that field or question must be filled out. Customers will not be able to submit the form unless the field is filled out.Label is the text that prompts the customer to know what information should be entered in the field.Description provides insight on the type of information that should be entered. For example, on a Name field you could instruct the user to enter both their first and last name.Hint helps customers understand how to enter the information that is being asked for by providing hint text underneath the field box. For example, on a Phone Number field you could specify whether or not to use dashes.Placeholder is text that will be in the actual field box and provides context for the customer. This can help explain or describe the expected action or input. For example, for a drop-down field you could alert the user about selecting an option.Class Name is the CSS class name that will help you identify the field in your knowledge base theme for any additional styling or design needs.Options allows you to add, edit, or remove the options that your customers will see in a list.Note: If the Option list is tied to an attribute on an object, any changes to the data in the form will not update that attribute in the database.Add snippets to formsYou can use snippets in applicable fields to quickly insert content in your form. If your content is translated into other languages, the default language will be detected and the translated content will be displayed in your form. You can select a Snippet in an applicable field by selecting the {...} icon in the field setting and selecting the Snippet from the list.Add, edit, or remove list optionsFields may also have specific customizable settings that only apply to them. For example, when adding a drop-down menu to your form, you can add and edit the available menu options in the Options section of this panel.To customize list options:Selectfor the option you want to customize and select Edit.The Label field will become editable. Update the label as desired.Select the checkmark to save the new name.To add a new option to the list, enter the label into the box below the table, then select Add.Continue to add options as best suited for your form.As you make changes, the preview instantly updates the fields as you make your customizations.When you're satisfied with your customizations, remember to Save Changes.Add conditions for attributes You can use conditionals to allow for dynamic adjustments where certain form fields appear or disappear according to specific conditions. This allows users to only see relevant fields based on their previous selections. To add conditions for attributes:Select any component in the main builder preview, then review the right panel to access field settings for the selected field.Select Set conditions for this attribute under the Advanced section.The Only show this attribute if... field should then appear. Select an attribute that you would like to conditionally render based on its value.Continue to add conditions with the +Add Condition button as you wish to continue building out your form.When you're satisfied with your customizations, remember to Save Changes.
  • Knowledge base deflection in a form

    You can turn on knowledge base deflection for your forms so that users can see up to 3 recommended articles that can help answer their questions after they submit a support form. This can help encourage them to self serve and solve their own support request, which will allow your agents to dedicate time to more urgent matters.Who can access this feature?User typesContent administrators have access to the Forms page.In this article:Turn on form deflectionView a form submission in KustomerUpdate your theme filesTurn on form deflection Go to Settings> Knowledge Base > Forms.Select an existing form or select Add Form.Turn on the Deflection toggle in the Form Settings panel.Select Save Changes.View a form submission in KustomerOnce a form is submitted, it appears in Kustomer as a new conversation and all of the information that was entered in the form is shown in the message. Form submissions can be identified by the Form channel icon.You can reply to form submissions through an email. The email address that was entered with the form submission is automatically filled in when replying to the form.Update your theme filesIf you are using form deflection and have a custom theme for your knowledge base or are using an older theme that was created before deflection became available, you need to modify your form.css and article.jsx files before you can start deflecting form submissions.Note: If you are using the default theme, these updates are made automatically and you do not need to edit your files.Go to Settings> Knowledge Base > Themes.Select your custom theme.Select your custom form.css file and copy and paste the following block of code into it:/*  ============================== Modal ============================== */ /* The Modal (background) */ .form-modal { display: flex; position: fixed; /* Stay in place */ z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } .form-modal-container {     width: 100%; display: flex; align-items: center; justify-content: center; } .form-modal-box {     max-width: 600px; width: 80%; position: relative; } /* Modal Content */ .form-modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; overflow-y: scroll; max-height: 700px; } @media only screen and (max-width: 768px) { .form-modal-box {     max-height: 100%; max-width: 100%; width: 100%; } .form-modal-content {     height: 100%; max-height: 100%; width: 100%; -webkit-overflow-scrolling: touch; } } /* The Close Button */ .form-modal-close {     display: flex; justify-content: flex-end; } .form-modal-close:hover, .form-modal-close:focus { color: #000; cursor: pointer; } .form-modal-success-container {     display: flex; align-items: center; justify-content: center; flex-direction: column; } .form-modal-success-container-no-results {     margin: 50px auto; } .form-modal-success { text-align: center; font-size: 16px; } .form-modal-divider {     margin: 20px auto; background-color: #dbdadf; height: 1px; } .form-deflection-header {     font-size: 18px; font-weight: bold; } .form-deflection-description { font-size: 16px; margin: 15px auto; } .form-deflection-item {     border-radius: 3px; border: solid 1px #dbdadf; margin-bottom: 15px; } .form-deflection-item-article {     padding: 20px; } .form-deflection-item-article-name { font-size: 16px;     font-weight: bold; display: flex; align-items: baseline; } .form-deflection-item-article-body {     margin: 10px 0; font-size: 14px; } .form-deflection-item-article-actions {     display: flex; justify-content: space-between; align-items: center; } .form-deflection-item-article-read-more, .form-deflection-item-article-link { display: flex; align-items: center; font-size: 14px; color: #2e96cd; cursor: pointer; } .form-deflection-item-article-link {      margin-left: 5px; line-height: 16px; } .form-deflection-item-article-read-more i { line-height: 14px; } .form-deflection-item-article-read-text {     margin-left: 5px; } .form-deflection-item-article-cta { border-top: 1px solid #dbdadf; background-color: #f9fafc; padding: 20px; display: flex; justify-content: space-between; align-items: center; } .form-deflection-item-article-cta-text {     font-size: 16px; }Select your article.jsx file and copy and paste the following code below the this.handleCloseRequest = this.handleCloseRequest.bind(this); line.this.handleCloseFormHookRequest = this.handleCloseFormHookRequest.bind(this); this.handleCloseProductizedFormRequest = this.handleCloseProductizedFormRequest.bind(this);Make sure you add it between the { }.Copy and paste the following code into your article.jsx file.Note: If you are already using the handleCloserequest() function, replace it with this code.handleCloseProductizedFormRequest(articleVersionId, closeOnLoad) {          const { data, org } = this.props; const formId = _.get(data, 'deflection.formId'); const externalId = _.get(data, 'deflection.externalId'); const queryTerm = _.get(data, 'deflection.queryTerm');     const emailValue = _.get(data, 'deflection.emailValue');     const emailLabel = _.get(data, 'deflection.emailLabel'); const url = `https://${org.name}.api.kustomerapp.com/p/v1/kb/forms/${formId}/submissions`; const formData = { externalId, }; const deflectionData = { status: 'accepted', messageSubject: queryTerm, articleVersionId, }; const customerEmailData = {     value: emailValue, label: emailLabel, attributeType: 'customer', attributeProperty: 'emails' }; formData.deflectionTracking = JSON.stringify(deflectionData); formData.customerEmail = JSON.stringify(customerEmailData); return fetch(url, {     method: 'PUT', body: JSON.stringify(formData), headers: { "Content-type": "application/json" } }) .then(() => {     if (closeOnLoad) { this.setState({ closedRequest: true }); } }) .catch((err) => { console.error(err); }); } handleCloseFormHookRequest(articleVersionId, closeOnLoad) {     const { data, org } = this.props; const externalId = _.get(data, 'deflection.externalId'); const conversationId = _.get(data, 'deflection.conversationId'); const signature = _.get(data, 'deflection.signature'); const source = _.get(data, 'deflection.source'); const orgId = _.get(org, 'settings.org'); let url = ''; const patchData = {}; if (externalId) { url = `https://${org.name}.api.kustomerapp.com/v1/hooks/form/deflection/${orgId}/${externalId}/${articleVersionId}`;     patchData.status = 'accepted'; } else if (conversationId) { if (closeOnLoad) { url = `https://${org.name}.api.kustomerapp.com/p/v1/kb/conversations/${conversationId}/deflection`;     patchData.status = 'accepted'; } else { url = `https://${org.name}.api.kustomerapp.com/p/v1/kb/conversations/${conversationId}/visit`; } } if (conversationId && source === 'email') { patchData.org = orgId; patchData.articleVersionId = articleVersionId; patchData.signature = signature; } return fetch(url, {     method: 'PATCH', body: JSON.stringify(patchData), headers: { "Content-type": "application/json" }     }) .then(() => {     if (closeOnLoad) { this.setState({ closedRequest: true }); } }) .catch((err) => { console.error(err); }); } handleCloseRequest(articleVersionId, closeOnLoad) { const { data } = this.props; const formHookEnabled = _.get(data, 'deflection.formHookEnabled'); if (formHookEnabled && formHookEnabled === 'false') {     return this.handleCloseProductizedFormRequest(articleVersionId, closeOnLoad); } return this.handleCloseFormHookRequest(articleVersionId, closeOnLoad);       }Select Save.Now, when a customer uses your form to submit a support request, they will get a list of suggested articles once they submit the form. Notes: Articles must be assigned to a category in order for them to be presented as a suggested article.Articles are suggested based on what your customer input in the Subject line of the form.The customer can select any of the suggestions to view the article in its entirety. If it resolves their request, the conversation that was created by the form in Kustomer will automatically close once they select Yes, close my request.
  • Form settings

    You can edit your form settings when creating or editing a form. For more information, see this article to learn how to Build feedback and support request forms. Who can access this feature?User typesContent administrators can access the the Forms page.To access the Form Settings panel:Go to Settingsand select Knowledge Base > Forms.Select Add Form or the form you want to edit.The following options are available:Brand is the knowledge base the form will reside in. This field cannot be edited.Title is the header on the form.Success Message is the message a customer will see when the form is submitted and all of the information is filled out correctly.Error Message is the message a customer will see when they attempt to submit the form but required field information is either missing, or was input incorrectly.Submit Button Text is the text that is displayed on the button a customer will use to submit the form.Loading Text is the text that is displayed while the form loads. Deflection lets you turn on knowledge base deflection for the form. For more information, see Knowledge Base Deflection in Forms.Recaptcha lets you turn on a recaptcha feature on your form to prevent spam. For more information, see Enabling Recaptcha in Forms.Form Hook URL is the webhook that is associated with the workflow that ingests data from this form. This is an advanced setting that lets you create your own workflow for your form. Turning on this option will remove the default system-required form fields (email, subject, and preview).
  • Suggest articles in a form

    You can turn on a special component to your form that allows for knowledge base deflection as a customer fills out a form. Enabling this feature can help answer your customer's inquiry before they even submit the form, which will allow your agents to dedicate time to more urgent matters.Who can access this feature?User typesContent administrators can access the Forms page.To enable this feature:Go to Settings and select Knowledge Base > Forms.Select an existing form or select Add Form.Select Message from the Attributes drop-down menu and then drag and drop the Subject to the center space of the editor, if not there already.Select the Subject attribute and then turn on the Suggested Articles toggle in the Field Settings panel.Select Save Changes.Now, when a customer uses your form to submit a support request, they will get a list of suggested articles as they enter the subject for the form. They can select any of the suggestions to view the article in its entirety.
  • Dynamic form fields

    You can use dynamic form fields to build one form that can handle multiple different contact scenarios. For example, you can use dynamic form fields to only ask for a customer's phone number if they would rather receive a phone call to resolve their inquiry, or only show a text input field if they are writing in to inform you of an issue with their last visit to your store. With this option, you can show attributes that are dependent on another attribute being set, which helps declutter your form while preventing you from having to create different forms to collect different information. For more information, see Build feedback and support request forms.Who can access this feature?User typesContent administrators can build forms.In this example, we will make the Phone attribute visible only if a customer wants to receive a phone call.To create a dynamic field:Select the component that you want to use to control whether the attribute is visible or not. We are going to use the Radio Button component.Note: Only single select components such as, Dropdown, Checkbox, or Radio Button can be used to control an attribute's visibility. Text or date fields are not supported.Customize the component label and options as necessary.Next, add or select the attribute you want to to control and select the Set conditions for this attribute check box located in the Field Settings pane. We want to control the visibility of the Phone field.Enter the conditions that have to be met for this attribute to show on your form. In this example, we only want the Phone field to show if a user selects Yes for the radio button question. Using the drop-down menus, select the name of the radio button field Equals Yes.Tip: You can quickly see any conditions applied to an attribute by hovering over the icon.Select Save Changes. Now, the field will only show if the condition you defined is met.
  • Create an advanced form

    Forms offer an easy way for customers to get connected with your support team. Kustomer's standard forms provide an out-of-the-box contact form with minimal setup, but you can also created advanced forms for greater flexibility and customization.In this article, we'll explain how to convert an existing form into an advanced form, and share an example of one way to reference custom attributes in an advanced form.Who can access this feature?User typesAdmins can access these settings pages.In this articlePrerequisitesCreate a form hookCreate ingest workflowConvert to an advanced formReference custom attributesPrerequisitesBefore following the steps in this article, you should first be familiar with workflows, forms, and custom attributes.You will also need to have an existing basic form already set up that you wish to convert into an advanced form. Set this up in advance before proceeding with the steps in this guide.Create a form hookThe first step in this process will be to create a form hook. This form hook will take the data from a form submission and send it to an ingest workflow via a POST request.To create a form hook:Go to Settings > Platform > Inbound Webhooks.Select Add Inbound Webhook.Give the hook a name and description and set the type to form. As a best practice, we always recommend adding clear, descriptive titles to hooks so your admin team can remember what this hook does in the future.Select Create to save the hook.To find your new hook, select the Form Hooks tab in the Inbound Webhooks settings.Locate your new hook and go to Menu  to select Copy Hook Address.Save this hook address to a secure location to use later in this guide.Create ingest workflowNext, you will create the workflow that will be responsible for ingesting data through the POST request.Go to Settings > Platform > Workflows.Select Add Workflow, and choose Custom Workflow.Name the new workflow and add a description to help you remember what this workflow does in the future.Leave he Callable Workflow toggle off.Select Create. The workflow editor will open.Open the Workflow Options menu in the toolbar and select Edit Workflow JSON.A modal appears where you can edit the code for this workflow. Select and delete all the current JSON code.Copy the below code block, and paste it into the JSON text field in your Workflow Editor.Then, select Update to save the changes to the workflow and dismiss the JSON editor. { "description": "", "name": "form-ingest-v3", "steps": [ { "transitions": [ { "target": "4ulllrCjT", "condition": { "op": "contains", "values": [ "{{#each steps.1.attributes.data.lastDeflection.articles}}{{this.deflected}}{{/each}}", "true" ] }, "meta": { "name": "Deflected" } }, { "target": "RzUykx4XT", "condition": { "op": "eq", "values": [ "true", "true" ] }, "meta": { "name": "Not Deflected" } } ], "errorCases": [], "id": "dR1mpnOzE", "action": "kustomer.conversation.find-by-external-id", "params": { "externalId": "/#steps.1.attributes.data.externalId" }, "appVersion": "kustomer-^1.9.2" }, { "transitions": [ { "target": "ZncXLm_TD", "condition": { "op": "exists", "values": [ "/#steps.Hgvl_Nte4.id", "" ] }, "meta": { "name": "Customer Exists" } }, { "target": "_e8mq0ChF", "condition": { "op": "dne", "values": [ "/#steps.Hgvl_Nte4.id" ] }, "meta": { "name": "Customer DNE" } } ], "errorCases": [], "id": "Hgvl_Nte4", "action": "kustomer.customer.find-by-email", "params": { "email": "/#steps.1.attributes.data.customerEmail" }, "appVersion": "kustomer-^1.9.2" }, { "transitions": [ { "target": "bsT1Rvdz8", "condition": { "op": "true", "values": [ true ] } } ], "errorCases": [], "id": "ZncXLm_TD" }, { "transitions": [ { "target": "Nvf94wHHl", "condition": { "op": "true", "values": [ true ] } } ], "errorCases": [], "id": "bsT1Rvdz8", "action": "kustomer.conversation.create", "params": { "customer": "/#steps.Hgvl_Nte4.id", "name": "New Form Submission" }, "appVersion": "kustomer-^1.9.2" }, { "transitions": [], "errorCases": [], "id": "4ulllrCjT", "action": "kustomer.conversation.update", "params": { "id": "/#steps.dR1mpnOzE.id", "status": "done", "ended": true, "endedReason": "user_ended", "lastDeflection": "/#steps.1.attributes.data.lastDeflection" }, "appVersion": "kustomer-^1.9.2" }, { "transitions": [], "errorCases": [], "id": "RzUykx4XT", "action": "kustomer.conversation.update", "params": { "id": "/#steps.dR1mpnOzE.id", "lastDeflection": "/#steps.1.attributes.data.lastDeflection" }, "appVersion": "kustomer-^1.9.2" }, { "transitions": [ { "target": "OD1eZkCxj", "condition": { "op": "true", "values": [ true ] } } ], "errorCases": [], "id": "_e8mq0ChF", "action": "kustomer.customer.create", "params": { "email": "/#steps.1.attributes.data.customerEmail" }, "appVersion": "kustomer-^1.9.2" }, { "transitions": [ { "target": "tmx9JRFIX", "condition": { "op": "true", "values": [ true ] } } ], "errorCases": [], "id": "OD1eZkCxj", "action": "kustomer.conversation.create", "params": { "customer": "/#steps._e8mq0ChF.id", "name": "New Form Submission" }, "appVersion": "kustomer-^1.9.2" }, { "transitions": [], "errorCases": [], "id": "tmx9JRFIX", "action": "kustomer.message.create", "params": { "customer": "/#steps._e8mq0ChF.id", "app": "Form", "size": 0, "channel": "email", "conversation": "/#steps.OD1eZkCxj.id", "body": "/#steps.1.attributes.data.messagePreview", "subject": "/#steps.1.attributes.data.messageSubject", "meta": { "meta": { "to": "YOUR_EMAIL_HERE", "from": "{{steps.1.attributes.data.customerEmail}}" } } }, "appVersion": "kustomer-^1.9.2" }, { "transitions": [], "errorCases": [], "id": "Nvf94wHHl", "action": "kustomer.message.create", "params": { "customer": "/#steps.Hgvl_Nte4.id", "app": "Form", "size": 0, "channel": "email", "conversation": "/#steps.bsT1Rvdz8.id", "body": "/#steps.1.attributes.data.messagePreview", "subject": "/#steps.1.attributes.data.messageSubject", "meta": { "meta": { "to": "YOUR_EMAIL_HERE", "from": "{{steps.1.attributes.data.customerEmail}}" } } }, "appVersion": "kustomer-^1.9.2" } ], "trigger": { "transitions": [ { "target": "Hgvl_Nte4", "condition": { "op": "neq", "values": [ "/#steps.1.attributes.data.lastDeflection.status", "offered" ] }, "meta": { "name": "Form Submission Created" } }, { "target": "dR1mpnOzE", "condition": { "op": "eq", "values": [ "true", "true" ] }, "meta": { "name": "Update Deflection Status" } } ], "eventName": "kustomer.hooks.form.62e9385789f744eb6bb6772d.receive", "id": "1", "appVersion": "hooks-^1.0.0" } }Select Step 1 of the workflow. Use the drop-down menu under Trigger Event to select the form hook that you created earlier.Select Step 7 of the workflow. Scroll down to the Meta field under Optional fields, and replace YOUR_EMAIL_HERE with the reply email of your choice. Make sure to include the quotation marks around the email address. Do the same for Step 9.When you're finished, Save the workflow and use the toggle to turn it on.Now, the workflow will be able to ingest form data and create conversations on the customer’s timeline.Convert to an advanced formAfter the form hook and ingest workflow have been created, the next step will be to convert an existing form to an advanced form.Go to Settings > Knowledge Base > Forms, and edit the desired form.Scroll down to the bottom of the Form Settings section and under the Advanced section of the Form Settings, turn on Advanced Mode.Paste the form hook address in the field provided.Select Save Changes before exiting the settings.After completing these steps, new form submissions will be ingested through the workflow.Reference custom attributesAfter creating the ingest workflow, you can now work with custom attributes to update data based on your organization's needs.Here's an example of how you can use custom attributes in a form using a multi-level list custom attribute called Contact Reason.Create a multi-level list conversation attribute named Contact Reason.Navigate to your form and add the Contact Reason attribute to the form. Select Copy next to the workflow attribute name.Return to the ingest workflow and edit it. Beneath each Message Create step, select the plus icon + to create a new Action step with the following characteristics:Action App: KustomerAction Event: Conversation: UpdateId: use the drop-down menu to select the Conversation Create step on the corresponding condition branch and then the Id option, like so:Scroll down to the Contact Reason (tree) attribute, then select the <> icon and enter: /#steps.1.attributes.data.conversationContactReason.Save your workflow.Your workflow will now save the Contact Reason selected on the form to a custom attribute on the created conversation.Note: When referencing attributes, the format should be /#steps.1.attributes.data.workflowAttribute, where workflowAttribute should be replaced with what is shown in the form UI.
Powered by Kustomer