In this blog, we will create a Contact page, using the layout we have created for the site and the additional components which are required. the Basic focus will be the on the Contact Form that we will create using Sitecore Forms.

To check the HTML and look and field of the contact page, refer contact.html from the extracted folder of Logistico.zip file. It will look like below:

Going through the Contact page in the above screen, we have 3 components other then layout (Banner, Map and Contact form with some details).

Lets avoid the Map in this blog.

1. Go to Sitecore >> Templates >> Sitecore Demo >> Pages.
2. Create a new Template and name it as “Contact Page”. Assign it an icon.
   
3. Click on Builder options and add Standard Values.
4. Standard Values >> Presentation tab >> Details >> Edit.
5. Select the Layout.
   
6. Click OK >> OK.
7. Go to Home item (/sitecore/content/Home). Right Click >> Insert >> Insert from template.
8. Select the Contact page template and Name the item as Contact.
   
9. Publish Site in Incremental mode. Browse the Contact page on Front end site (http://sitecoredemo.dev.local/en/Contact).
   
10. Go to Banners folder under Global and create a Contact Banner.
    
11. Go to the Contact item(/sitecore/content/Home/Contact) >> Presentation tab >> Details >> Edit >> Controls >> Add.
12. Select the Inner Banner rendering and use main as placeholder key. Check the check box to open the Control’s properties.
    
13. Click Select.
14. In the data source field, browse the Contact banner which we created recently.
    
15. Click OK >> OK >> OK.
16. Publish Site in the incremental publish mode.
17. Browse the Contact page on the Front end.
    
18. This completes our Banner component, as we are not creating Map in this blog. We are left with only one component that is Contact form with Details.
19. Go to Visual Studio >> Create a View and name it as ContactFormSection.cshtml.
20. Copy the HTML markup for Contact form (Get in Touch) from contact.html to the new View.
    
21. Remove the Form tag and keep it in Notepad++ for your reference.
22. Add the placeholder in place of form tag.
    @Html.Sitecore().Placeholder(“contact-form”)
    
23. Save the changes. Publish the View from the Visual Studio.
24. Go to the Rendering item in Sitecore (/sitecore/layout/Renderings/Sitecore Demo).
25. Create new View rendering and name it as Contact Form Section.
    
26. Lets add this rendering to the Contact page.
27. Go to the Contact item (/sitecore/content/Home/Contact) >> Presentation tab >> Details >> Edit >> Controls >> Add.
28. Add the Contact form Section rendering and use main as the placeholder key.
    
29. Click Select >> OK >> OK.
30. Publish the Site using incremental publish and browse the Contact page from Front end.
    
31. Go to Launch pad. Click on Forms.
    
32. Click on Create to create a new form. Select the black form.
    
33. You will get the Canvas on Left and set of tools on Right side.
    
34. Now refer the html of the form we have kept in Notepad++.
    
35. In the form tag, we need class as “form-contact contact_form”.
36. In Sitecore, click on Settings tab, and add the Class. Click Apply.
    
37. Click on Design tab, and drag a Section in the Canvas (a Section means a html div).
    
38. Click on the dragged control, from the HTML structure, we need “row” as the class of the div. Click Apply.
    
39. Now we need to add 4 divs under the one we have created. That means we will add 4 sections. After adding 4 sections under the one, the canvas will look similar to the below one.
    
40. Now referring to the html, first and last div needs css class as “col-12” and the middle ones need class as “col-sm-6”.
    
41. So lets click on each section and add it’s class and Click Apply.
    
42. Again referring to the Html structure all the 4 divs has 1 div inside it with the class “form-group”. Lets add the new section under all 4 and apply the class to it.
    
43. Now in the first sets of Div, we need text area, so we will add “Multiple-line Text” from the sets of tools.
    
44. Now, click on the control, and in the right bar we will see the properties related to it. Now we dont need Label for this control and want “Message” as a placeholder.
    
45. From the html, we need “form-control w-100” as class for this control.
    
46. Click Apply.
47. Similarly, we will add the next control in the middle Section for Name i.e. Single-line text control.
    
48. Click on the control, Clear the Label, give Name as Field Name and Placeholder. And the field Mandatory.
    
49. Add the css class as “form-control valid” and click Apply.
50. Similarly, Add the Email control, remove Label, add Field name and Placeholde text as “Email”, add the Css class, mark the field as Mandatory and click Apply.
    
51. Similarly, Add the Single-line text control for Subject field, remove the value from Label, Add Subject in Field Name and Placeholder Text, make it Mandatory and add the CSS class. Click Apply.
    
52. We are done with the main structure, we need create a structure for the Send button.
53. Add a Section, below the one we added first. Give the Css class (form-group mt-3) to it.
    
54. Click Apply.
55. Add Submit Button in the new section.
    
56. Click on the button.
57. Update the text of the button to “Send”, add the CSS class (button button-contactForm boxed-btn).
    
58. Scroll down, to set the Submit actions.
    
59. Click on the + sign, and select Save data.
60. Again click on + sign and select Redirect to the page.
    
61. Click OK.
62. Click Apply.
    
63. Click on Save.
    
64. Give the name of the Form (Contact Form) and click Save.
    
65. Go to the Content Editor.
66. Navigate to the Contact item. >> Presentation tab >> Details >> Edit >> Controls >> Add.
67. Select the Mvc Form rendering (/sitecore/layout/Renderings/System/Forms/Mvc Form) and use “contact-form” as a placeholder key because we have set it the placeholder in the ContactFormSection.cshtml. Also check the checkbox to open properties immediately.
    
68. Select the contact form as a data source.
    
69. Click OK >> OK >> OK.
70. Publish the Site using incremental publish.
71. Browse the Contact page on the Front end site.
    

So with the above steps, we achieved the Contact Form without any piece of code. Lets learn where and how can I get the data submitted by user. Try to submit 3-4 entries using this contact form.

1. Go to the Launchpad.
2. Click on the Forms.
3. Check the check box of the Contact form, and click on the down arrow at the top.
   
4. Select the Date range option if you are looking for specific date range else download the complete list by click OK.
   
5. One CSV file will be downloaded.
6. To open it in a readable format.
7. Open excel, go to Data tab and click on “From Text”.
   
8. Browse & select the CSV file which we have downloaded from Sitecore.
9. Selected the Delimited radio button and click Next.
   
10. Check the checkbox for Semicolon and uncheck the tab one.
    
11. Click Next >> Finish >> OK.
12. And you can see the User data for the Contact Form.
    

This completes the steps for creating the Sitecore forms and exporting the data of it. Try the above steps to create your form and let me know in case you face any issues while following these steps.

Thank you.. Keep Learning.. Keep Sitecoring.. 🙂