SimpleForms 1.0.1

Simple Forms

This is a simple package designed for Umbraco V10+ that allows form submission management in the Umbraco backoffice.

Install Package to your project

    PM> Install-Package SimpleForms

How to use

• Add the Simple Forms NuGet package to your Umbraco project
• Login to Umbraco backoffice
• Allow user to see new section "Simple Forms"
• Define the structure and fields of your form using the provided form object model.
• Build the user interface for your form using your preferred frontend framework.
• Implement a controller to handle form submissions.
• Submit the form.
• Submitted data will be displayed in the "Simple Forms" section of the Umbraco backoffice.

Create form to be shown in backoffice

System fields:

• _IP
• _StatusId
• _CreatedAt
• _UpdatedAt

    public class Form1 : IBackofficeFormBase
 {
     public Guid Id { get; set; } = Guid.Parse("424356c0-5259-4c73-85fd-4bccfbcd4b7f");
     public string Name { get; set; } = "Form 1";
     public List<Header> Headers { get; set; } = new List<Header>(){
         new Header{
             Name = "MyIp",
             Value = "_IP"
         },
         new Header{
             Name = "UserStatus",
             Value = "_StatusId"
         },
         new Header{
             Name = "Create Date",
             Value = "_CreatedAt",
             Format = "date:\"y-M-d\"",
         },
         new Header{
             Name = "Update Date",
             Value = "_UpdatedAt",
             Format = "date: \"y-M-d\"",
         },
         new Header{
             Name = "UserName",
             Value = "Name"
         },
         new Header{
             Name = "UserEmail",
             Value = "Email"
         },
     };
     public IEnumerable<FormActionDefinition> Actions { get; set; }
 }

Create form to be submited from website

public class ContactFormViewModel : FormViewModel
{
    [Required]
    public string Name { get; set; }

    [EmailAddress]
    public string Email { get; set; }

    [Required]
    public string Phone { get; set; }

    [Required]
    public string Message { get; set; }
}

Option 1: Simple way

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContactFormViewModel>


@if (TempData["SimpleFormSuccess"] != null && (bool)TempData["SimpleFormSuccess"])
    {
    <p>Your message was sent successfully</p>
}
else
{
    @using (Html.BeginUmbracoForm<SimpleForms.Web.Controllers.SimpleFormBaseController>(nameof(SimpleForms.Web.Controllers.SimpleFormBaseController.Submit)))
    {
        <input asp-for="FormId" type="hidden" value="C90C545B-2640-45E2-B57E-1CAD668CB4FB" />
        <input type="hidden" name="captcha" id="captchaInput" value="" />
        <div class="form-row contact_us_form">
            <div class="form-group col-lg-12">
                <label asp-for="Name" class="sr-only"></label>
                <input asp-for="Name" class="form-control" placeholder="Your Name" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group col-lg-12">
                <label asp-for="Phone" class="sr-only"></label>
                <input asp-for="Phone" class="form-control" placeholder="Your Phone" />
                <span asp-validation-for="Phone" class="text-danger"></span>
            </div>
            <div class="form-group col-lg-12">
                <label asp-for="Email" class="sr-only"></label>
                <input asp-for="Email" class="form-control" placeholder="Your Email" />
                <span asp-validation-for="Email" class="text-danger"></span>
            </div>
            <div class="form-group col-lg-12">
                <label asp-for="Message" class="sr-only"></label>
                <textarea asp-for="Message" class="form-control" rows="1" placeholder="Message"></textarea>
                <span asp-validation-for="Message" class="text-danger"></span>

            </div>
            <div class="form-group col-lg-12">
                <button type="submit" value="submit" class="btn submit_btn">submit now</button>
            </div>
        </div>
    }

Option 2: Custom controller with custom logic

public class ContactFormController : SimpleFormController<ContactFormViewModel>
{
    public ContactFormController(IUmbracoContextAccessor umbracoContextAccessor,
                                 IUmbracoDatabaseFactory databaseFactory,
                                 ServiceContext services,
                                 AppCaches appCaches,
                                 IProfilingLogger profilingLogger,
                                 ISimpleFormEntryService simpleFormEntryService,
                                 ISimpleFormStatusService simpleFormStatusService,
                                 ISimpleFormService simpleFormService,
                                 IHttpContextAccessor httpContextAccessor,
                                 ILogger<SimpleFormController<ContactFormViewModel>> logger,
                                 IPublishedUrlProvider publishedUrlProvider,
                                 IServiceProvider serviceProvider) : base(umbracoContextAccessor, databaseFactory, services, appCaches, profilingLogger, simpleFormEntryService, simpleFormStatusService, simpleFormService, httpContextAccessor, logger, publishedUrlProvider, serviceProvider)
    {
    }
    public override IActionResult Submit(ContactFormViewModel model)
    {
        //save result in database
        base.Submit(model);

        //custom logic

        return RedirectToCurrentUmbracoUrl();
    }
}

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContactFormViewModel>
@{
}

@if (TempData["SimpleFormSuccess"] != null && (bool)TempData["SimpleFormSuccess"])
    {
    <p>Your message was sent successfully</p>
}
else
{
    @using (Html.BeginUmbracoForm<ContactFormController>(nameof(ContactFormController.Submit)))
    {
        <input asp-for="FormId" type="hidden" value="C90C545B-2640-45E2-B57E-1CAD668CB4FB" />
        <div class="form-row contact_us_form">
            <div class="form-group col-lg-12">
                <label asp-for="Name" class="sr-only"></label>
                <input asp-for="Name" class="form-control" placeholder="Your Name" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group col-lg-12">
                <label asp-for="Phone" class="sr-only"></label>
                <input asp-for="Phone" class="form-control" placeholder="Your Phone" />
                <span asp-validation-for="Phone" class="text-danger"></span>
            </div>
            <div class="form-group col-lg-12">
                <label asp-for="Email" class="sr-only"></label>
                <input asp-for="Email" class="form-control" placeholder="Your Email" />
                <span asp-validation-for="Email" class="text-danger"></span>
            </div>
            <div class="form-group col-lg-12">
                <label asp-for="Message" class="sr-only"></label>
                <textarea asp-for="Message" class="form-control" rows="1" placeholder="Message"></textarea>
                <span asp-validation-for="Message" class="text-danger"></span>

            </div>
            <div class="form-group col-lg-12">
                <button type="submit" value="submit" class="btn submit_btn">submit now</button>
            </div>
        </div>
    }
}

Backoffices Examples

Entries

Details

Statuses