Skip to main content

FluentForms

#Feature Request

How do I make input text larger?

I am remaking a web site for a client whom does craniosacral terapi.
Here is the form https://craniosacral.no/behandling/
The general label sizes follow the theme text size but not the input text.
I somewhat expected to go into the Global Settings -> Layout and somewhere there decide on the input text size but I am not seeing it. I believe I have had difficultly with this before as well. I just do not remember how I handled it earlier. (I am putting in a feature request as I do not think there is any option to adjust the text input size.)

A tutorial.
I made this Fluent Forms tutorial showing how to find the CSS used in the Input Field and then add font size to make it bigger. Then to add the code into the Custom CSS & JS settings in Fluent Forms. https://easywebdesigntutorials.com/how-to-add-custom-css-or-js-to-fluent-forms-in-wordpress/

  • 2 likes
  • 5 comments

Jonathan Gwyer

Some CSS like...

.ff-el-input--content * {
    font-size: 24px;
}

...perhaps?

Paal Joachim Romdahl

Jonathan Gwyer Thank you!
I took another look at found by right clicking the input text area and selected Inspect and noticed the below CSS. I then added in a font-size of 1em. Making the input text the same size as the text used on the page.
.fluentform .ff-el-form-control {
display: block;
width: 100%;
font-size: 1em;
}

A mini tutorial which I should extend into a Fluent Forms tutorial for my web site.

  1. Right click the area where you want to modify something. Through the dialog box that shows up select the "Inspect" option.
  2. Find the correct CSS. It looks like this
    .fluentform .ff-el-form-control {
    display: block;
    width: 100%;
    }
  3. Click into the CSS and add this line of code:
    font-size: 1em;
  4. Check to see that input text has changed size by clicking into the form and writing some text. Copy the code.
  5. In the backend. Go to a form -> Settings -> Custom CSS/JS
    add fluentform .ff-el-form-control{
    font-size: 1em;
    } Then scroll to the bottom and save. NB! This code only impacts the current settings of the specific selected form.
  6. Check the form on the frontend.
  7. Time to create the tutorial. I will edit this comment when the tutorial is up.

Paal Joachim Romdahl

Jonathan Gwyer Thanks for getting me going.
https://easywebdesigntutorials.com/how-to-add-custom-css-or-js-to-fluent-forms-in-wordpress/

Jonathan Gwyer

Paal Joachim Romdahl great stuff!

Paal Joachim Romdahl

Thanks!