[SOLVED] Form Builder - modify submit button

Have a question or a suggestion about a 3rd party addon module or plugin?
Let us know here.
Post Reply
giapippo
Forum Members
Forum Members
Posts: 176
Joined: Tue Feb 28, 2012 1:24 pm

[SOLVED] Form Builder - modify submit button

Post by giapippo »

good morning to all

I am creating a form, but I would need to change the SUBMIT button
size, color and text

but I do not understand how to do

thanks in advance for your support
Last edited by giapippo on Thu Jul 24, 2014 1:44 pm, edited 1 time in total.
swarfega
Forum Members
Forum Members
Posts: 174
Joined: Mon Sep 06, 2010 10:51 am

Re: Form Builder - modify submit button

Post by swarfega »

Hi there.

Form Builder makes it easy to customize its various elements because it assigns css classes to them.

For instance the Submit button is class="cms_button" so all you need to do is add

.cms_button{[some stuff]}

in your style sheet and it'l use that.

You can customize the input and textarea boxes amongst other things as well.
giapippo
Forum Members
Forum Members
Posts: 176
Joined: Tue Feb 28, 2012 1:24 pm

Re: Form Builder - modify submit button

Post by giapippo »

thanks for the help but the customer changed his mind

Now he wants on this page

http://www.autodire.it/calcola-on-line- ... go-termine

you can send the email using the button to the right "CALCOLA RATA"

instead of the classic submit button

Is it possible?

we also accept alternative proposals :)
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Form Builder - modify submit button

Post by velden »

Of course it is possible

In Form Builder you can set text of submit button per form.
Then use css to style it like you want. It supports, background-color, borders, font-size etc. I'm not sure about font-family for all browsers by the way.

You can select a submit button via css by using (for example):

Code: Select all

input[type=submit] {
  background-color : red;
  font-weight : bold;
  color : white;
}
giapippo
Forum Members
Forum Members
Posts: 176
Joined: Tue Feb 28, 2012 1:24 pm

Re: Form Builder - modify submit button

Post by giapippo »

oK
but the "Submit" button is always placed at the bottom of the form
how can I put it in a different area of the page?
User avatar
Rolf
Power Poster
Power Poster
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Contact:

Re: Form Builder - modify submit button

Post by Rolf »

General tips for styling forms:
https://www.cmscanbesimple.org/blog/styling-forms

Downloadable demo FormBuilder form and stylesheet:
https://www.cmscanbesimple.org/blog/for ... stylesheet
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
giapippo
Forum Members
Forum Members
Posts: 176
Joined: Tue Feb 28, 2012 1:24 pm

Re: Form Builder - modify submit button

Post by giapippo »

thanks

with this code

.submit [type="submit"] {
background : #c45d69;
font-size: 20px;
color : #fff;
width: 100%;
border: 2px solid #c45d69;


}


I got this

http://www.autodire.it/calcola-on-line- ... go-termine

but I can not change the value of "invia"

What should I put in the code
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Form Builder - modify submit button

Post by velden »

You don't change that in your code but in a setting of Form Builder.

Go to Form Builder, open Form and have a look at bottom of second tab (Form Submission: Form Submit Button Text)
giapippo
Forum Members
Forum Members
Posts: 176
Joined: Tue Feb 28, 2012 1:24 pm

Re: Form Builder - modify submit button

Post by giapippo »

hahahahaa
sorry for the stupid question

;D
applejack
Power Poster
Power Poster
Posts: 1014
Joined: Fri Mar 30, 2007 2:28 am

Re: Form Builder - modify submit button

Post by applejack »

Don't use a submit button as you can't style it in iOS use button tag instead.
Post Reply

Return to “Modules/Add-Ons”