New to the community? Start here

Narrow contact forms more easier

Is it possible to design the width of forms and center them on a page more easier than to spend a considerable amount of time trying to figure it out? I want to make the form more narrow (obviously. See a picture here. I would NEVER want a form to go across the whole page and I don’t know who would). Furthermore, contact forms (on a normal day) will ALWAYS be in the center of the page. I’ve been at it for over an hour and still can’t find out how to do it. I’ve added custom CSS and everything else. I know some CSS, but do know, if someone wants a contact form, he or she will have to know how to code.
Note: I have another form on another page and it’s centered, but finding out how I did that when I made that form over a year ago is impossible. Yes, I duplicated that form, but when I look, there is NO reason why it should be centered. There’s no custom CSS for it or anything. So I have no idea how I got it to work. Every time I need a contact form, it’s a whole new learning experience just to make it so it doesn’t go across the WHOLE page.

I’m trying to make the form in the staging area, so I can’t give you a URL to the 100% across the page width form to look at.
Note: You cannot make 3 columns and put the form in the center, it makes the form too narrow.

Fri, 10 Apr 2020 14:53:15
More Forminator Pro discussions
Forminator Pro
  • Jamison
    • WPMU top fan!

    At least, how about instructional text in the form building area to eliminate the need to go search on Google to see if we need to adjust the padding, margins, or width, and then figure out if we have to put a percent or px, margin-left or padding-left, and so on? I know this information is online, but it makes it extremely difficult trying to decipher what is needed. “box-sizing: border-box?” “resize: vertical?”

    Thanks,
    JL

  • Dimitris Kalliris
    • Support Team Lead

    Hello there James Leesley

    I understand the need for such control, especially if there isn’t any page builder to help you with centering elements.
    You can use a custom CSS rule in Customizer -> Additional CSS like:

    @media screen and (min-width: 768px) {
  .forminator-ui { 
    width: 50% !important;
    max-width: 50% !important;
    margin: 0 25% !important; 
  }
}

    I’ve also shared this request with our Forminator developers and designers, so they can consider adding relevant options in the Appearance tab. If there’s any development on this, we’ll keep you posted here.

    Thank you,
    Dimitris

  • PTaubman
    • I'm just a Cook

    Hi James Leesley –

    I understand what you are trying to do and respect that! I can see a lot of reasons to want this as a feature to implement easily without having to fiddle around with the CSS.

    I do, however, have a different point of view on some of your strong statements:

    I would NEVER want a form to go across the whole page and I don’t know who would). Furthermore, contact forms (on a normal day) will ALWAYS be in the center of the page.

    I have built plenty of sites with a form that is full width – especially for a text block when the user is filling in descriptive text. Having a nice big block encourages more details.

    Also, many forms (think short contact forms or opt-in forms) are put in the sidebar (right – or left) side of the screen, or even within some text.

    Just some thoughts :slight_smile:

  • Pawel Pela
    • Ex Staff

    Hello James Leesley and PTaubman !

    I can only agree with both of you on this – this surely depends on the design of the site and in fact I’ve seen both. Of course forms that take less width are more popular, but that doesn’t mean the full width ones are bad.

    Of course if you need any help with CSS – we’re always here, either on the forum or on LiveChat and happy to help with any customisations.

    I’ve also checked if we have anything from our developers on this, but there’s no response yet. We’ll keep you posted, as Dimitris mentioned.

    Kind regards,
    Pawel

  • Jamison
    • WPMU top fan!

    When I mentioned custom CSS before, I was talking about the Custom CSS in the form, not the website theme Custom CSS area, hence I neglected to check the theme custom CSS, so once you gave it to me (CSS), I remembered what I had to do. Thanks!

    “To adjust the width, ***, and the *** to the form, add CSS to your theme’s ‘Custom CSS area.'”
    Example:
    @media screen and (min-width: 768px) {
    .forminator-ui {
    width: 50% !important;
    max-width: 50% !important;
    margin: 0 25% !important;
    }
    }

    If this was in the form (above), I would’ve been able to make the adjustments right away. Also, you can’t add CSS like that to the Custom CSS in the form, can you?

    Lastly, have you thought of having an image in the forms that label what the padding, margins, form container, and so on are? Here’s a copyrighted image I just pulled from the internet (link below), something like this would save a ton of work and time.

    Thanks,
    JL
    Click here for the picture.

  • Pawel Pela
    • Ex Staff

    Hi James Leesley !

    If this was in the form (above), I would’ve been able to make the adjustments right away.

    Please explain a bit more so we can give you a good answer.

    Also, you can’t add CSS like that to the Custom CSS in the form, can you?

    You can add that code in the Appearance section of the form edit screen and it will work and apply the changes to the form correctly (tested on my test site). However, please remember how CSS works – there are priorities describing which rules are applied first, which will override others etc. Please see here if you’re interested in the details: https://css-tricks.com/precedence-css-order-css-matters/

    As for the image you shared, I passed that feedback to the designers so they know we can improve that part of user interface.

    Kind regards,
    Pawel

  • Jamison
    • WPMU top fan!

    Hello,
    I edited the “Appearance” section of the form builder in my browser to show you what I’m talking about concerning giving instructions and an example on how to adjust the width and margins to a form. This would IMMEDIATELY give users the information they need to make adjustments instead of them needing to contact WPMU or do internet searches.

    Blessings,
    JL
    Note: The edit I did in my browser to the form is a bit rudimentary, I was just explaining what I was referring to.

  • Pawel Pela
    • Ex Staff

    Hello again James Leesley !

    Oh, okay – that’s clear now and your screenshot should give the designers a better idea what kind of information may be needed here to make the task a bit easier. It looks to me like a job that could be done by both the designers of the plugin and the documentation team as well.

    We don’t have a reply yet to what I shared with the team making Forminator, I guess we should wait till tomorrow for that.

    Kind regards,
    Pawel

  • Dimitris Kalliris
    • Support Team Lead

    Hey there James Leesley

    An improvement task is created for our devs in order to provide controls in a future release. I really can’t provide any further information about this release though, so please keep an eye in future updates.
    If there’s any further development on this, we’ll keep you posted here. And once more, I really appreciate the request and cooperation here.

    Take care,
    Dimitris

  • Jamison
    • WPMU top fan!

    That’s great to hear! Thank you.

    Can you ping Mohammad Sharab and have him view this forum? I learned something the other day that I wanted to share with him. I contacted WPMU (live chat) and Mohammed was the person I spoke with. I needed to know how I can add “meta language information” to a website without using a plugin. More specifically, I needed to add <meta http-equiv=”content-language” content=”en-US”> to all of the pages. He replied, saying, he talked to other people and they said I would need to make a “child theme.” Upon further investigation, though, I found out that you add the HTML in the header section of the website, via FileZilla.
    Route: site –> public_html –> wp-content –> themes –> (your theme) –> header.php

    (In the image attached to here, you’ll see that I have the html lang twice – as I just decided to leave it there.)

    I was a happy camper when I figured how to do it, I just wanted to share what I learned. : )

    Blessings,
    JL

  • Jamison
    • WPMU top fan!

    Also, can you tell me what the Edit Field –> Styling box is for? Please see the attached. I need to add line-height to this section on the form, I assume you do that here? I know how to write the CSS, but not in here. It doesn’t give an example in the documentation.
    None of these worked:
    line-height: 2.1
    line-height: 2.1;
    {line-height: 2.1}

    Also, as you see in the 2nd image attached to here, I need to add padding to the text area (the word “Message” is too close to the border). Is that something I can add in this box as well?

    Thanks,
    JL
    The page I’m referring to is here.

  • Pawel Pela
    • Ex Staff

    Hi James Leesley !

    Nice! Thanks for sharing! I messaged Mo to check out this ticket :slight_smile:

    The Styling tab has at least those two uses:

    1. Some themes and CSS frameworks have ready-made styles for certain elements on the page, for example form fields. They require the element to have a specific class.

    For example, in Bootstrap 4 (a well known framework) you’d use a “form-control” class along with some additional class to specify the colours, sizes etc.

    Please see an example here: https://getbootstrap.com/docs/4.4/components/forms/

    So you add that class to the Styling tab and the framework will take care of most of the styling.

    That’s actually what is mentioned inside that tab: “Add classes that will be output on this field’s container to aid your theme’s default styling.”

    2. It can be useful when you need to style some of the fields in the form in the same way. You add a common class to all of the fields and you’re able to target all of them with one CSS selector (like .red-form-fields { background: red; } ).

    Hope that helps!

    Kind regards,
    Pawel

  • Jamison
    • WPMU top fan!

    I have another question. As you see in the image attached, there’s a blue box around the text area when you hover over it (you can’t see my cursor hovering over it, they’re not visible in my screenshots). The color is, apparently, the same as the Send Message button (#418DBC), but the background color to the Send Message button is X’d out (see 2nd image). I might’ve talked about this before, I don’t know. Unfortunately though, I don’t remember, nor can find with who or where that conversation is at.

    Thanks,
    JL
    Note: Putting a background to the Send Message button doesn’t change the blue box around the text area.
    Same page: https://www.leesleyfilms.net/our-current-project/apparition-alert/

  • Pawel Pela
    • Ex Staff

    Hello James Leesley !

    That means either there’s no background colour set (ie default will be used or one inherited from the tag enclosing the form).

    OR it could also mean the background is set to transparent colour – the chessboard pattern is there to notify you of that. It’s a commonly used symbol for settings that have transparency/opacity.

    Hope that helps!

    Kind regards,
    Pawel

  • Jamison
    • WPMU top fan!

    Can you tell me the CSS that’ll get rid of that box that appears when you hover over the text area? I’ve tried to find it using Inspect, but to no avail. Just one (permanent) border around the text area, as you see in the attached image, will be fine.

    Thanks,
    JL
    Note: #transparent for the color of the border around the text area doesn’t work.

  • Pawel Pela
    • Ex Staff

    Hi James Leesley !

    Following CSS should fix the double border issue:

    #textarea-1::after {
    border-style: none !important;
    }

    It’s hard to find because it’s a pseudo-element.

    Hope this helps!

    By the way, please open new threads for new issues and requests :slight_smile: Our staff will have an easier time replying and I believe also other members could benefit from solutions being more easily searchable. They won’t have to read through the entire thread if they’re looking for something specific that you’ve already asked :slight_smile:

    Kind regards,
    Pawel