Recently I was adding Sitecore Experience Forms (NOT WFFM) to some existing views I had. Sitecore provides a walk-through on how to set this up, however, when I set the page up as they noted when I clicked submit I was always sent to a URL like this:
http://<domain>/formbuilder?osa_did=C0020166&fxb.FormItemId=b41b7d6a-592c-415f-bb56-a9d7c803c148&fxb.HtmlPrefix=fxb.37b94ac0-596b-4b2d-999e-c9814ee8ff98
To try and resolve this I took a step back and approached this like I did not already have an existing view. So I created the base view like they call out in the walk-through. Then I created the layout view and set its base to the base I just created (the one that holds the references to the Sitecore script commands). When I did this the form worked! So I moved the same script commands to my existing view again, and the form stopped working and on click sent me to the "formbuilder". What!? I decided it was time to talk with Sitecore supported.
After talking it through with Sitecore support they provided this resolution.
With that, I updated my existing view to call the @Html.RenderFormStyles()and @Html.RenderFormScripts() at the bottom of my page and the form started working!
The next step was to get validation all setup and displaying correctly. This was actually pretty easy with a read of a blog from Smart Sitecore on responsive Sitecore 9 forms with bootstrap. Just make sure you update the javascript files as he noted.
I did not take his approach for a "Thank you" page as I believe it is easier to use the native ability of Sitecore multipage forms to do this. I just created a second page that had my thank you message on it. Then my submit button on the first page has an action of next and submit data.
With that validation was working and form data was being saved and showing a thank you page. However, I had a phone number field on my form that I wanted to validate. The default phone number validator is not very good as it only requires the phone to have 3 digits. So I updated the rule "/sitecore/system/Settings/Forms/Validations/Phone Number Validator" with the following.
{"regularExpression":"\\(?\\d{3}\\)?-? *\\d{3}-? *-?\\d{4}"}
It is important to keep in mind when updating this regular expression that they are passing a JSON object that contains a regular expression so you have to escape your regular expression for JSON.
http://<domain>/formbuilder?osa_did=C0020166&fxb.FormItemId=b41b7d6a-592c-415f-bb56-a9d7c803c148&fxb.HtmlPrefix=fxb.37b94ac0-596b-4b2d-999e-c9814ee8ff98
To try and resolve this I took a step back and approached this like I did not already have an existing view. So I created the base view like they call out in the walk-through. Then I created the layout view and set its base to the base I just created (the one that holds the references to the Sitecore script commands). When I did this the form worked! So I moved the same script commands to my existing view again, and the form stopped working and on click sent me to the "formbuilder". What!? I decided it was time to talk with Sitecore supported.
After talking it through with Sitecore support they provided this resolution.
Actually, scripts will not work if you add them to the “head” section of your main layout because they should be loaded after rendering the “Form.cshtml” view related to a form.
We discussed this behavior with the development team and they confirmed that the following note in the documentation is mistaken:
If you want to add a form to a page on an existing site, you must add references to the form stylesheets and JavaScript files. Add the reference @using Sitecore.ExperienceForms.Mvc.Html and in the head section add @Html.RenderFormStyles()and @Html.RenderFormScripts()
According to this, I registered the doc request to change this note.
The next step was to get validation all setup and displaying correctly. This was actually pretty easy with a read of a blog from Smart Sitecore on responsive Sitecore 9 forms with bootstrap. Just make sure you update the javascript files as he noted.I did not take his approach for a "Thank you" page as I believe it is easier to use the native ability of Sitecore multipage forms to do this. I just created a second page that had my thank you message on it. Then my submit button on the first page has an action of next and submit data.
With that validation was working and form data was being saved and showing a thank you page. However, I had a phone number field on my form that I wanted to validate. The default phone number validator is not very good as it only requires the phone to have 3 digits. So I updated the rule "/sitecore/system/Settings/Forms/Validations/Phone Number Validator" with the following.
{"regularExpression":"\\(?\\d{3}\\)?-? *\\d{3}-? *-?\\d{4}"}
It is important to keep in mind when updating this regular expression that they are passing a JSON object that contains a regular expression so you have to escape your regular expression for JSON.
Comments