Umbraco.Community.SimpleForms 1.0.7

Simple Contact Form for Umbraco

A basic contact form project that can be added to any site without requiring any back end development at all.

Usage

You can add the package using the following command

dotnet add package Umbraco.Community.SimpleForms

Once the package is installed, you can use insert a form using one of three options

Adding a basic contact form

Add the following sippet into your page if you want to use standard contact form built into the package. This is distributed as a partial view, so you won't be able to edit it directly, but you can still style the form using CSS.

# Add this using statement to the top of your page
@using Umbraco.Community.SimpleForms.Models;


# Add this to the body of your page where you want to render the form    
<section class="section section">
    @{
        await Html.RenderPartialAsync("SimpleFormsContact", new SimpleContactFormViewModel());
    }
</section>

Adding a custom contact form

You can also create your own partial view to create a custom contact form layout, and using the SimpleContactFormViewModel to render the form. This is useful if you want to change the layout of the form.

Please Note : you won't be able to add additional fields to this form yet.

Create the custom Partial

Create a new partial view in the Views folder of your site. I called mine "CustomContactForm.cshtml". Add the following code to the partial view. You can customise this layout as you wish.

@using Umbraco.Community.SimpleForms.SurfaceControllers
@using Umbraco.Extensions
@model Umbraco.Community.SimpleForms.Models.SimpleContactFormViewModel

@using (Html.BeginUmbracoForm<SimpleFormsSurfaceController>(nameof(SimpleFormsSurfaceController.Submit)))
{
    <div>
        @Html.TextBoxFor(m => m.Name, new { @class = "form-control", placeholder = Html.DisplayNameFor(m => m.Name) })
        @Html.ValidationMessageFor(m => m.Name)
    </div>
    <div>
        @Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = Html.DisplayNameFor(m => m.Email) })
        @Html.ValidationMessageFor(m => m.Email)
    </div>
    <div>
        @Html.TextAreaFor(m => m.Message, new { @class = "form-control", placeholder = Html.DisplayNameFor(m => m.Message) })
        @Html.ValidationMessageFor(m => m.Message)
    </div>
    <input type="submit" name="Submit" value="Submit" />
}

Using the new Custom Form Partial

# Add this using statement to the top of your page
@using Umbraco.Community.SimpleForms.Models;


# Add this to the body of your page where you want to render the form    
<section class="section section">
    @{
        await Html.RenderPartialAsync("SimpleFormsContact", new SimpleContactFormViewModel());
    }
</section>

Using a Tag Helper

There is also a taghelper in development, which will allow you to render the form with a single line. This will be made available soon.

Stats