Setting up a basic contact form with Sitecore JSS (not using Sitecore Forms)

Question

I'm building a JSS App and need to set up a basic contact form (sends an email). Since I'm using Sitecore 9.1, Sitecore Forms is unavailable in JSS.

How do I set up an endpoint in Sitecore to send an email?

For example, if I wanted an endpoint (mysite.com/contact/submit) to handle the POST of the HTML form. How and where do I set that up?

Any information on this will be very helpful, thank you!

Answer 1

It is feasible and you just need to expose the API. So, on your react component, you will have a button whereby you will bind it to a function.

In that particular function, you can use Axio to call your endpoint (contact/submit).

Then, it is pretty much straight forward. You need to implement the API and register it in Sitecore so that when the url mysite.com/contact/submit is called, it will go through your WebApi Controller and perform the action.

Below is a code snippet example used to call an API from ReactJS and its implementation. Note that I had removed unnecessary code for brevity.

The ReactJS Component

handleSubmit = () => {
    //get the parameters to be passed to the API. In my case

    axios({
        url: '/contact/submit',
        method: 'POST',
        data: yourData
    }).then(result => {

        if (!result.data){
            return;
        }

        const resultObject = JSON.parse(result.data.result);

        //Process your result here using the resultObject
    })
}

WebApi Implementation

public class FormSubmitApiController : ApiController
{
    [HttpPost]
    public IHttpActionResult SubmitAction(YourModelType model)
    {
        // Your implementation goes here

        return this.Ok();
    }
}

Route Registration

public class RouteRegistration
{
    public virtual void Process(PipelineArgs args)
    {
        GlobalConfiguration.Configure(WebApiConfig.Register);
    }
}

public class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        config.Routes.MapHttpRoute(
            name: "SubmitForm",
            routeTemplate: "contact/submit",
            defaults: new { controller = "FormSubmitApi", action = "SubmitAction" });
    }
}

Finally, you need to register the route to Sitecore by adding a configuration patch file.

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>    
    <pipelines>
      <initialize>
        <processor type="YourNamespace.RouteRegistration, YourAssemblyName" patch:after="processor[@type='Sitecore.PathAnalyzer.Services.Pipelines.Initialize.WebApiInitializer, Sitecore.PathAnalyzer.Services']" />
      </initialize>
    </pipelines>
    <api>
      <services>
        <configuration type="Sitecore.Services.Infrastructure.Configuration.ServicesConfiguration, Sitecore.Services.Infrastructure">
          <allowedControllers hint="list:AddController">
            <allowedController desc="FormSubmitApiController">YourNamespace.FormSubmitApi, YourAssemblyName</allowedController>
          </allowedControllers>
        </configuration>
      </services>
    </api>
  </sitecore>
</configuration>