CODEWITHSUNDEEP
wordpresspluginscontact-formcontact-form-7
Emil Avramov
Emil Avramov

Reputation: 921

How to use Contact Form 7 with a custom HTML and CSS in Wordpress?

I am pretty new to the WordPress community and if it was up to me, I would've never stepped into it (I'm just not into CMSs). It's just a situation I'm currently dealing with for about a week now, so please assume that I have no knowledge on the subject.

So, I am converting an HTML template into a WordPress theme and a time has come to pay attention to the contact form. It appears on the bottom of (almost) all pages (but is not in the footer section). The designer made it very well-structured and appropriate for the purpose and, due to my former experience, I was thinking of using a plugin for the job, instead of trying to program the contact form myself. But, I did a research and found out that it is a common problem most people face, that the design of the generated form is too rigid to be styled appropriately. As far as I read, the easiest plugin to work with design-wise is Contact Form 7, because it generates merely a barebone of a form. I've also found this tutorial that explains the process. However, if I follow the instructions mentioned in it, I am still left with a barebone "classless" form. Keep in mind, that I have added the classes using the Contact Form 7 syntax in the WordPress backend, where one must create/edit forms, but they (the classes) are not present. I tried to place raw HTML in the plugin's wp backend editor, but I get the same result.

How you achieve a custom HTML and CSS design in Contact Form 7, or any other Contact Form plugin you use, I'm not stuck with Contact Form 7?

Any help on Contact Form 7 is greatly appreciated as well as any other ideas on how to approach the general "Custom design contact forms in WordPress" issue!

Upvotes: 1

Views: 2760

Answers (1)

Akshay Prabhakar
Akshay Prabhakar

Reputation: 479

You can use custom div and classes to design the Contact form 7. Here is the example code : 

<div class="row">
    <div class="col-md-6 form-group">[text* your-name class:form-control placeholder "Name"]</div>
    <div class="col-md-6 form-group">[email* your-email class:form-control placeholder "Email"]</div>
</div>

Hint* : You have to use default shortcodes generated by contact form 7 and cover that with your custom div's.

I hope it helps..

Upvotes: 1

Related Questions