• Not Answered

Standard styling for Sitecore 9.1 (update 1) Web Forms

We prefer to not have our users enter in styles for individual fields and forms so we have been looking into setting a default style for Sitecore 9 Web Forms. 

I was able to put in some styles for the input boxes but when I tried for the <form> tag, it affected other pages besides the Forms. 

/* The below caused issues  commenting out for n

form {
    background-color: #f9f9fa;
    border: 1px solid #0074c8;
    border-radius: 10px;
    padding: 5px;
}

form div {
    background-color: #f9f9fa;
    border: 1px solid #004a92;
    border-radius: 10px;
    padding: 5px;
    margin: 5px;
}
*/


input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input:valid, textarea:valid {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #0074c8;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #004a92;
}

I found a solution where I modify "\Views\FormBuilder\Form.cshtml to have a DIV tag, with a respective style in the CSS but prefer not to modify a file created by sitecore

.

.


@{
    using (Html.BeginRenderRouteForm(Model, IsPost))
    {
        <div class="my-form" >
        @Html.AntiForgeryToken()
        @Html.Hidden(AttributeNames.FormItemId, Model.ItemId)

.

.

CSS:

.my-form {
    background-color: #f9f9fa;
    border: 1px solid #0074c8;
    border-radius: 10px;
    padding: 5px;
}

.my-form div {
    background-color: #f9f9fa;
    border: 1px solid #004a92;
    border-radius: 10px;
    padding: 5px;
    margin: 5px;
}

 

Thanks and looking forward to other ideas or best practices.

 

1 Reply