Form in 2 columns

Hi @minsbe,

Forminator comes with the option to arrange the fields in rows by dragging the fields as seen in the following example:

Screenshot at 18:26:38.png

I’m afraid there isn’t any out of the box setting to get the exact layout as you have shared in the given URL. However, it’s possible to achieve the mentioned layout via custom CSS.

So once you have the form created please do follow up in this thread, so that we could check and see whether we could provide a CSS or not.

Looking forward to your response.

Kind Regards,
Nithin

Hi Nithin.

Thanks for anwering.

The form is already active at the bottom of the page https://www.boogle.eu/

Thanks for helping. ??

Min’s

Hello @minsbe,

I see the form does not look to be arranged as my colleague Nithin suggested. Could you please export the form and send it to us here so that we could check this furthermore deeply? to export the form, please navigate to your site admin Dashboard-> Forminator-> Forms-> Click the gear icon on the extreme right of the form name and hit the export button.

Do remember to strip off any/ all confidential information from the form like email id’s and any other stuff which would be sensitive.

You can upload the form on the Google Drive, Dropbox or Pastebin and link that to us here.

Thank you,
Prathamesh Palve

Hi Prathamesh and thank you for answering.

Indeed, I forgot to save and publish the new form. ??

It’s done now.

Here is the exported version.

Thanks for helping

Min’s

{“type”:”form”,”data”:{“fields”:[{“id”:”name-4″,”element_id”:”name-4″,”form_id”:”wrapper-1511347711918-1669″,”type”:”name”,”options”:[],”cols”:6,”conditions”:[],”wrapper_id”:”wrapper-1511347711918-1669″,”field_label”:”Nom”,”placeholder”:””,”prefix_label”:”Préfixe”,”fname_label”:”Nom”,”fname_placeholder”:”Par exemple?: ??Jean??”,”mname_label”:”Deuxième prénom”,”mname_placeholder”:”Par exemple?: ??Dupont??”,”lname_label”:”Prénom”,”lname_placeholder”:”Par exemple?: ??Dupont??”,”prefix”:”true”,”fname”:”true”,”mname”:”true”,”lname”:”true”,”required_message”:”Le nom est obligatoire”,”prefix_required_message”:”Le préfixe est obligatoire.”,”fname_required_message”:”Le nom est obligatoire.”,”mname_required_message”:”Le deuxième prénom est obligatoire.”,”lname_required_message”:”Le prénom est obligatoire.”,”required”:true},{“id”:”textarea-1″,”element_id”:”textarea-1″,”form_id”:”wrapper-1511347711918-1669″,”type”:”textarea”,”cols”:6,”required”:false,”field_label”:”Message”,”placeholder”:”Saisissez votre message…”,”input_type”:”paragraph”,”limit”:”180″,”limit_type”:”characters”,”wrapper_id”:”wrapper-1511347711918-1669″,”conditions”:[],”default”:””,”default-height”:”100″},{“id”:”name-1″,”element_id”:”name-1″,”form_id”:”wrapper-1250-2356″,”type”:”name”,”cols”:12,”required”:false,”field_label”:”Prénom”,”placeholder”:””,”prefix_label”:”Préfixe”,”fname_label”:”Nom”,”fname_placeholder”:”Par exemple?: ??Jean??”,”mname_label”:”Deuxième prénom”,”mname_placeholder”:”Par exemple?: ??Dupont??”,”lname_label”:”Prénom”,”lname_placeholder”:”Par exemple?: ??Dupont??”,”wrapper_id”:”wrapper-1250-2356″,”multiple_name”:”false”,”fname”:true,”lname”:true,”conditions”:[],”condition_action”:”show”,”condition_rule”:”all”,”fname_required”:true},{“id”:”email-1″,”element_id”:”email-1″,”form_id”:”wrapper-1511347712118-1739″,”type”:”email”,”cols”:12,”required”:”true”,”field_label”:”Adresse de messagerie”,”placeholder”:””,”validation”:true,”validation_text”:””,”wrapper_id”:”wrapper-1511347712118-1739″,”conditions”:[]},{“id”:”captcha-1″,”element_id”:”captcha-1″,”form_id”:”wrapper-2872-4499″,”type”:”captcha”,”options”:[],”cols”:12,”conditions”:[],”wrapper_id”:”wrapper-2872-4499″,”captcha_type”:”v2_checkbox”,”score_threshold”:”0,5″,”recaptcha_error_message”:”La vérification reCAPTCHA a échoué, veuillez réessayer.”},{“id”:”gdprcheckbox-1″,”element_id”:”gdprcheckbox-1″,”form_id”:”wrapper-7053-122″,”type”:”gdprcheckbox”,”options”:[],”cols”:12,”conditions”:[],”wrapper_id”:”wrapper-7053-122″,”required”:”true”,”field_label”:”Accord RGPD”,”gdpr_description”:”<p>Je consens à ce que mes informations, envoyées via ce formulaire soient utilisées pour répondre à ma demande.?</p>”,”required_message”:”Ce champ est obligatoire, veuillez cocher la case.”}],”settings”:{“pagination-header”:”nav”,”paginationData”:{“pagination-header-design”:”show”,”pagination-header”:”nav”},”formName”:”contact”,”version”:”1.14.0″,”form-border-style”:”none”,”form-padding”:””,”form-border”:””,”fields-style”:”custom”,”validation”:”on_submit”,”form-style”:”default”,”enable-ajax”:”true”,”autoclose”:”true”,”submission-indicator”:”show”,”indicator-label”:”Soumission en cours…”,”form-type”:”default”,”submission-behaviour”:”behaviour-thankyou”,”thankyou-message”:”Merci de nous avoir contacté, nous reviendrons vers vous sous peu.”,”submitData”:{“custom-submit-text”:”Envoyer le message”,”custom-invalid-form-message”:”Erreur?: votre formulaire n’est pas valide, veuillez corriger les erreurs?!”},”validation-inline”:”1″,”form-expire”:”no_expire”,”form-padding-top”:”0″,”form-padding-right”:”0″,”form-padding-bottom”:”0″,”form-padding-left”:”0″,”form-border-width”:”0″,”form-border-radius”:”0″,”cform-label-font-family”:”Roboto”,”cform-label-custom-family”:””,”cform-label-font-size”:”12″,”cform-label-font-weight”:”bold”,”cform-title-font-family”:”Roboto”,”cform-title-custom-family”:””,”cform-title-font-size”:”45″,”cform-title-font-weight”:”normal”,”cform-title-text-align”:”left”,”cform-subtitle-font-family”:”Roboto”,”cform-subtitle-custom-font”:””,”cform-subtitle-font-size”:”18″,”cform-subtitle-font-weight”:”normal”,”cform-subtitle-text-align”:”left”,”cform-input-font-family”:”Roboto”,”cform-input-custom-font”:””,”cform-input-font-size”:”12″,”cform-input-font-weight”:”normal”,”cform-radio-font-family”:”Roboto”,”cform-radio-custom-font”:””,”cform-radio-font-size”:”14″,”cform-radio-font-weight”:”normal”,”cform-select-font-family”:”Roboto”,”cform-select-custom-family”:””,”cform-select-font-size”:”16″,”cform-select-font-weight”:”normal”,”cform-multiselect-font-family”:”Roboto”,”cform-multiselect-custom-font”:””,”cform-multiselect-font-size”:”16″,”cform-multiselect-font-weight”:”normal”,”cform-dropdown-font-family”:”Roboto”,”cform-dropdown-custom-font”:””,”cform-dropdown-font-size”:”16″,”cform-dropdown-font-weight”:”normal”,”cform-calendar-font-family”:”Roboto”,”cform-calendar-custom-font”:””,”cform-calendar-font-size”:”13″,”cform-calendar-font-weight”:”normal”,”cform-button-font-family”:”Roboto”,”cform-button-custom-font”:””,”cform-button-font-size”:”14″,”cform-button-font-weight”:”500″,”cform-timeline-font-family”:”Roboto”,”cform-timeline-custom-font”:””,”cform-timeline-font-size”:”12″,”cform-timeline-font-weight”:”normal”,”cform-pagination-font-family”:””,”cform-pagination-custom-font”:””,”cform-pagination-font-size”:”16″,”cform-pagination-font-weight”:”normal”,”payment_require_ssl”:””,”submission-file”:”delete”,”form_name”:”contact”,”form_status”:”publish”,”cform-color-settings”:”true”,”button-submit-background-active”:”#f58223″,”button-submit-background-static”:”#f58223″,”button-submit-background-hover”:”#f46e00″,”honeypot”:”1″,”form-font-family”:”custom”,”cform-description-font-size”:”12″,”cform-description-font-family”:”Roboto”,”cform-description-font-weight”:”900″,”spacing”:”1″},”client_id”:null,”notifications”:[{“slug”:”notification-1234-4567″,”label”:”Admin Email”,”email-recipients”:”default”,”recipients”:”[email protected]”,”email-subject”:”Nouvelle entrée de formulaire n°{submission_id} pour {form_name}”,”email-editor”:”<p>Vous avez une nouvelle soumission de formulaire?: <br />{all_fields} <br />—<br />Ce message a été envoyé depuis {site_url} {user_ip}.</p>”,”email-attachment”:”true”,”cc-email”:”{email-1}”,”replyto-email”:”{email-1}”,”form-email”:””}]},”status”:”publish”,”version”:”1.14.0″}

Hello @minsbe,

I did try to import the form but looks like it has some unwanted blank spaces or characters which is why the import was not successful. Could you please upload the exported file to Google Drive, Dropbox or Pastebin (https://pastebin.com/) and link that to us? I also prepared a form on our end and added the required CSS to make it work. Here is the form: https://pastebin.com/TPhYrYPK you can try to import the same on your end and check if that works for you.

Thank you,
Prathamesh Palve

Hi @wpmudev-support7 Prathamesh Palve,

I pastebined hte export.

https://pastebin.com/eXjkuK03

Your custom CSS worked on your form almost like I wanted. I’d like the textarea be high enough to fit thos whole availaible height.

Thanks for helping.

Min’s

Hi @minsbe

Could you please try this form?

https://pastebin.com/qvFjAir1

The CSS is already located on the form.

In case the CSS applied on Form > appearance doesn’t work, you can use on WordPress custom CSS or Theme CSS field if it has.

I only suggest adding the form ID to make sure it only select the correct form.

https://monosnap.com/file/7jWIWkuqdmhCUy5YZpcr2pWKNNXkgV

From this, I believe you can work on some media queries in case you would like to modify the mobile view.

To find more about CSS grid:
https://css-tricks.com/snippets/css/complete-guide-grid/

Best Regards
Patrick Freitas

Hi @minsbe

I hope you are doing well.

We haven’t heard from you in a while, I’ll go and mark this thread as resolved.

However, feel free to let us know if you have any additional question or problem.

Best Regards
Patrick Freitas