{"id":1612327,"date":"2020-05-13T14:24:00","date_gmt":"2020-05-13T14:24:00","guid":{"rendered":"https:\/\/toolset.com\/?post_type=course-lesson&p=1612327"},"modified":"2021-05-11T07:05:21","modified_gmt":"2021-05-11T07:05:21","slug":"styling-front-end-forms","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/fr\/course-lesson\/styling-front-end-forms\/","title":{"rendered":"Styling Front-End Forms"},"content":{"rendered":"\n

Design guidelines for front-end forms<\/strong><\/h2>\n\n\n\n

Your theme can affect the design of your form elements. For example, if in the Customizer you have a style set for the appearance of a button, then your form will use that style. <\/p>\n\n\n\n

To change the appearance of your form, you must use CSS. <\/p>\n\n\n\n

Follow these design tips to make your forms look professional.<\/p>\n\n\n\n

Style your form consistently<\/h3>\n\n\n\n

Keep your design consistent across your site. This means making sure that your form\u2019s buttons, shapes, colors, fields, styling, padding, and margins align with the rest of your site design. <\/p>\n\n\n\n

\n
\n

This color palette is blue and white, with orange as the accent color<\/strong><\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div><\/div>\n\n\n\n
\n

This form\u2019s color palette is white, blue and uses orange as an accent on the button<\/strong><\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n

Color coordinating your form<\/h3>\n\n\n\n

Your settings in the Customizer for your theme should automatically style your form color to match your website\u2019s color palette. <\/p>\n\n\n\n

If you add custom designs to your form, keep it simple by adding nice touches such as only incorporating your palette colors or only using your accent color for any icons, borders, or fields. Don\u2019t overdo this option because your design could quickly become messy. <\/p>\n\n\n

\n
\"\"<\/a>
A form on the front-end<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n

Improving text visibility<\/h3>\n\n\n\n

Use a background overlay if your form has an image set for the background. This is important because your text might not be visible enough, which does not look professional or trustworthy to clients. <\/p>\n\n\n\n

\n
\n

A form whose text is hard to read, and the picture takes over<\/strong><\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div><\/div>\n\n\n\n
\n

A form whose text is hard to read, and the picture takes over<\/strong><\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n

To create your background overlay, follow the process below:<\/p>\n\n\n\n

  1. In block navigation, select the Container<\/strong> block.<\/li>
  2. On the right sidebar, expand the Background <\/strong>panel.<\/li>
  3. Next to Overlay Color<\/strong>, click on the circle to begin adjusting the color you want.<\/li><\/ol>\n\n\n\n

    Toolset makes it very easy to make simple adjustments like this, so you don\u2019t need to know how to code.<\/p>\n\n\n

    \n
    \"\"<\/a>
    Toolset Container block with a grey overlay color<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n

    Controlling the width of your form<\/h3>\n\n\n\n

    If the width of your form does not fit the way you want it to on your screen, use a Container<\/strong> block to control it. Select the Container <\/strong>block from block navigation and expand the Inner Content<\/strong> panel on the right sidebar. <\/p>\n\n\n

    \n
    \"\"<\/a>
    Controlling the width of the form by setting a Max-Width<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n

    In the example below, setting the Max-Width<\/strong> of the Container<\/strong> to 800<\/strong> px <\/strong>prevents the form from being too wide.<\/p>\n\n\n\n

    \n
    \n

    The form in this example very wide<\/strong><\/p>\n\n\n

    \n
    \"\"<\/a><\/figure>\n<\/div><\/div>\n\n\n\n
    \n

    The form in this example is compact<\/strong><\/p>\n\n\n

    \n
    \"\"<\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n

    How to style front-end forms<\/strong><\/h2>\n\n\n\n

    You can style forms by adding CSS to them.<\/p>\n\n\n\n

    There are two ways to do this:<\/p>\n\n\n\n