Contact form style

element94 · August 2016

How do I style my contact form to look like on the Watch or Writer demos ?

Albert · August 2016

Hi,

you can change it's color under Theme options > Colors > Forms section. However, if you would like to know how some things were made, next time we recommend to create extra WP instance, import the demo that you are interested with and check how some things were done. It's the fastest and easiest way to learn how some things works.

element94 · August 2016

I'd like to have the same style. Not necessarily the same color.

Are you able to help with that ?

Albert · August 2016

What does it mean "the same style"? Same form we have on most of the demos so we do not understand what's so special in this one. Did you tried to do what we told you above? Because this is the fastest and easiest way to learn how some things were done.

element94 · August 2016

same style as in :

Name and email next to eachother.

Them subject, then Message field underneath and then Send a message button.

Right now i have them all one under eachother.

element94 · August 2016

I've made a new install here :

http://theslapcollective.com/test/contact/

As you can see the form is not the same as in the demo.

Albert · August 2016

Something must be wrong with your hosting if it does not import the same style as on our demo. So on those demos, we used the following code to create those forms:

<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 x8 placeholder "Message"]</div>
<div class="column one">[submit "Send a message"]</div>

element94 · August 2016

Where does the Contact Form shortcode comes into place ? I think i'm missing something,

element94 · August 2016

What i see imported in the Writer demo is the following :

<h3>Nullam wisi ultricies</h3>

<p>Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis.</p>

[divider height="40"]

[contact-form-7 id="2364" title="Contact Form"]

element94 · August 2016

Never mind.

I pasted into the right place now.

Thanks.

Albert · August 2016

Above code should be located under Forms section where all forms should be. For more details about Contact Form 7 plugin, please visit http://contactform7.com/docs/

Glad to know you found the right place.

Contact form style

Comments