Home>Support>Increase hight of input field in contact form widget

Increase hight of input field in contact form widget

By ccvanroyen, 8 years ago. Last reply by Andrew Misplon, 8 years ago.

I am using the Page Builder, and I would like to increase the height of the text box in a Site Origin contact form. It is now really to small.

The theme I am using is Limon.

http://agamayogacolombia.com/courses-workshops-and-retreats/agama-level-1-intensive/

Thank you!

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    Hi Ccvanroyen

    Thanks for sending your question.

    It looks like your theme might be missing a little padding for input fields, let’s add some. If you don’t already have a Custom CSS plugin installed, please, go to PluginsAdd New and use the top right search field to search for SiteOrigin CSS, next, go to AppearanceCustom CSS and insert:

    /* SiteOrigin Contact Form */

.so-widget-sow-contact-form input {
	padding: 8px;	
}

.so-widget-sow-contact-form textfield {
	min-height: 250px
}

    The first value, 8px, adds a little padding to your fields, the second value, 250px is the height for the comments area that you’re after. Adjust as required.

  2. 8 years, 4 months ago ccvanroyen

    Dear Andrew,

    Thank you so much! This is great. It works :-)))!

    If I can ask one more question. How can I increase the font size in the input fields? If I put 12 pt in the SO builder contact form, it makes no difference.

    So wonderful that you reply to these questions and even so quickly! Thank you so much.

    Catherine

  3. 8 years, 4 months ago Andrew Misplon
    Hi, I Work Here

    Glad that helped. Try changing our previous CSS snippet to:

    /* SiteOrigin Contact Form */
.so-widget-sow-contact-form input {
    font-size: 14px;
    padding: 8px;
}

.so-widget-sow-contact-form textfield {
    font-size: 14px;
    min-height: 250px;
}

    Adjust as required :)

  4. 8 years, 4 months ago ccvanroyen

    Thank you Andrew! This works very well indeed! :-)
    The three input fields have now a better font size.
    However, the 'Message' field still has the super mini font-size. If that could be solved as well, all would be done and I finished with the page ;-). That would be super great!
    You think you would know the CSS to adjust the font-size of the 'Message'-field as well?
    http://agamayogacolombia.com/courses-workshops-and-retreats/agama-level-1-intensive/
    Thank you so much!

  5. 8 years, 4 months ago Andrew Misplon
    Hi, I Work Here

    Ahh sorry for the mistake. Please, try replacing your Custom CSS as follows:

    /* SiteOrigin Contact Form */
.so-widget-sow-contact-form input {
    font-size: 14px;
    padding: 8px;
}

.so-widget-sow-contact-form textarea {
    font-size: 14px !important;
    min-height: 250px;
    padding: 8px;
}
  6. 8 years, 4 months ago ccvanroyen

    Thank you!! ?

  7. 8 years, 4 months ago Andrew Misplon
    Hi, I Work Here

    For sure.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More