WordPress.org

Support

Support » How-To and Troubleshooting » How to move Contact Form

How to move Contact Form

  • chrisgarone7

    @chrisgarone7

    Hi There,

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

    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)
  • esmi

    @esmi

    Forum Moderator

    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.

    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?

    Scott DeLuzio

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

    chrisgarone7

    @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.

    Scott DeLuzio

    @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.

    Scott DeLuzio

    @scottdeluzio

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

    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="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/

    Scott DeLuzio

    @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/

    Scott DeLuzio

    @scottdeluzio

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

    Scott DeLuzio

    @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).

    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.
Skip to toolbar