Optimizely <<product-name>> provides a standard contact form used to capture feedback from users. The form includes standard fields such as first name and last name.

When the form is submitted by a user, the form data is sent to the email address specified in the Content Management System (CMS).

This walkthrough provides the steps required to extend the **Contact Us** page to add a new form field called "City". To accomplish this, you will need to complete the following tasks:

• Add a **CustomContactUsController** controller

• Add a route for the new controller

• Add a **CustomContactUsForm** widget and view to display the new field

• Add a custom theme to hold the new contact form

• Swap out the default contact form for the new contact form via the CMS

• Update the **ContactUsTemplate** email template to display the new "City" value submitted in the form

Before you begin, you will be adding custom files to the Web project. Pick out a location to add these customizations, such as a directory in the Web project called "Extensions".

## Add a CustomContactUsController

This controller only exists to handle the form submission for your new form and to include the new "City" value in the contact email. Follow the steps below to add the controller.

1. In the extensions location you picked, add a **CustomContactUsController** MVC controller and inherit from the <<product-name>> **BaseController**.

   Text

   

2. Copy the property and constructor declaration below. You will be using the **EmailService** and **UnitOfWork** later.

   Text

   

3. Next, add the action that will handle the form post. Notice the "city" parameter in the signature. You will write the **SendEmail** method next.

   Text

   

4. Copy the **SendEmail** method below. This method creates the data model for the email and actually sends the email. The **ContactUsTemplate** email template is provided by <<product-name>>. You will update the template later to display the new "City" value.

   Text

   

The controller is now complete and ready to handle the form post from your new contact form. However, we need to add a route so MVC knows to use this controller.

## Add a route for the CustomContactUsController

1. In Visual Studio, find the **Global.asax.csStartup.cs** file in the Web project. <<product-name>> provides a **RegisterCustomRoutes** method in the CustomSiteStartup class for registering custom routes not provided by default. Add the following code inside that method to register a route for your new controller.

   Text

   

Now you can add a custom widget and view to display the new "City" field.

## Add a CustomContactUsForm widget and view

The widget will provide a formatted validation message for the "City" field. The view will actually display the new form field and validation message.

1. In your extensions location, add a **CustomContactUsForm** class and inherit from the base **ContactUsForm** widget. This class will act like the view model for the view you will create later.

   Text

   

2. Add a property that will hold the formatted validation message.

   Text

   

Great! This widget class is complete and ready to be used. Now, you can create the view that will actually use it. However, before you do that, you should create a custom theme to hold the new contact form view.

## Add a custom theme

Adding a custom theme instead of modifying the provided Responsive theme is a best practice. This will ease future upgrades and still allow you to customize the look of <<product-name>>.

1. In Visual Studio, find the **Responsive** theme located under \~/Themes.

2. Copy the entire Responsive directory and rename it with your custom theme name.

That's it, you have a custom theme. You can rebuild the application to make sure nothing is broken. Now you can add the new contact form view to your custom theme.

## Add a CustomContactUsForm view

1. In Visual Studio, find your custom theme directory. Within that directory find the \~\\Views\\Widgets\\ContactUsForm directory. This holds the default contact form provided by <<product-name>>.

2. Copy that directory and rename it to "CustomContactUsForm". Now you can modify the default form to include your **CustomContactUsForm** widget and new "City" form field. To do this, you will make three notable changes to the view.

3. Inside the view file you copied, modify the `@model` declaration to use your new custom widget.

   Text

   

   Next, change the second argument to the `@Html.BeginForm` helper to the name of your custom controller.

   Text

   

   Finally, add a new form field below the "LastName" field for the "City" value.

   Text

   

Next, you need to swap out the default contact form for your new contact form using the CMS. This will make the form publicly available on the Storefront.

## Swap out the default contact form for the new contact form

Up until now, you have not visibly seen your form. After this step is complete, you will be able to see your new contact form on the Storefront.

1. Log into the **Admin Console** (/admin) for your site.

2. Go to the CMS for the website that will use the new contact form.

3. Go to the **Contact Us** page and switch the CMS to "Edit" mode.

4. Delete the default **ContactUsForm** widget on the page and add your new **CustomContactUsForm** widget.

The new contact form is not available yet on the Storefront. When you are ready, be sure to **Publish** the changes you made in the CMS. This will make the form publicly available.

To complete your customization, you should add the new form field to the e-mail that is sent as a result of submitting the form.

## Update the ContactUsTemplate email template

The **ContactUsTemplate** e-mail template is used to render the contact e-mail and display the form field data specified by the user. This e-mail is sent to the e-mail address you specified when you added your contact form in the CMS.

1. Before you update the template, go to your new contact form on the Storefront and submit the form. This will cause <<product-name>> to create the template automatically so you do not need to.

2. Log into the **Admin Console** for your site.

3. Go to **Marketing \> Communcation \> Email Templates**.

4. Find the **ContactUsTemplate** e-mail template and click the edit icon.

5. Create a new revision for the content and add a new table row to display the "City" value.

   Text

   

Before you consider this complete, go back to your new contact form on the Storefront and submit the form one more time. The e-mail you receive should now display the new "City" value you entered in the form.