Support » Plugin: Forminator - Contact Form, Payment Form & Custom Form Builder » Make “Street Address” and “Apartment, Suite, Etc” fields side by side

  • Resolved Anthany

    (@scuffed)


    Hi Forminator support,

    I was wondering if it is possible to make the “Street Address” field and the “Apartment, Suite, Etc,” field be side by side? These are the fields I am referring to: https://snipboard.io/Jpjq02.jpg , and would like them to be side by side like every other field is. I know your plugin allows fields to be dragged and dropped side by side but this does not seem to be possible with the address field because it is multiple fields combined in one as shown: https://snipboard.io/35rFPq.jpg . I also tried accomplishing this with CSS but can’t seem to quite get it right. Any ideas?

    Kind regards, Anthany

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Kris – WPMU DEV Support

    (@wpmudevsupport13)

    Hi @scuffed

    I hope you are doing good today.

    Could you export your form, upload it to google drive or dropbox, and share a link in your next reply so that we could take a closer look at this?

    Also, you can share your page URL where the form is located and we will take a look as well.

    Kind Regards,
    Kris

    Thread Starter Anthany

    (@scuffed)

    Hi Kris,

    I am doing well, thank you. I hope you are doing good today as well.

    Yes of course, you may access the exported form at this google drive link: https://drive.google.com/file/d/1HiqvAOkx3Z0o_7fRHQe-DBA3um84gnMt/view?usp=sharing

    And here is the link to the page with the form: https://scuphed.com/form/

    Kind regards, Anthany

    Plugin Support Nithin – WPMU DEV Support

    (@wpmudevsupport11)

    Hi @scuffed,

    There are around 6 fields, trying to fit all six fields side by side will cause responsive issues as it’ll only leave very less space between each field.

    Could you please try the following CSS and see how it goes:

    #address-1 > div {
    	float: left;
    }
    
    #address-1 > div:nth-child(1), #address-1 > div:nth-child(2) {
    	width: 20%;
    }
    
    #address-1 > div:nth-child(3), #address-1 > div:nth-child(4) {
    	width:  33%;
    }

    You can add the CSS via the default WordPress customizer, under Appearance > Customize > Additional CSS.

    Please do let us know how that goes. Looking forward to your response.

    Kind Regards,
    Nithin

    Thread Starter Anthany

    (@scuffed)

    Hi Nithin,

    Actually I was only trying to get the “Street Address” field and the “Apartment, Suite, Etc” field side by side, and using the CSS you provided I was able to do that perfectly! Thank you so much for your help!

    Kind regards, Anthany

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.