As the last part of creating a layout we will create the Estimates Form, we will add the functionality (Either saving the data in a custom database, sending the email to the end user & admin, share the data to CRM, etc) later on. Actually, we can use Sitecore Forms instead of custom coding but will take this concept once we are clearing and friendly with Sitecore dummy site.

1. Go to Main.cshtml, copy the entire Estimates area to the new View called “EstimatesForm”
   
2. Add below piece of code in the Main.cshtml in place of the HTML markup of Estimates form, we will add the GUID of the rendering later once we create it in sitecore.
   
3. Lets replace the hard coded values in the form for which we have already created dictionary items such as below:
   Your name => @Sitecore.Globalization.Translate.Text(“YourName”)
   Email => @Sitecore.Globalization.Translate.Text(“Email”)
   Product type => @Sitecore.Globalization.Translate.Text(“ProductType”)
   Product size => @Sitecore.Globalization.Translate.Text(“ProductSize”)
   City of departure => @Sitecore.Globalization.Translate.Text(“DepartureCity”)
   City of delivery => @Sitecore.Globalization.Translate.Text(“DeliveryCity”)
   Message => @Sitecore.Globalization.Translate.Text(“Message”)
   Send Estimate => @Sitecore.Globalization.Translate.Text(“SendEstimates”)
   
   After replacing the hard coded phrases, the markup will be like below:
   
4. Now we will fetch, the values of the drop downs and bind to it. There are in total 4 drop downs for which we need to fetch values from Sitecore namely:
   Product Type
   Product Size
   Departure City
   Delivery City
   
5. Use below code to fetch the 4 items from Sitecore:
   @using Sitecore
   @using Sitecore.Mvc
   @using Sitecore.Data
   @using Sitecore.Data.Items
   @using DummyWebsite@{
   Database currentDb = Sitecore.Context.Database; //Extract the current Db
   //Get the item /sitecore/content/Global/Delivery Cities
   Item deliveryCitiesItem = currentDb.GetItem(“{A1F800E0-F31B-48FC-9949-8D6347160386}”);
   //Get the item /sitecore/content/Global/Departure Cities
   Item departureCitiesItem = currentDb.GetItem(“{92ECED7A-AF56-4B9D-A4B0-2662A371AA44}”);
   //Get the item /sitecore/content/Global/Product Sizes
   Item productSizesItem = currentDb.GetItem(“{74DD9F93-C545-4081-832F-11099111CAC0}”);
   //Get the item /sitecore/content/Global/Product Types
   Item productTypesItem = currentDb.GetItem(“{9829A8F5-620B-4A9F-AFF4-78D3593E7B6E}”);
   }
   
6. Lets bind the values of these items in the drop down. Use below code to bind the value in Product Type drop down.
   <select class=”wide”>
   <option data-display=”@Sitecore.Globalization.Translate.Text(“ProductType”)”>@Sitecore.Globalization.Translate.Text(“ProductType”)</option>
   @foreach (Item item in productTypesItem.GetChildren())
   {
   <option value=”@item.Fields[“Text”]”>@item.Fields[“Value”]</option>
   }
   </select>
   
7. Similarly we will code for other Dropdowns.
   
8. Login to Sitecore >> Content Editor.
9. Create a View rendering under Sitecore Demo (/sitecore/layout/Renderings/Sitecore Demo) and name it Estimates Form.
   
10. Publish the rendering and note down the GUID of this rendering.
11. Paste the GUID of the rendering in the Main.cshtml file.
    
12. Publish the visual studio solution and browse the front end (http://sitecoredemo.dev.local/)
    
13. We are almost done with the Layout but the only part left is the Summary or Description on the Estimations form.
14. So lets create one dictionary item for the title (“Get free Estimate”)
    
15. Add the below piece of code to fetch it in the EstimatesForm.cshtml
    
16. Now we have a Summary template created under Common (/sitecore/templates/Sitecore Demo/Common/Summary) which we will use and copy the html mark up (p and anchor tag) in the Rich text.
17. Go to Home node (/sitecore/content/Home) >> Insert >> Insert from Template and select the Summary template. Name the new item as Estimation form Summary.
    
18. Click on the Edit HTML and copy paste the below content & click Accept:
    <p>
    Esteem spirit temper too say adieus who direct esteem. It look estee luckily or picture
    placing.
    </p>
    <a href=”#” class=”boxed-btn3″>+10 672 457 356</a>
    
19. Publish the item and copy it’s GUID. so that we can fetch it in EstimationsForm.cshtml.
    //Get the Summary Item
    Item estimationSummaryItem = currentDb.GetItem(“{FCD9FCBC-7B6C-4425-86D7-6556F452EE8B}”);
    
20. Place the below piece of code in place of that p & anchor tag.
    @Html.Sitecore().Field(“Summary”, estimationSummaryItem)
    
21. Publish the EstimationsForm.cshtml and reload the Front end.

And with this we have completed building the layout which will be common for the all the pages in the site. From the next blog, we will build the components present on the Home page.

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