Docs

[arefs]

Hello,

Can you help me with a simple thing.

I’ve created a contact form using the contact form 7 element and set 90% of the form up myself.

You can see it here – http://www.wppatrol.com/contact/

However, instead of the field “Your email” appearing below the field “Your Name” I want it to be positioned to the right, in a column layout with a little bit of padding between the two fields so it doesn’t look bad or squashed.

I also want to do the same for the fields:

– “Your Website” & “Telephone Number”

– “What Are The Names Of Your Premium Products?” & “Is There Anyone Else You’d Like To Tell Us?”

How can I do this?

For your reference, here is the code I’m currently using:

<p><b>Your Name</b> (required)<br />
[text* your-name] </p>

<p><b>Your Email</b> (required)<br />
[email* your-email] </p>

<p><b>Your Website</b><br />
[url your-website] </p>

<p><b>Telephone Number</b><br />
[tel phone-number] </p>

<p></p>

<p><b>What Type Of Premium WordPress Products Do You Produce? (required)</b><br />
[radio premium-type default:1 “Themes” “Plugins” “Both”] </p>

<p><b>What Are The Names Of Your Premium Products? (required)</b><br />
[textarea your-message] </p>

<p><b>Is There Anyone Else You’d Like To Tell Us?</b><br />
[textarea your-message] </p>

<p>[submit “Send”]</p>

Thank you.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Edit Global CSS:

@media (min-width: 768px){
    #wpcf7-f60-p27-o1 > form > p:nth-child(2),
    #wpcf7-f60-p27-o1 > form > p:nth-child(3),
    #wpcf7-f60-p27-o1 > form > p:nth-child(4), 
    #wpcf7-f60-p27-o1 > form > p:nth-child(5),
    #wpcf7-f60-p27-o1 > form > p:nth-child(9),
    #wpcf7-f60-p27-o1 > form > p:nth-child(8) {
        width: 48%;
        float: left;
    }
    #wpcf7-f60-p27-o1 > form > p:nth-child(3),
    #wpcf7-f60-p27-o1 > form > p:nth-child(5),
    #wpcf7-f60-p27-o1 > form > p:nth-child(9) {
        float: right;
    }
}

Hope it helps 🙂

[arefs]

Thanks but I’m not sure about adding code to the global customiser.

There might be other forms I want to add which don’t have this layout.

By adding this code is is going to change all contact forms on this site?

EDIT – I tried adding this code anyway to customiser and it made zero difference. I’m very confused why you’re asking me to add code the customiser. Surely I need some html code to make columns.

Do you understand what I’m asking here? Please read the OP again.

[Darshana]

Hi there,

I have tested the above code and it should render as follows (http://snag.gy/10DMd.jpg).

If you want to apply only for that page, you can Edit your page using Cornerstone (make sure that your page has been created using Cornerstone) and use Cornerstone CSS section (see: http://snag.gy/1F2PI.jpg).

Let us know how it goes.
Thanks!

[arefs]

Got it. Thanks.

I’ve add the code and it’s almost OK but not quite.

Here are the small issues:

1.) The phrase “what type of” is in the wrong place.

2.) I want to add a little more spacing between the sections indicated on the screenshot below. I’ve tried adding the code <p></p> to the form but it doesn’t work. How can I create more space.

Screenshot – https://dl.dropboxusercontent.com/u/17713251/2016-04-12_23-43-47.jpg

Thanks

[Nico]

Hi There,

Would you mind sharing us your admin credentials so we could check your setup closer.

Don’t forget to set it as private reply.

Thanks.

[arefs]

This reply has been marked as private.

[Paul R]

Hi,

Please change the css code given in 876216 with this.

@media (min-width: 768px){
    #wpcf7-f60-p27-o1 > form > p:nth-child(2),
    #wpcf7-f60-p27-o1 > form > p:nth-child(3),
    #wpcf7-f60-p27-o1 > form > p:nth-child(4), 
    #wpcf7-f60-p27-o1 > form > p:nth-child(5),
    #wpcf7-f60-p27-o1 > form > p:nth-child(7),
    #wpcf7-f60-p27-o1 > form > p:nth-child(9),
    #wpcf7-f60-p27-o1 > form > p:nth-child(8) {
        width: 48%;
        float: left;
    }
    #wpcf7-f60-p27-o1 > form > p:nth-child(3),
    #wpcf7-f60-p27-o1 > form > p:nth-child(5),
    #wpcf7-f60-p27-o1 > form > p:nth-child(9) {
        float: right;
    }
    #wpcf7-f60-p27-o1 > form > p:nth-child(9) {
        clear:both;
        float:none;
        text-align: right; 
    }
    #wpcf7-f60-p27-o1 > form > p:nth-child(8) {
         margin-top: 66px;
    }
}

Hope that helps.

[arefs]

Thanks but that creates new problems.

Screenshot – https://dl.dropboxusercontent.com/u/17713251/2016-05-03_10-41-28.jpg

Or you can also check out the current page.

In case that isn’t clear, here are the current issues:

1.) The question “What Are The Names Of Your Premium Products?”should be below the question “What Type Of Premium WordPress Products Do You Produce?”.

2.) The question “Is There Anyone Else You’d Like To Tell Us?” should be aligned to the right of the “what type of premium…” question.

3.) I want to add a little more spacing between the sections indicated on the screenshot below. I’ve tried adding the code <p></p> to the form but it doesn’t work. How can I create more space.

Screenshot – https://dl.dropboxusercontent.com/u/17713251/2016-04-12_23-43-47.jpg

I’m sure these are just simple alignment issues and a small adjustment is needed.

Thanks for you help.

[Christopher]

Hi there,

Please remove CSS code and change your contact form code to :

<div class="x-section man">
<div class="x-column x-1-2 x-sm"><b>Your Name</b> (required)<br />
[text* your-name]</div>
<div class="x-column x-1-2 x-sm"><b>Your Email</b> (required)<br />
[email* your-email]</div>

</div>
<div class="x-section man">
<div class="x-column x-1-2 x-sm"><b>Your Website</b><br />
[url your-website] </div>
<div class="x-column x-1-2 x-sm"><b>Telephone Number</b><br />
[tel phone-number] </div>

</div>
<div class="x-section man">
<div class="x-column x-1-1 x-sm"><b>What Type Of Premium WordPress Products Do You Produce? (required)</b><br />
[radio premium-type default:1 "Themes" "Plugins" "Both"] </div>
</div>

<div class="x-section man">

<div class="x-column x-1-2 x-sm"><b>What Are The Names Of Your Premium Products? (required)</b><br />
[textarea your-message] </div>

<div class="x-column x-1-2 x-sm"><b>Is There Anyone Else You’d Like To Tell Us?</b><br />
[textarea your-message] </div>
</div>
<p>[submit "Send"]</p>

Hope it helps.

[arefs]

Thanks we’re getting closer on this. The arrangement of fields now works. However, there are now huge gaps between the fields:

Screenshot – https://dl.dropboxusercontent.com/u/17713251/2016-05-04_10-13-10.jpg

I know I said I was looking for some space, but not as big as this. I’m looking for it to be around 80% less of what it currently is.

Hopefully once we’ve done this everything with be sorted.

Thanks for your help.

[Christopher]

Hi there,

Please update your code to :

<div class="x-section man pas">
<div class="x-column x-1-2 x-sm"><b>Your Name</b> (required)<br />
[text* your-name]</div>
<div class="x-column x-1-2 x-sm"><b>Your Email</b> (required)<br />
[email* your-email]</div>

</div>
<div class="x-section man pas">
<div class="x-column x-1-2 x-sm"><b>Your Website</b><br />
[url your-website] </div>
<div class="x-column x-1-2 x-sm"><b>Telephone Number</b><br />
[tel phone-number] </div>

</div>
<div class="x-section man pas">
<div class="x-column x-1-1 x-sm"><b>What Type Of Premium WordPress Products Do You Produce? (required)</b><br />
[radio premium-type default:1 "Themes" "Plugins" "Both"] </div>
</div>

<div class="x-section man pas">

<div class="x-column x-1-2 x-sm"><b>What Are The Names Of Your Premium Products? (required)</b><br />
[textarea your-message] </div>

<div class="x-column x-1-2 x-sm"><b>Is There Anyone Else You’d Like To Tell Us?</b><br />
[textarea your-message] </div>
</div>
<p>[submit "Send"]</p>

If you want to remove padding completely, change pas to pan in provided code.

Hope it helps.

[arefs]

And we’re done. Thank you!

[Nabeel A]

You’re welcome 🙂

[Author]

Posts