How to Use Sitecore Forms for creating a Contact Form

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:
417

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.
    418
  3. Click on Builder options and add Standard Values.
  4. Standard Values >> Presentation tab >> Details >> Edit.
  5. Select the Layout.
    419
  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.
    420
  9. Publish Site in Incremental mode. Browse the Contact page on Front end site (http://sitecoredemo.dev.local/en/Contact).
    421
  10. Go to Banners folder under Global and create a Contact Banner.
    422
  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.
    423
  13. Click Select.
  14. In the data source field, browse the Contact banner which we created recently.
    424
  15. Click OK >> OK >> OK.
  16. Publish Site in the incremental publish mode.
  17. Browse the Contact page on the Front end.
    425
  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.
    426
  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”)
    427
  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.
    428
  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.
    429
  29. Click Select >> OK >> OK.
  30. Publish the Site using incremental publish and browse the Contact page from Front end.
    430
  31. Go to Launch pad. Click on Forms.
    431
  32. Click on Create to create a new form. Select the black form.
    432
  33. You will get the Canvas on Left and set of tools on Right side.
    433
  34. Now refer the html of the form we have kept in Notepad++.
    434
  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.
    435
  37. Click on Design tab, and drag a Section in the Canvas (a Section means a html div).
    436
  38. Click on the dragged control, from the HTML structure, we need “row” as the class of the div. Click Apply.
    437
  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.
    438
  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”.
    439
  41. So lets click on each section and add it’s class and Click Apply.
    440
  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.
    441
  43. Now in the first sets of Div, we need text area, so we will add “Multiple-line Text” from the sets of tools.
    442
  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.
    443
  45. From the html, we need “form-control w-100” as class for this control.
    444
  46. Click Apply.
  47. Similarly, we will add the next control in the middle Section for Name i.e. Single-line text control.
    445
  48. Click on the control, Clear the Label, give Name as Field Name and Placeholder. And the field Mandatory.
    446
  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.
    447
  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.
    448
  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.
    449
  54. Click Apply.
  55. Add Submit Button in the new section.
    450
  56. Click on the button.
  57. Update the text of the button to “Send”, add the CSS class (button button-contactForm boxed-btn).
    451
  58. Scroll down, to set the Submit actions.
    452
  59. Click on the + sign, and select Save data.
  60. Again click on + sign and select Redirect to the page.
    453
  61. Click OK.
  62. Click Apply.
    454
  63. Click on Save.
    455
  64. Give the name of the Form (Contact Form) and click Save.
    456
  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.
    457
  68. Select the contact form as a data source.
    458
  69. Click OK >> OK >> OK.
  70. Publish the Site using incremental publish.
  71. Browse the Contact page on the Front end site.
    459

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.
    460
  4. Select the Date range option if you are looking for specific date range else download the complete list by click OK.
    461
  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”.
    462
  8. Browse & select the CSV file which we have downloaded from Sitecore.
  9. Selected the Delimited radio button and click Next.
    463
  10. Check the checkbox for Semicolon and uncheck the tab one.
    464
  11. Click Next >> Finish >> OK.
  12. And you can see the User data for the Contact Form.
    465

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.. 🙂

2 thoughts on “How to Use Sitecore Forms for creating a Contact Form

  1. Pingback: Creating Service Details and Listing page | Sitecore Dairies

  2. Pingback: Avoid Sitecore Form redirecting to forms builder page! | Sitecore Diaries

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s