[Plugin: Fast and Secure Contact Form] Centering entry boxes

Not sure how. but is might be something you can add in advance options css

I’m assuming that the entry I want to change is “CSS style for form input fields on the contact form.” The problem is that when I enter “text-align:center;” into the form, nothing changes. The input fields are still aligned to the left.

All of the other CSS options are centered when I enter “text-align:center;” into their form fields.

It might be hard coded in the php
I will look at this to see if I can make it adjustable.

Mike, I am having the same problem. I want to center the form box but it continues to remain left aligned. The html even says that it is center aligned. It just doesn’t show up on my Contact page that way. What can I do?
https://www.cut-and-install-crown-molding.com
Thanks, Olivia

Try this in you contact page where you put the SI contact form code:

<center>[si-contact-form form=’1′]</center>

It worked for me: https://www.nitrowebtools.com/contact-us/

Note: I will be removing my <center> tags from the page above in the next hour since I did it just to reply to this post.

Hello TXNitro,
Thank you for trying to help me. Unfortunately it didn’t work.
On my contact page on the site, <center> showed up above the contact form, but the form itself didn’t move to center. Any other suggestions?

@cutandin

Make sure you add the code “<center>[si-contact-form form=’1′]</center>” in your HTML editor, not the rich text editor.

When you go to edit your page, there should be two tabs on the editor. One says “Visual”, the tab next to it says “HTML”. Click the “HTML” tab and insert your code. You can just overwrite the code that you had originally placed there before, just make sure to change the “form=’1′ number, if your original code had another number on it.

Note: Since you probably had input this code into the rich text editor’s “Visual” tab, make sure that when you view your code with the visual tab selected, it only looks like this: [si-contact-form form=’1′].

It should only have the <center></center> tags around it when you view it through the “HTML” tab.

Hello again,
When I put the code in as you suggested with the <center>[si-contact-form form=’3′]</center> and then update the page, this is what shows up in the HTML tab. Somehow the code changes and the page on the site stays the same.

Any further suggestions? I really appreciate your time in helping me.

This is what I copies from the HTML tab after updating:

<p style=”text-align: center; font-family: Footlight MT Light; font-size: 16px;”><span style=”font-size: large;”> </span></p>

<p style=”text-align: center; font-family: Footlight MT Light; font-size: 16px;”><span style=”font-size: large;”>Here at Cut-N-Crown we welcome questions and comments.</span></p>

<p style=”text-align: center; font-family: Footlight MT Light; font-size: 16px;”><span style=”font-size: large;”> We encourage you to leave us your feedback. </span></p>

<p style=”text-align: center; font-family: Footlight MT Light; font-size: 16px;”><span style=”font-size: large;”>Thank you for visiting our site!</span></p>

<p style=”text-align: center;”> </p>

<p>
<div>[si-contact-form form=’3′]</div>
</p>

<p><br class=”spacer_” /></p>

@cutandin

Try the code like this and see if it works for you:

<p style=”text-align: center; font-family: Footlight MT Light; font-size: 16px;”>Here at Cut-N-Crown we welcome questions and comments.</p>

<p style=”text-align: center; font-family: Footlight MT Light; font-size: 16px;”>We encourage you to leave us your feedback.</p>

<p style=”text-align: center; font-family: Footlight MT Light; font-size: 16px;”>Thank you for visiting our site!</p>

<center>[si-contact-form form=’3′]</center>

<p class=”spacer_” /></p>

TXNitro — Thanks. Still didn’t work. This is confounding to say the least.

I pasted this into the html tab but it eliminated the <center> in <center>[si-contact-form form=’3′]</center>

Then, I put the <p> before that line and still no effect!

Do you know of any other Contact form plug in that will center without all this problem?

Anybody try this? please report if it works:
https://wpbtips.wordpress.com/2009/04/30/positioning-shortcode-objects-pt-3/

<div class="aligncenter" style="width:60%;">
[si-contact-form form='1']
</div>

The width number is an example – adjust it till the columns get the distance you prefer.

Mike, Thanks for the code. What happened was it aligned the left side of the “box” to the exact center rather than centering the entire “box”. It looks off to the right now!

Can you adjust the margin on the left so that it moves more toward the center or is that just not worth it?

I finally got the FATAL ERROR fixed. Thanks for the prompt response!