search

felixarntz / bootstrap-for-contact-form-7

This plugin modifies the output of the popular Contact Form 7 plugin to be styled in compliance with themes using the Bootstrap CSS framework.
https://wordpress.org/plugins/bootstrap-for-contact-form-7/
GNU General Public License v2.0
24 stars 18 forks source link

The submit button with horizontal layout #1

Closed Lindorie closed 9 years ago

Lindorie commented 9 years ago

Hi,

Thank you for this plugin, it is really useful! I have changed the form layout to horizontal, but the submit button stays sticked on the left:

form_contact_issue

Is there a way to fix this behaviour with the plugin? For example, the submit button could be sticked on the right (bootstrap pull-right) or aligned like the label fields, below them.

Here's the code I use in Contact Form 7: 

[text* your-name]Votre nom[/text*]
[email* your-email]Votre email[/email*]
[text your-subject]Sujet[/text]
[textarea* your-message]Votre message[/textarea*]
[submit "Envoyer"]

I know I can use HTML and Bootstrap CSS classes around the submit shortcode, but I think it could be interesting if the plugin did this itself?

Thank you for reading me :)

felixarntz commented 9 years ago

Hi,

thanks for your request!

Indeed you're reporting an issue that I have been working around myself for quite a while.

What I'm curious about would be: I know that the submit button sticking to the left side of the overall form looks bad, but I'm not sure whether to align it to the left or right side of the input fields, concerning the appearance/UI. What do you prefer? I'd be interested in your thoughts.

Definitely something I will include in the next release. :)

Lindorie commented 9 years ago

Hmm, according to what I just read, the submit button would be better aligned in the left side of the input fields like this :

form_contact_issue3

The right side seems reserved to forms with several steps (with a "Next" button). However I don't think it looks strange or non-ergonomic, even for a contact form :

form_contact_issue2

So maybe you can let the user choose himself the alignment he wants with another parameter ?

felixarntz commented 9 years ago

I have just published a new version that does exactly that: The submit button is placed at the right position automatically (left by default), and you can specify the alignment with a new 'align' parameter which can have one of the values 'left', 'center' or 'right'.

Example: [submit align:right "Send"]

Lindorie commented 9 years ago

Thank you so much :) It works perfectly.