How to move Contact Form

  • Hi There,

    I just want to move my contact form up next to my google map widget.

    https://the-fischer-group.com/contact-us

    It literally just needs to shift upward, I padded it 400px on the left to get it to the right side of the page, I just need to move it up. 

    <div style="padding-left:400px;">
[contact-form-7 id="211" title="Contact form 1"]
</div>

    That is the code I have in text editor of the page.

    Let me know if anyone has any solutions. Thank you.

Viewing 11 replies - 1 through 11 (of 11 total)

  • Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

    Thread Starter chrisgarone7

    (@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?

    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

    (@chrisgarone7)

    Okay,

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

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

    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.

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

    Thread Starter chrisgarone7

    (@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="https://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 :/ https://the-fischer-group.com/contact-us/

    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="https://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: https://jsfiddle.net/X9RA4/1/

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

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

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

<div style="float: left;">
<iframe src="https://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

    (@chrisgarone7)

    Okay sweet. Looks like it worked. Just got to touch up and add some text and I should be good.

    Thank you for your help. It is greatly appreciated as always. Big Time!

    Have a great day!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘How to move Contact Form’ is closed to new replies.