{"id":7774,"date":"2023-12-12T05:19:02","date_gmt":"2023-12-12T05:19:02","guid":{"rendered":"https:\/\/www.greytrix.com\/blogs\/salesforce\/?p=7774"},"modified":"2024-06-06T10:00:12","modified_gmt":"2024-06-06T10:00:12","slug":"how-to-create-a-custom-button-on-formstack-for-the-salesforce-form","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/salesforce\/2023\/12\/12\/how-to-create-a-custom-button-on-formstack-for-the-salesforce-form\/","title":{"rendered":"How to create a custom button on Formstack for the Salesforce form"},"content":{"rendered":"\n<p>In this blog post will cover the process of creating a custom button on Formstack for Salesforce forms, through the incorporation of custom JavaScript code. Users can generate a unique button on the form, streamlining the submission of data into Salesforce.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em><strong>Note : <\/strong>Formstack package should be installed in your org.<\/em><\/p><\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><em><span style=\"text-decoration: underline;\">Step to create custom button on Formstack form:<\/span><\/em><\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Create Formstack form on Salesforce org, drag and drop the Salesforce object fields on the form.<\/li><\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/12\/1.-New-formstack-form..png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/12\/1.-New-formstack-form..png\" alt=\"New formstack form\"><\/a><\/center>\n<font size=\"2\"><center><i>New formstack form<\/i><\/center><\/font>\n\n\n\n<ul class=\"wp-block-list\"><li>To add JavaScript code find the \u2018form settings\u2019 and find \u2018JavaScript Code\u2019 option, bottom of the form settings.<\/li><\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/12\/2.-Form-Settings.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/12\/2.-Form-Settings.png\" alt=\"Form Settings\"><\/a><\/center>\n<font size=\"2\"><center><i>Form Settings<\/i><\/center><\/font>\n\n\n\n<ul class=\"wp-block-list\"><li>Next, add the following code to display the button on form.<\/li><\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/12\/3.-Javascript-Code.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/12\/3.-Javascript-Code.png\" alt=\"Javascript Code\"><\/a><\/center>\n<font size=\"2\"><center><i>Javascript Code<\/i><\/center><\/font>\n\n\n\n<ul class=\"wp-block-list\"><li>After adding the JavaScript code next step is to publish the form. To publish the form click on Publish Draft button.<\/li><\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/12\/4.-Publish-Draft.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/12\/4.-Publish-Draft.png\" alt=\"Publish Draft\"><\/a><\/center>\n<font size=\"2\"><center><i>Publish Draft<\/i><\/center><\/font>\n\n\n\n<ul class=\"wp-block-list\"><li>Next, click on the &#8216;Publish Options&#8217;.<\/li><\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/12\/5.-Publish-Options.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/12\/5.-Publish-Options.png\" alt=\"Publish Options\"><\/a><\/center>\n<font size=\"2\"><center><i>Publish Options<\/i><\/center><\/font>\n\n\n\n<ul class=\"wp-block-list\"><li>In \u2018Publishing options\u2019 select &#8216;Hosted form&#8217; tab and click on the form link.<\/li><\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/12\/6.-Hosted-Form-Link.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/12\/6.-Hosted-Form-Link.png\" alt=\"Hosted Form Link\"><\/a><\/center>\n<font size=\"2\"><center><i>Hosted Form Link<\/i><\/center><\/font>\n\n\n\n<ul class=\"wp-block-list\"><li>Lastly check the button is added to your form.<\/li><\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/12\/7.-Save-Button.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2023\/12\/7.-Save-Button.png\" alt=\"custom button on Formstack\"><\/a><\/center>\n<font size=\"2\"><center><i>Save Button<\/i><\/center><\/font>\n\n\n\n<p>By following the above blog instructions, you will be able to learn <strong>\u201c<em>How to create a custom button on Formstack for\u00a0Salesforce form\u201c<\/em><\/strong>. <\/p>\n\n\n\n<p>If you still have queries or any related problems, don\u2019t hesitate to contact us at <a href=\"mailto:salesforce@greytrix.com\" target=\"_blank\" rel=\"noreferrer noopener\">salesforce@greytrix.com<\/a>. More details about our integration product are available on <a href=\"https:\/\/www.greytrix.com\/salesforce\/salesforce-erp-integration-greytrix\/\" target=\"_blank\" rel=\"noreferrer noopener\" data-type=\"URL\">our website<\/a> and <a href=\"https:\/\/appexchange.salesforce.com\/listingDetail?listingId=a0N30000000psM5EAI\" target=\"_blank\" rel=\"noreferrer noopener\">Salesforce AppExchange<\/a>.<\/p>\n\n\n\n<p>We hope you may find this blog resourceful and helpful. However, if you still have concerns and need more help, please contact us at <a href=\"mailto:salesforce@greytrix.com\" target=\"_blank\" rel=\"noreferrer noopener\">salesforce@greytrix.com<\/a>.<\/p>\n\n\n\n<p><strong>Related Posts<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2023\/11\/27\/how-to-sync-salesforce-maps-advanced-route-calendar-to-microsoft-office-365\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Sync Salesforce Maps Advanced Route Calendar to Microsoft Office 365<\/a><\/li><li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2023\/08\/21\/how-to-create-territories-using-shape-layer-in-salesforce-map\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Create Territories Using Shape Layer in Salesforce Map<\/a><\/li><li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/09\/15\/how-to-restrict-the-system-administrator-to-edit-the-read-only-field-in-salesforce\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Restrict the System Administrator to \u201cEdit the Read-Only Field\u201d in Salesforce.<\/a><\/li><li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/02\/09\/how-to-fetch-current-record-id-from-lightning-web-components-lwc\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Fetch current Record Id from Lightning Web Components (LWC)<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In this blog post will cover the process of creating a custom button on Formstack for Salesforce forms, through the incorporation of custom JavaScript code. Users can generate a unique button on the form, streamlining the submission of data into Salesforce. Note : Formstack package should be installed in your org. Step to create custom\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2023\/12\/12\/how-to-create-a-custom-button-on-formstack-for-the-salesforce-form\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[1280,1279,601,1556,65,1555,561,831,1543,1547,1553,1554,1549,194,1548,833,1550,1546,1545,1544,1551,1552],"class_list":["post-7774","post","type-post","status-publish","format-standard","hentry","category-salesforce-srv","tag-action-buttons","tag-buttons","tag-create-custom-button","tag-createelement","tag-custom-button","tag-custom-javascript-for-formstack","tag-event-of-button","tag-execute-java-script","tag-form-settings","tag-formstack-for-salesforce","tag-formstack-native-cloud","tag-formstack-package","tag-hosted-form-link","tag-javascript","tag-javascript-code","tag-list-button","tag-native-cloud","tag-new-formstack-form","tag-publish-draft","tag-publish-options","tag-salesforce-with-formstack","tag-save-button"],"_links":{"self":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/7774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/comments?post=7774"}],"version-history":[{"count":4,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/7774\/revisions"}],"predecessor-version":[{"id":7804,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/7774\/revisions\/7804"}],"wp:attachment":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/media?parent=7774"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/categories?post=7774"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/tags?post=7774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}