how to create custom umbraco forms

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Manish 373 posts 932 karma points

Feb 10, 2017 @ 10:57

0

How to create custom Umbraco forms

Hi All,

I am using umbraco 7.5. I want to use umbraco form, I created a form using CMS but I want some changes in design. How can i add custom css classes to my form and one more thing how can i add validation to my field confirm-email which i created just below email field.

Thanks Manish

Copy Link
Alex Skrypnyk 6163 posts 24143 karma points MVP 8x admin c-trib

Feb 10, 2017 @ 11:16

1

Hi Manish

There are two ways to customize design of Umbraco forms

1. Disable default styles and add custom css Go to Umbraco froms settings and uncheck "Default styles checkbox". Default styles won't add to page and you will able to add any styles you want

2. Totally change markup and css Look this link - https://our.umbraco.org/documentation/products/umbracoforms/developer/custom-markup/ Go to forms partials and change markup

I hope it will help you. Share with us how did you decide to go with it. I personally prefer second way.

Thanks,

Oleksandr Skrypnyk

Copy Link
Manish 373 posts 932 karma points

Feb 10, 2017 @ 11:22

0

Many thanks Oleksandr Skrypnyk for replying fast:-

Basically I want three forms with different designs so how can i do this.

Basically I want to create three partial view for all three forms and want to save data for all three in CMS. Is there any way to achieve this?

Thanks Manish

Copy Link
Alex Skrypnyk 6163 posts 24143 karma points MVP 8x admin c-trib

Feb 10, 2017 @ 11:34
1
Hi Manish

I think the best way to do it is to make difference between forms in css, it's not easy to maintain different html for the same Umbraco Forms installation. The easier solution will be - use some 3 classes on a parent div of forms, and inherit all styles from this classes. Like that:
```
.form1 form{
...
}
.form2 form{
...
}
.form3 form{
...
}
```
Thanks, Oleksandr Skrypnyk
Copy Link
Manish 373 posts 932 karma points

Feb 10, 2017 @ 11:40
0
Super fast answer by Oleksandr Skrypnyk (clap)

Few more things 1. how can i add validation in CMS for email and confirm-email , two fields which i added in CMS.
1. Reset Button
2. Add some label for showing message
Many thanks Oleksandr Skrypnyk
Copy Link
Christoffer Frede 16 posts 126 karma points

Feb 10, 2017 @ 12:41

0

i would really like to be able to implement this! so far i am on board , disable the default stylesheet and make your own. The thing i dont get, is if i have myforms.css for example. Where do i configure/choose that for a specific form to use this excaxt stylesheet ?

Copy Link
Alex Skrypnyk 6163 posts 24143 karma points MVP 8x admin c-trib

Feb 10, 2017 @ 12:42
0
1. Email validation is out of the box in Umbraco Forms
2. Reset button - have to do manually
3. Labels are supported by Umbraco forms
You are welcome, Manish
Copy Link
Alex Skrypnyk 6163 posts 24143 karma points MVP 8x admin c-trib

Feb 15, 2017 @ 10:42

0

Hi Manish

I'm just curious, how did you decide to do your form? Share please.

Thanks,

Alex

Copy Link

Manish 373 posts 932 karma points

Feb 16, 2017 @ 05:52

Alex,

I am able to manage validation as

protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
        {
            Umbraco.Forms.Web.Controllers.UmbracoFormsController.FormValidate += FormRenderController_FormValidate;

        }

        void FormRenderController_FormValidate(object sender, Umbraco.Forms.Mvc.FormValidationEventArgs e)
        {
            if (e.Form.Name == "MemberShip Form")
            {
                var s = sender as Controller;
                if (s != null)
                {
                    var mainEmail = e.Form.AllFields.SingleOrDefault(f => f.Caption == "Main email address").Id.ToString();
                    var confirmMainEmail = e.Form.AllFields.SingleOrDefault(f => f.Caption == "Main email address (Confirm)").Id.ToString();
                    var email = e.Form.AllFields.SingleOrDefault(f => f.Caption == "email").Id.ToString();
                    var confirmEmail = e.Form.AllFields.SingleOrDefault(f => f.Caption == "email (Confirm)").Id.ToString();

                    var _mainEmail = e.Context.Request[mainEmail];
                    var _confirmMainEmail = e.Context.Request[confirmMainEmail];
                    var _email = e.Context.Request[email];
                    var _confirmEmail = e.Context.Request[confirmEmail];

                    if (_mainEmail != _confirmMainEmail)
                        s.ModelState.AddModelError(confirmEmail, "Confirm email must be same");

                    if (_email != _confirmEmail)
                        s.ModelState.AddModelError(confirmEmail, "Confirm email must be same");

                }
            }
        }

and manage design by custom css.

All is working fine except few things

Once form is submit I am displaying thank you message but if i refresh page form get submit again. How can i prevent this?

Thanks

Copy Link

is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?