Tagged: forms

Forms / Sitecore

Sitecore 9 Forms: Custom Submit Action

One of most common scenario I came across in Sitecore 9 Form is to create your custom submit action. You can achieve this in three simple steps.

Step 1: Create submit action button in Sitecore

Create the custom action button under /sitecore/system/Settings/Forms/Submit Actions.

Step 2: Create code behind class

Create a class that inherits SubmitActionBase class and override the Execute method.

public class CustomSubmitAction : SubmitActionBase<string>
{
public CustomSubmitAction(ISubmitActionData submitActionData) : base(submitActionData)
{
}

public override void ExecuteAction(FormSubmitContext formSubmitContext, string parameters)
{
Assert.ArgumentNotNull((object)formSubmitContext, nameof(formSubmitContext));

if (this.TryParse(parameters, out string target))
{
try
{
if (this.Execute(target, formSubmitContext))
return;
}
catch (ArgumentNullException ex)
{
}
}
formSubmitContext.Errors.Add(new FormActionError()
{
ErrorMessage = this.SubmitActionData.ErrorMessage
});
}

protected override bool Execute(string data, FormSubmitContext formSubmitContext)
{
Assert.ArgumentNotNull(data, nameof(data));
Assert.ArgumentNotNull(formSubmitContext, nameof(formSubmitContext));

//Prepare model here
var model = new EmailModel()
{
Email = GetValue(formSubmitContext.Fields.FirstOrDefault(f => f.Name.Equals("EmailAddress")))
};

// Call any API service call

return true;
}

private static string GetValue(object field)
{
return field?.GetType().GetProperty("Value")?.GetValue(field, null)?.ToString() ?? string.Empty;
}

protected override bool TryParse(string value, out string target)
{
target = string.Empty;
return true;
}

Step 3: Set the custom submit action fields

Update the ModelType and Error Message on the button shown below.

Bind the custom submit action to Submit button like below.

Publish the button. The submit button on form should now trigger the custom save action! Any questions, let me know.

Happy sitecoring.

September 16, 2018
2
Sitecore

Sitecore 9 Forms: Success message


Sitecore 9 form feature is awesome and simple to work with. It is more like Visual Studio Toolbox and you can drag and drop the fields.

I had a requirement from Client asking for Ajax form and wanted to show Confirmation/Success message after the form is submitted. Out of the box, this is achievable with the Form.

Here is a small guide on how to create a form with confirmation message:

1. Select Forms from Dashboard.

2. Click Create button.
3. Select blank form.

4. Drag a page for main content.
5. Drag a another page for confirmation message.
6. Design the fields according to needs. Here I’m doing Email Signup form. You can add field validation and css-class as needed.

Please make sure you have these scripts in Layout.cshtml.

@Html.RenderFormStyles()
@Html.RenderFormScripts()

7. On the submit button, set the Navigation step to Next instead of submit. This does the trick to show the confirmation page.

7. Save the form.
8. Now you can see the form in Content Editor.

Don’t forget to publish the form and place it on a web page under MVC layout. Here is Sitecore documentation on Adding a form to webpage.

Happy Sitecoring.

August 30, 2018
0

Follow @madhumithaa