Contact Form 7 Layout

TheMoneyRetreat · July 2015

Hello,

Can you please tell me the code to use to design my contact form like this...

First Name Box Email Box

Subject Box

Message Box

I am assuming I need to add some column one-half code, but I'm not 100 % sure how.

TheMoneyRetreat · July 2015

Can you please also tell me how to get the text inside the box? And how to make sure the boxes are responsive on all devices.

Albert · July 2015

Hi,

you must wrap cf7 fields into column shortcodes. But we do not understand the rest of your questions because text inside boxes can be set under CF7 and if you don't know how to do this, please read CF7 documentation http://contactform7.com/

TheMoneyRetreat · July 2015

If you go to BeFinance contact us page, you will see an en example of what I am talking about about.

The contact form has

Two boxes (First name and e-mail)

One Box (Subject)

One Box (Message)

My question is, how do I create a form like that and customize the colors?

TheMoneyRetreat · July 2015

http://themes.muffingroup.com/be/finance/contact-us/

That is the link

Albert · July 2015

We already explained how to do this above. But if you still don't know what columns shortcodes are, you should create wordpress test installation, install CF7 plugin and import this demo to check how this was exactly done.

TheMoneyRetreat · July 2015

In this comment here

http://forum.muffingroup.com/betheme/discussion/comment/24066/#Comment_24066

You were able to provide coding. I went to the link you referenced an it does not provide coding. I will figure it out, I guess

Albert · July 2015

So if you saw this topic then we do not understand where the problem is. If in this topic, div got class one, it means content is full width. If you want to split on half, then you should have 2 div's with one-second class. But because you mix different elements, you should create test installation as we wrote above because this will be much easier and faster for you to get the answer on many questions. You can import any demo you want in a few seconds and right after that you see how things were made. We would like to learn you something, not just give ready code. Of course, we can give you the code which is:

<div class="column one-second">[text* your-name placeholder "Your name"] </div>
<div class="column one-second">[email* your-email placeholder "Your e-mail"] </div>
<div class="column one">[text your-subject placeholder "Subject"] </div>
<div class="column one">[textarea your-message placeholder "Message"]</div>
<div class="column one">[submit "SEND A MESSAGE"]</div>

but this is not a good way to learn.

TheMoneyRetreat · July 2015

You are right! Sorry for all the back and forth. I will take more time and be patient to figure it out based on the feedback you give.

Thank you for your kindness and patience

I apologize if I came off as rude.

Albert · July 2015

No problem

We understand of course.

Contact Form 7 Layout

Comments