How to move Contact Form

(@chrisgarone7)

Hi!

I use firebug, but I wanted to know if I could just change it in the “text” editor on the page’s backend. Is there a command that will send it up, can I float it up there?

(@scottdeluzio)

Add the div style to the contact form editor:

<div style="padding-left:400px;">
<p>Your Name (required)<br />
    [text* your-name] </p>

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

<p>Your Message<br />
    [textarea your-message] </p>

<p>[submit "Send"]</p>
</div>

Thread Starter

(@chrisgarone7)

Okay,

but it still looks like this http://the-fischer-group.com/contact-us

I need it to be moved up, right next to the other content that is on the left.

(@scottdeluzio)

Try this:
On your contact page, wrap the map and the contact form shortcode with a div:

<div style="position:relative; width:100%;">
//map & contact form
</div>

Then modify the contact form in the editor again to:

<div style="position:absolute;right:0px;">
<p>Your Name (required)<br />
    [text* your-name] </p>

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

<p>Your Message<br />
    [textarea your-message] </p>

<p>[submit "Send"]</p>
</div>

Without testing it I think this will work, but let me know if it doesn’t look right.

(@scottdeluzio)

It should work: http://jsfiddle.net/X9RA4/

Thread Starter

(@chrisgarone7)

<h3 style="padding-left: 10px;padding-top20px;">The Fischer Group</h3>
[one_half]
<div id="hours_location">

<strong style="padding-left: 10px;">Address</strong>
<p style="padding-left: 10px;">2028 Bohlke Blvd
Fairfield, OH 45014</p>
&nbsp;
<p style="padding-left: 10px;">(513) 285-1281</p>
&nbsp;

<iframe src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=2028+Bohlke+Blvd.+|+Fairfield,+OH+45014&aq=&sll=37.0625,-95.677068&sspn=58.598104,135.263672&ie=UTF8&hq=&hnear=2028+Bohlke+Blvd,+Fairfield,+Ohio+45014&ll=39.353349,-84.52158&spn=0.007093,0.016512&t=m&z=14&iwloc=A&output=embed" height="242" width="242" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></div>

[contact-form-7 id="1122" title="Untitled"]

&nbsp;

This is what my code looks like in the editor. What should it looked like wrapped in the div. I modified the contact form. This is what I look like right :/ http://the-fischer-group.com/contact-us/

(@scottdeluzio)

I think if you did something like this it would work (note I only copied the portion that includes the map and contact form):

<div style="position:relative; width:100%;">

<div style="position:absolute; left:0px;">
<iframe src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=2028+Bohlke+Blvd.+|+Fairfield,+OH+45014&aq=&sll=37.0625,-95.677068&sspn=58.598104,135.263672&ie=UTF8&hq=&hnear=2028+Bohlke+Blvd,+Fairfield,+Ohio+45014&ll=39.353349,-84.52158&spn=0.007093,0.016512&t=m&z=14&iwloc=A&output=embed" height="242" width="242" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>

<div style="position:absolute; right:0px;">
[contact-form-7 id="1122" title="Untitled"]
</div>

</div>

See it here: http://jsfiddle.net/X9RA4/1/

(@scottdeluzio)

You may have already added the <div> to your contact form so it might be redundant in my last post – not sure though.

(@scottdeluzio)

One more time…This time I think you’ll get it!

<div style="overflow:hidden; width: 100%;">

<div style="float: left;">
<iframe src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=2028+Bohlke+Blvd.+|+Fairfield,+OH+45014&aq=&sll=37.0625,-95.677068&sspn=58.598104,135.263672&ie=UTF8&hq=&hnear=2028+Bohlke+Blvd,+Fairfield,+Ohio+45014&ll=39.353349,-84.52158&spn=0.007093,0.016512&t=m&z=14&iwloc=A&output=embed" height="242" width="242" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>

<div style="float: right;">
[contact-form-7 id="1122" title="Untitled"]
</div>

</div>

The code I posted before was working fine in the jsfiddle, but it didn’t take into consideration any other formatting going on in your page.

Try this, and let me know how it looks. (Also get rid of the <div> you added in your contact form editor).

Thread Starter

(@chrisgarone7)