WordPress.org

Ready to get started?Download WordPress

Forums

How to move Contact Form (12 posts)

  1. chrisgarone7
    Member
    Posted 8 months ago #

    Hi There,

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

    http://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.

  2. esmi
    Forum Moderator
    Posted 8 months ago #

    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.

  3. chrisgarone7
    Member
    Posted 8 months ago #

    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?

  4. Oizuled
    Member
    Posted 8 months ago #

    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>
  5. chrisgarone7
    Member
    Posted 8 months ago #

    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.

  6. Oizuled
    Member
    Posted 8 months ago #

    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.

  7. Oizuled
    Member
    Posted 8 months ago #

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

  8. chrisgarone7
    Member
    Posted 8 months ago #

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

  9. Oizuled
    Member
    Posted 8 months ago #

    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/

  10. Oizuled
    Member
    Posted 8 months ago #

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

  11. Oizuled
    Member
    Posted 8 months ago #

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

  12. chrisgarone7
    Member
    Posted 8 months ago #

    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!

Reply

You must log in to post.

About this Topic

Tags

No tags yet.