x

Centering contact forms

Is there a way to centre the contact forms? If not can Weebly please implement this option?

If the rest of the website text is centred it looks very odd when the contact form is left-aligned.

(Putting in a spacer doesn't seem to work because it looks strange on some screens.)

Thanks

Simon

4,177 Views
Message 1 of 11
Report
10 REPLIES 10

@SimonM Generally speaking, you should avoid Weebly spacers whenever possible particularly for adding columnar spacing. (For horizontal spacing, use the separator element instead and turn off the line display; the separator allows you to set the pixel spacing above and below the separator so you know exactly how much space you're adding; the spacer element on the other hand tells you nothing about the amount of spacing beyond what your eyes tell you.)

With regard to your contact form, you'll need a little bit of css code on the page containing the form to center it. In the Weebly Site Editor, click on "Pages" and then click the desired page in the pages stack in the left-hand sidebar. Click "SEO Settings" in the left-hand sidebar. Scroll down to the "Header Code" box and insert the code below. In order to use the "margin" left/right auto attribute (which centers an element horizontally), you have to give the element itself a width. In the example below, I've set the maximum width of the contact form container to 400px, however, you can modify this number as makes sense visually for your page and form.

<style>
.wsite-form-container { max-width: 400px; margin: 0 auto; }
</style>
4,164 Views
Message 12 of 11
Report

Thank you! The code works great, but the submit button stays left-justified. Is there a fix for that?

4,145 Views
Message 12 of 11
Report

When i just followed @PaulMathewsadvice it seems to move the submit button too...

4,130 Views
Message 12 of 11
Report

@PaulMathews 

thank you, that's a great help - never occured to me to use separators instead of spacers!

4,131 Views
Message 12 of 11
Report

I am not tech-savvy & canNOT 'write code'/'insert code', so does that mean it's impossible for me to center the button?  Also, Weebly lets me center the 'regular' Button, so why don't they fix this?

3,952 Views
Message 12 of 11
Report

Hi, the button isn't moving for me either. is there a way to fix this? 

3,823 Views
Message 12 of 11
Report
Square

Hi, @lek34. Can you post a link to the page of your site that has the form on it?

3,818 Views
Message 12 of 11
Report

Thanks Adam, i sent you a PM with the address. 

3,810 Views
Message 12 of 11
Report

You can center the button in the button editing settings. Click on the button itself in the editor, then click "button" and you can center align it.

1,415 Views
Message 12 of 11
Report

Darn. Doesn't work for me.

2,872 Views
Message 12 of 11
Report
This thread has been archived and locked. Please start a new thread if you would like to continue the conversation.