PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Possibility to shift the placement of the Submit button?

  1. Michael
    Member

    I have a form on http://www.decoridesigns.info/design-inquiry/

    When previewing my website in Firefox, it works just fine; but when previewing in Safari, my SUBMIT button is floating above the Comments field. I have tried making adjustments to my button in my theme's style.css with no change and am not sure if there's a spot in form.css to make adjustments to my button.

    If someone is able to tell me how to force my button to the end of the form, I would be very grateful.

    Thank you

    Posted 11 years ago on Thursday June 24, 2010 | Permalink
  2. It's the custom CSS you're adding and not a default form style issue.

    On line 226 of forms.css file.. you've added styles and floated the comment container (#field_2_13) box above the gform_footer and didn't clear it properly. Probably no need to float that left as it's the default position. I would just remove the float property and that should work for you.

    Here's the deal. Don't make edits directly in the plugin's form.css file. If you do, and use the auto-update option, all of your changes will be overwritten.

    If you want to make extensive customizations, here's how you do it. Copy the entire forms.css content from the plugin file, then append all of that to your theme's style.css file.

    Then, go to the forms settings page select no for the "output CSS" option. That way, the default forms.css won't load, and the styles are coming from your theme style sheet. Make all the changes you want there, then when the plugin updates, your customizations are safe.

    Posted 11 years ago on Thursday June 24, 2010 | Permalink
  3. Michael
    Member

    Thanks for your response. What do you mean by "didn't clear it properly"? I took the float: left; away from that line and it moved my comment box to the top and covered up part of my address fields (in both safari and firefox). It did bring the submit button back down though. Any other suggestions?

    Also, thanks for mentioning that I had to transfer my css. I intended on doing it, but had not remembered to yet. It is transferred now.

    Posted 11 years ago on Tuesday June 29, 2010 | Permalink
  4. Floating elements with CSS takes a little bit to grasp sometimes but this is a great place to start. It's been around a while, but still should be helpful.

    http://css.maxdesign.com.au/floatutorial/

    Yeah, your styles are off a little bit. What you need to do is basically float every other element to the left for a two column layout. Float the first one, then the third, then the fifth, etc. The ones in between will naturally float up to the right inline with the previous one assuming there's room enough to do so.

    I grabbed your CSS, tweaked it and tested it. I think this should get you closer to what you wanted.

    /* custom layout for Design Inquiry form */
    
    #gform_wrapper_2 { width:590px; margin-left:68px; }
    
    /* Name */
    #field_2_2 { float:left; width:295px; }
    
    /* Address */
    #field_2_18 { float:left; width:590px; }
    
    /* Daytime Phone */
    #field_2_10 { float:left; width:295px; }
    
    /* Project Date */
    #field_2_16 { float:left; width:295px; padding-top:20px; padding-bottom:120px; }
    
    /* Email */
    #field_2_19 { width:269px; padding-right:26px; }
    
    /* Night Phone */
    #field_2_12 { width:295px; }
    
    /* Rooms */
    #field_2_17 { width:295px; padding-top:20px; }
    
    /* Comments */
    #field_2_13 { width:100%; }
    
    /* Dropdown adjustments */
    .entry-content .gform_wrapper .ginput_complex select,.entry-content .gform_wrapper select { padding-bottom:2px; padding-left:3px; padding-top:3px; font-size:12px; }
    Posted 11 years ago on Tuesday June 29, 2010 | Permalink
  5. Michael
    Member

    That worked! Thank you very much for your help. We have tested it on all browsers except Opera and Internet Explorer.

    Posted 11 years ago on Friday July 2, 2010 | Permalink
  6. Wonderful. Thanks for the update.

    Posted 11 years ago on Friday July 2, 2010 | Permalink

This topic has been resolved and has been closed to new replies.