Docs

[nillamary]

My website is set to fullwidth so my Contact-7 form is also fullwidth. I’d like to:
1. Add info text to the left-side of the form
2. Reduce the form’s size

Also, Although I’ve set my background colour to black for the form (and my website), the only change is the heading’s background colour to black. Any ideas?

Thank you!

[Jade]

Hi there,

Please provide the link to your site so that we can check.

Thank you.

[nillamary]

This reply has been marked as private.

[Christopher]

Hi there,

Please edit your contact form :

<div class="x-column x-1-2 x-sm">Custom text</div>
<div class="x-column x-1-2 x-sm">Conatct form</div>

Please add following code in Customize -> Custom -> Global CSS :

.wpcf7 select, .wpcf7 textarea, .wpcf7 input[type="text"], .wpcf7 input[type="password"], .wpcf7 input[type="datetime"], .wpcf7 input[type="datetime-local"], .wpcf7 input[type="date"], .wpcf7 input[type="month"], .wpcf7 input[type="time"], .wpcf7 input[type="week"], .wpcf7 input[type="number"], .wpcf7 input[type="email"], .wpcf7 input[type="url"], .wpcf7 input[type="search"], .wpcf7 input[type="tel"], .wpcf7 input[type="color"] {
    width: 80%;
    background-color: #000;
    color: #fff;
}

.wpcf7 label {
    color: #000;
}

Hope it helps.

[nillamary]

Thanks Christopher!
Do I add the contact form code in Contact>Edit>Additional Settings, or?
The CSS code has changed the form colors but nothing else.

When i first loaded the Ethos 2 stack, Child theme, and Demo for the Stack my Global CSS was empty, is this correct? I’m watching this vid (https://www.youtube.com/watch?v=jGKii0wfmLY), which states that all the colours and coding should have come across for the Demo.

Can you please logon to my Admin and check if everything is set up correctly? Apart from the CSS code I’ve added in Global, I don’t have any of the demo CSS.

[Rue Nel]

Hello There,

Thanks for updating in! I would recommend that you use Cornerstone in creating your Contact page. With Cornerstone, you can easily create a row with columns and simply drag elements in the columns with no coding required. Please do check out my test contact page here: http://ecbiz209.inmotionhosting.com/~nillas5/x-contact-test/

If you still want to use the contact page and prefer the default WordPress editor, please edit your page and use this content instead:

<div class="x-container">
<div class="x-column x-1-2 x-sm">Add your custom text here</div>
<div class="x-column x-1-2 x-sm">[contact-form-7 id="56" title="Contact form 1"]</div>
</div>

<h3>Connect on social media</h3>
<img class="alignnone size-full wp-image-84" src="http://ecbiz209.inmotionhosting.com/~nillas5/wp-content/uploads/2016/12/Facebook25x25.png" alt="" width="25" height="25" /> <a href="https://www.facebook.com/NillasPhotography/">Nilla's Photography</a>
<img class="alignnone size-full wp-image-88" src="http://ecbiz209.inmotionhosting.com/~nillas5/wp-content/uploads/2016/12/Twitter25x25.png" alt="" width="25" height="25" /> <a href="https://twitter.com/NillasPhotos">@NillasPhotos</a>
<img class="alignnone size-full wp-image-85" src="http://ecbiz209.inmotionhosting.com/~nillas5/wp-content/uploads/2016/12/Linked25x25.png" alt="" width="25" height="25" /> <a href="http://www.linkedin.com/pub/nilla-palmer/18/612/864">Nilla Palmer</a>
<img class="alignnone size-full wp-image-86" src="http://ecbiz209.inmotionhosting.com/~nillas5/wp-content/uploads/2016/12/Pinterest25x25.png" alt="" width="25" height="25" />  <a href="http://www.pinterest.com/nillasphotos">nillasphotos</a>

<img class="alignnone size-full wp-image-87" src="http://ecbiz209.inmotionhosting.com/~nillas5/wp-content/uploads/2016/12/stumble25x25.png" alt="" width="25" height="25" /> <a href="http://www.stumbleupon.com/stumbler/NillasPhotos">NillasPhotos</a>
<h3>Read my blog and travel the globe with me</h3>
<a href="http://www.imageearthtravel.com/">Image Earth Travel</a>
<h3>Send an email</h3>
<a href="mailto:[email protected]">[email protected]</a>
<h3>My Mailing address</h3>
Nilla Palmer
ABN: 30 155 306 708
PO Box 15331
City East Brisbane
QLD 4002 Australia

Hope this helps.

[nillamary]

Thank you for the follow-up! I’ve been offline this past week so sorry for late response.
I’ve already created my Contact page and form with the WP Editor – I’m torn between using the WP Editor and Cornerstone after reading many issues with Cornerstone on this Forum.

[nillamary]

I also have the following questions:
1. Although I’ve changed my global X background colour to black and my font to white, for some reason, the background colour has not changed throughout my site or contact form page. Any ideas? I’ve read that setting it for the X-theme should be a global change?
2. I’d like to make my new Contact Form Heading centred across the whole page and not just over the Contact Form fields. Although it displays in the WP Editor as centred, when Previewing the page, it’s not centred.
3. How can I make my social icons align with my text in the Contact Form?

Thank you!

[nillamary]

1. As the global background colour set to #000000 didn’t work (as above), to force change the background colour, I’ve used:
body .site {
background-color: #000000;
}

I now need to change all text to white for the actual Contact Form and a thin border around the form so it actually stands out. I would like to achieve the form (right-side of text) as per screenshot attached, which I created with WuFoo for my current site.

In addition to my previous questions above, is it possible to change the background colour and font in the Form’s drop-down list? (Currently, it’s the default grey background and black text.)

Thanks!

[Friech]

Hi There,

2. I’d like to make my new Contact Form Heading centred across the whole page and not just over the Contact Form fields. Although it displays in the WP Editor as centred, when Previewing the page, it’s not centred.

You have a syntax error on your markup, I see you have a 1/2 columns layout but you have three of this 1/2 columns which does not make sense. We can easily center the Contact Form Heading on the page if it is on its own row.

This is one of the reason why Cornerstone does not allow editing page on classic editor, to avoid malformed html/shortcode markup that break the structure of the page.

We advice that we correct this first before we style the contact page. Please re-built the page in Cornerstone.

And please check your custom CSS here: http://csslint.net/ and resolve any errors. I see 9 character at the bottom of the custom CSS that cause some css not to work.

Thanks.

[nillamary]

Hi, thanks for your advice. However, I’ve used WP Editor for my whole site so far and was told by another X Theme support person (in a different thread) to stick to using the WP Editor if this is what I’ve started with.
Apart from the code that was embedded in H3, the rest of the code was provided by X support (see above in thread) and putting this code through your ccclint.net site also produces errors.

So that you know how my Contact page now displays as I want (apart from too much space above the Heading, but that’s another problem), I fixed this without having to re-create my whole form with Cornerstone:
1. Removed this code from H3: <div class=”x-column x-1-2 x-sm” style=”text-align: left;”</div> (somehow this was embedded in H3)
2. Moved H3 outside of form and div to the top of page so that it’s on its own row and not part of the form area. Then centred H3.
3. Removed <div class=”x-column x-1-2 x-sm”> from around the Contact form code.

Thanks anyway.

[Friech]

Hi There,

Glad you sorted things out. Yes, sure you can use the classic editor just keep an eye on malformed html/shortcode markup, as most of the time that is the culprit of weird layout issues.

http://csslint.net/ is only for checking CSS, not HTML nor shortcodes.

Try adding a class mtn to your Heading, that should remove the default top margin of it.

I’d like to check the page, but it is under Maintenance mode now.

Please feel free to get in touch with us regarding any further queries about the X|Theme and Cornerstone.

Cheers.

[nillamary]

No problem and thanks again!

Yes, sorry, I set that page up last night. Somehow, someone was referred from my other live and finished WP blog site to my current temporary X theme and InMotion URL. As I’m currently building this photography site and isn’t finished, looked ery unprofessional.

I’ll send you my details in a private message for you to check out. 🙂

[nillamary]

This reply has been marked as private.

[Rad]

Hi there,

Thanks, may I know what other issues you’re getting? Or is there any issue from the thread that isn’t addressed yet? I’ll be happy to help you 🙂

Thanks!

[Author]

Posts