Have you ever thought that is there any way to customize your Websites Contact Form 7 style without typing CSS code? In the past, it was possible for the HTML & CSS guru only. But time flies and we have developed a Contact Form 7 Addon for Elementor which allow you to customize your contact form 7. Select your desired contact form 7 style from our prebuilt style layout. I am going to show you how to edit contact form 7 style with Elysio Forms option panel.
For use preloaded design styles please update your Contact Form 7 markup to be like on the example below:
<label class="ewrap"><span class="elabel">Your name</span>[text* your-name]</label> <label class="ewrap"><span class="elabel">Your email</span>[email* your-email]</label> <label class="ewrap"><span class="elabel">Subject</span>[text* your-subject]</label> <label class="ewrap"><span class="elabel">Your message</span>[textarea your-message]</label> [submit "Submit"]
- Drag and drop widget Elysio Contact Form 7 to any place on your website using Elementor Live Page Builder.
- Choose form dropdown list or create a new one first.
- Choose defaut style that provided your theme OR Chose design style that you like. Don’t forget to use Elysio Form Markup for preloaded designs.
- Custom any style option for Form, input fields, button, labels, notifications and focus state.
- Design Layout: We have built-in 5 design variation. You are free to select any of them for your use. These are pre-built but if you want to customize your form yourself then you should use other six options.
- Form Container: You know what is a container, right? Simply container means that area where you placed an object. There are two types of background type one is classic (Select color or image), another is Gradient. Choose the form width and form padding from this option too.
- Input & Textarea: Style your any type of input field like Name, Email, Subject, and Message. You can pick a suitable background color and text color for the input area. If you need to use border then just select border type and width. There are 5 types of border style Solid, Double, Dotted, Dashed, and Grove. Also, you can define Border color, Radius, and field width too.
- Labels: Labels stand for your input & Textarea field name. Select your labels color and set custom typography.
- Submit Button: For button styling, there is a total of 5 style property – Background color, Text color, Border Color, Border Radius, and Padding. Select the normal appearance and hover appearance for the submit button from this options panel.
- Errors: Finally, it’s time to customize the errors. As I have told you that there are two types of error in contact form 7. Normal Error Messages and Validation Errors. For styling these two errors there is two separate option. Pick the error text and background color what you prefer. If you need border then just select which type of border you need from “Border Type” option.
- Focus state. Use preloaded focus styles and change color.