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 Master Addons option panel.
Before digging into the guideline, don’t you think you should check out some contact Form 7 Demo. 🙂
[N:B: You can customize all other form element like Ninja Form, WP Form, We Form in the same method. So just follow the same steps and you are done with it.]
There are mainly two types of Contact Form 7 in our demos. One is With Placeholder and another is without Placeholder. I am going two share code for the form which you can copy and paste for your WordPress website.
You may be noticed that we have a contact form 7 style where you can see an icon inside the Submit button. You can do it easily on your website too. Just check out How to Apply Font Awesome Icons inside Contact Form Submit button post. You will get the code for the form too.
With Placeholder
[text* your-name placeholder "Name"]
[email* your-email placeholder "Email"]
[text your-subject placeholder "Subject"]
[textarea your-message placeholder "Message"]
[submit "Submit"]
Without Placeholder
<label> Name*</label>
[text* your-name]
<label> Email* </label>
[email* your-email]
<label> Subject </label>
[text your-subject]
<label> Message* </label>
[textarea your-message]
[submit "Submit"]
Just drag and drop the contact form 7 element in your page. Then select the contact form which you want to style. There is another option named “Error Style”. From this option you able to show/hide Error message and Validation Error.
Now navigate to the Style tab. You will see a total of 6 options here which will help you to customize your form. I am going to explain each option and their uses one by one.
1. Design Layout: We have built-in 11 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.
2. 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.
3. 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.
4. Labels: Labels stand for your input & Textarea field name. Select your labels color and set custom typography.
5. 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.
6. 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.
That’s all about contact Form 7 style customization without using CSS code.
