Customize the Contact Us form page

13 min

Optimizely Configured Commerce 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 walk-through 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".

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.

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.

In the extensions location you picked, add a CustomContactUsController MVC controller and inherit from the Configured Commerce BaseController.

public class CustomContactUsController : BaseController{}

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

protected readonly IEmailService EmailService;public CustomContactUsController(IUnitOfWorkFactory unitOfWorkFactory, IEmailService emailService) : base(unitOfWorkFactory){    this.EmailService = emailService;}

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

[HttpPost]public ActionResult Submit(string firstName, string lastName, string city, string message, string topic, string emailAddress, string emailTo){    this.SendEmail(firstName, lastName, city, message, topic, emailAddress, emailTo);    return this.Json(new { Success = true });}

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 Configured Commerce. You will update the template later to display the new "City" value.

private void SendEmail(string firstName, string lastName, string city, string message, string topic, string emailAddress, string emailTo){    dynamic emailModel = new ExpandoObject();    emailModel.FirstName = firstName;    emailModel.LastName = lastName;    emailModel.City = city;    emailModel.Email = emailAddress;    emailModel.Topic = topic;    emailModel.Message = message;    var emailList = this.UnitOfWork.GetTypedRepository<IEmailListRepository>().GetOrCreateByName("ContactUsTemplate", "Contact Us");    this.EmailService.SendEmailList(emailList.Id, emailTo.Split(','), emailModel, "Contact Us Submission: " + topic, this.UnitOfWork);}

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

In Visual Studio, find the Startup.cs file in the Web project. Configured Commerce 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.

routeProvider.MapRoute(routes, null, "CustomContactUs/{action}", new { controller = "CustomContactUs", action = "Index" });

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

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

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.

public class CustomContactUsForm : ContactUsForm{}

Add a property that will hold the formatted validation message.

private string cityIsRequiredErrorMessage;public string CityIsRequiredErrorMessage => this.cityIsRequiredErrorMessage ?? (this.cityIsRequiredErrorMessage = MessageProvider.Current.GetMessage("ContactUsForm_CityIsRequiredErrorMessage", "City is required."));

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 Configured Commerce.

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

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

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 Configured Commerce.

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.

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

@model B2B Commerce.Web.Extensions.CustomContactUsForm

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

@using (Html.BeginForm("Submit", "CustomContactUs", ... ))

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

<div class="cf-form-city">    <label for="city@(Model.ContentKey)">@T("City") <span class="redTxt">*</span></label>    <input type="text" name="City" id="city@(Model.ContentKey)" data-val-required="@Model.CityIsRequiredErrorMessage" data-val="true"/>    <span data-valmsg-replace="true" data-valmsg-for="City"></span></div>

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 can see your new contact form on the Storefront.

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

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

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

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.

Update the ContactUsTemplate email template

The ContactUsTemplate email 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 email address you specified when you added your contact form in the CMS.

Before you update the template, go to your new contact form on the Storefront and submit the form. This will cause Configured Commerce to create the template automatically so you do not need to.

Now, log into the Admin Console for your site.

Go to Marketing > Communcation > Email Templates.

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

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

<tr>    <td class="email-label"><h4>Email</h4></td>    <td class="email-name">@Model.Email</td></tr>

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.