Replies: 2
Been playing around with a test calculation form. All is working well, and have now moved on to styling etc. Trying to use the Forminator “Field Group” to separate different fields into 3 columns.
Issue 1: The field groups don’t display in the order they appear in the editor
Issue 2: The field groups don’t appear to be responsive, ie: they don’t appear in 3 columns like they do in the editor, they are 100% width across the page.
Export:
{“type”:”form”,”data”:{“fields”:[{“id”:”html-3″,”element_id”:”html-3″,”form_id”:”wrapper-6305-3328″,”parent_group”:””,”type”:”html”,”options”:[],”cols”:”12″,”conditions”:[],”wrapper_id”:”wrapper-6305-3328″,”field_label”:””,”variations”:”
Turnaround Time:<\/strong><\/h3>”,”formid”:”wrapper-7552-7609″},{“id”:”radio-4″,”element_id”:”radio-4″,”form_id”:”wrapper-8634-5277″,”parent_group”:””,”type”:”radio”,”options”:[{“label”:”Normal”,”value”:”normal-turnaround”,”key”:”2641-3547″,”error”:””,”calculation”:”0″},{“label”:”Rush”,”value”:”rush-turnaround”,”limit”:””,”default”:””,”key”:”6545-2993″,”error”:””,”calculation”:”20″},{“label”:”I Need a Miracle!”,”value”:”miracle-turnaround”,”limit”:””,”default”:””,”key”:”5841-6835″,”error”:””,”calculation”:”40″}],”cols”:”12″,”conditions”:[],”wrapper_id”:”wrapper-8634-5277″,”hidden_behavior”:”zero”,”value_type”:”radio”,”field_label”:”Turnaround Time”,”layout”:”horizontal”,”options_bulk_editor”:”Normal;normal-turnaround; 0\nRush;rush-turnaround; 0\nI Need a Miracle!;miracle-turnaround; 0″,”enable_images”:””,”calculations”:”true”,”description”:””,”options_expanded”:”1″,”custom-class”:”marketing-options”,”formid”:”wrapper-6190-9393″},{“id”:”html-4″,”element_id”:”html-4″,”form_id”:”wrapper-1286-8093″,”parent_group”:””,”type”:”html”,”options”:[],”cols”:”12″,”conditions”:[],”wrapper_id”:”wrapper-1286-8093″,”field_label”:””,”variations”:””,”formid”:”wrapper-7799-1932″},{“id”:”html-2″,”element_id”:”html-2″,”form_id”:”wrapper-1892-9233″,”parent_group”:””,”type”:”html”,”options”:[],”cols”:”12″,”conditions”:[],”wrapper_id”:”wrapper-1892-9233″,”field_label”:””,”variations”:”Additional Services:<\/strong><\/h3>”,”formid”:”wrapper-7915-8689″},{“id”:”checkbox-2″,”element_id”:”checkbox-2″,”form_id”:”wrapper-3024-3455″,”parent_group”:””,”type”:”checkbox”,”options”:[{“label”:”Social Media Ad (Image)”,”value”:”smad-image-marketing”,”key”:”5293-8130″,”error”:””,”calculation”:”200″},{“label”:”Social Media Ad (Video)”,”value”:”smad-video-marketing”,”key”:”4416-9777″,”error”:””,”calculation”:”900″},{“label”:”Letterbox Flyer”,”value”:”lbox-marketing”,”limit”:””,”default”:””,”key”:”6799-4446″,”error”:””,”calculation”:”300″},{“label”:”4 Page Brochure”,”value”:”brochure-marketing”,”limit”:””,”default”:””,”key”:”3385-8656″,”error”:””,”calculation”:”850″}],”cols”:”12″,”conditions”:[],”wrapper_id”:”wrapper-3024-3455″,”hidden_behavior”:”zero”,”value_type”:”checkbox”,”field_label”:”Marketing”,”layout”:”horizontal”,”options_bulk_editor”:”Social Media Ad (Image);smad-image-marketing; 0\nSocial Media Ad (Video);smad-video-marketing; 0\nLetterbox Flyer;lbox-marketing; 0\n4 Page Brochure;brochure-marketing; 0″,”options_expanded”:”1″,”calculations”:”true”,”custom-class”:”services-options”,”formid”:”wrapper-8068-1308″},{“id”:”checkbox-1″,”element_id”:”checkbox-1″,”form_id”:”wrapper-7010-7249″,”parent_group”:””,”type”:”checkbox”,”options”:[{“label”:”Facebook Page”,”value”:”fbpage-services”,”key”:”5293-8130″,”error”:””,”calculation”:”600″},{“label”:”Google Business Listing”,”value”:”gbl-services”,”key”:”4416-9777″,”error”:””,”calculation”:”600″},{“label”:”Brand Logo”,”value”:”logo-services”,”limit”:””,”default”:””,”key”:”5491-1230″,”error”:””,”calculation”:”1000″}],”cols”:”12″,”conditions”:[],”wrapper_id”:”wrapper-7010-7249″,”hidden_behavior”:”zero”,”value_type”:”checkbox”,”field_label”:”Various Services”,”layout”:”horizontal”,”options_bulk_editor”:”Facebook Page;fbpage-services; 0\nGoogle Business Listing;gbl-services; 0\nBrand Logo;logo-services; 0″,”options_expanded”:”1″,”calculations”:”true”,”custom-class”:”services-options”},{“id”:”html-1″,”element_id”:”html-1″,”form_id”:”wrapper-4195-3739″,”parent_group”:””,”type”:”html”,”options”:[],”cols”:”12″,”conditions”:[],”wrapper_id”:”wrapper-4195-3739″,”field_label”:””,”variations”:”Select a Website Type:<\/strong><\/h3>”},{“id”:”radio-2″,”element_id”:”radio-2″,”form_id”:”wrapper-1662-4432″,”parent_group”:””,”type”:”radio”,”options”:[{“label”:”Starter”,”value”:”starter-website”,”key”:”2641-3547″,”error”:””,”calculation”:”2500″},{“label”:”Dynamic”,”value”:”dynamic-website”,”limit”:””,”default”:””,”key”:”6545-2993″,”error”:””,”calculation”:”4000″},{“label”:”Online Shop”,”value”:”shop-website”,”limit”:””,”default”:””,”key”:”5841-6835″,”error”:””,”calculation”:”6000″}],”cols”:”12″,”conditions”:[],”wrapper_id”:”wrapper-1662-4432″,”hidden_behavior”:”zero”,”value_type”:”radio”,”field_label”:”Select A Website Type”,”layout”:”vertical”,”options_bulk_editor”:”Starter;starter-website; 0\nDynamic;dynamic-website; 0\nOnline Shop;shop-website; 0″,”enable_images”:””,”calculations”:”true”,”description”:””,”options_expanded”:”1″,”custom-class”:”marketing-options”,”formid”:”wrapper-1978-2883″},{“id”:”radio-3″,”element_id”:”radio-3″,”form_id”:”wrapper-8704-7028″,”parent_group”:””,”type”:”radio”,”options”:[{“label”:”Essential”,”value”:”essential-seo”,”key”:”2641-3547″,”error”:””,”calculation”:”500″},{“label”:”Basic”,”value”:”basic-seo”,”limit”:””,”default”:””,”key”:”6545-2993″,”error”:””,”calculation”:”950″},{“label”:”Advanced”,”value”:”adv-seo”,”limit”:””,”default”:””,”key”:”5841-6835″,”error”:””,”calculation”:”1500″}],”cols”:”12″,”conditions”:[],”wrapper_id”:”wrapper-8704-7028″,”hidden_behavior”:”zero”,”value_type”:”radio”,”field_label”:”SEO Package”,”layout”:”horizontal”,”options_bulk_editor”:”Essential;essential-seo; 0\nBasic;basic-seo; 0\nAdvanced;adv-seo; 0″,”enable_images”:””,”calculations”:”true”,”description”:””,”options_expanded”:”1″,”custom-class”:”marketing-options”,”formid”:”wrapper-6408-7363″},{“id”:”group-1″,”element_id”:”group-1″,”form_id”:”wrapper-1047-6431″,”parent_group”:””,”type”:”group”,”options”:[],”cols”:”4″,”conditions”:[],”wrapper_id”:”wrapper-1047-6431″,”field_label”:””,”is_repeater”:”false”,”group_styles”:”custom”},{“id”:”group-2″,”element_id”:”group-2″,”form_id”:”wrapper-1047-6431″,”parent_group”:””,”type”:”group”,”options”:[],”cols”:”4″,”conditions”:[],”wrapper_id”:”wrapper-1047-6431″,”field_label”:””,”is_repeater”:”false”,”group_styles”:”custom”},{“id”:”group-3″,”element_id”:”group-3″,”form_id”:”wrapper-1047-6431″,”parent_group”:””,”type”:”group”,”options”:[],”cols”:”4″,”conditions”:[],”wrapper_id”:”wrapper-1047-6431″,”field_label”:””,”is_repeater”:”false”,”group_styles”:”custom”},{“id”:”calculation-1″,”element_id”:”calculation-1″,”form_id”:”wrapper-2093-3023″,”parent_group”:””,”type”:”calculation”,”options”:[],”cols”:”12″,”conditions”:[],”wrapper_id”:”wrapper-2093-3023″,”hidden_behavior”:”zero”,”field_label”:”TOTAL:”,”prefix”:”$”,”separators”:”comma_dot”,”formula”:”({radio-2}+{radio-3}+{checkbox-2}+{checkbox-1})+((({radio-2}+{radio-3}+{checkbox-2}+{checkbox-1})\/100){radio-4})”}],”settings”:{“pagination-header”:”nav”,”paginationData”:{“pagination-header-design”:”show”,”pagination-header”:”nav”},”formName”:”Test Select Form”,”version”:”1.31.0″,”form-border-style”:”none”,”form-padding”:””,”form-border”:””,”fields-style”:”open”,”field-image-size”:”custom”,”validation”:”on_submit”,”akismet-protection”:”0″,”form-style”:”default”,”enable-ajax”:”true”,”autoclose”:”true”,”submission-indicator”:”show”,”indicator-label”:”Submitting…”,”form-type”:”default”,”submission-behaviour”:”behaviour-thankyou”,”thankyou-message”:”Thank you for contacting us, we will be in touch shortly.”,”submitData”:{“custom-submit-text”:”Send Message”,”custom-invalid-form-message”:”Error: Your form is not valid, please fix the errors!”,”conditions”:[{“element_id”:”select-1″,”rule”:”is”,”value”:””}],”condition_action”:”show”,”condition_rule”:”all”,”custom-class”:”hide-my-btn”},”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”:”16″,”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”,”store_submissions”:”1″,”form_name”:”test-select-form”,”form_status”:”publish”,”notification_count”:1,”previous_status”:”publish”,”use-custom-css”:”1″,”sc_email_link”:”1″,”sc_message”:”Your form has been saved as draft and a resume link has been generated so you can return to the form anytime within {retention_period} days from today. Copy and save the link or enter your email address below to have the link sent to your mail.<\/p>These fields weren’t saved to your submission draft: Paypal, Stripe, Signature, Password, Captcha, and Upload. Kindly fill them out before submitting the form.<\/p>”,”custom_css”:”\/ Styling for radio buttons in the specific form \/\n.marketing-options .forminator-radio input ~ .forminator-radio-label {\n background-color: lightgrey !important;\n padding: 10px 10px;\n margin-left: 0px;\n margin-top: 5px;\n width: 100%;\n}\n\n.marketing-options .forminator-radio input ~ .forminator-radio-label:hover {\n background-color: red !important;\n padding: 10px 10px;\n}\n\n.marketing-options .forminator-radio input:checked ~ .forminator-radio-label {\n background-color: green !important;\n}\n\n.marketing-options .forminator-radio .forminator-radio-bullet {\n display: none !important;\n}\n\n\/ Styling for radio buttons in the specific form *\/\n.services-options .forminator-checkbox input ~ .forminator-checkbox-label {\n background-color: lightgrey !important;\n padding: 10px 10px;\n margin-left: 0px;\n margin-top: 5px;\n width: 100%;\n}\n\n.services-options .forminator-checkbox input ~ .forminator-checkbox-label:hover {\n background-color: red !important;\n padding: 10px 10px;\n}\n\n.services-options .forminator-checkbox input:checked ~ .forminator-checkbox-label {\n background-color: green !important;\n}\n\n.services-options .forminator-checkbox .forminator-checkbox-box {\n display: none !important;\n}\n\n\n\n\n.et-db #et-boc .et_pb_module .forminator-ui.forminator-custom-form[data-design=default] .forminator-radio:not(.forminator-radio-inline), .forminator-ui.forminator-custom-form[data-design=default] .forminator-radio:not(.forminator-radio-inline) {\n margin: 0px 0;\n}\n.forminator-ui.forminator-custom-form[data-design=default] .forminator-radio.forminator-radio-inline {\n margin-right: 5px;\n margin-top: 0px;\n}\n.et-db #et-boc .et_pb_module .forminator-ui.forminator-custom-form[data-design=default] .forminator-checkbox:not(.forminator-checkbox-inline), .forminator-ui.forminator-custom-form[data-design=default] .forminator-checkbox:not(.forminator-checkbox-inline) {\n margin: 0px 0;\n}\n.forminator-ui.forminator-custom-form[data-design=default] .forminator-checkbox.forminator-checkbox-inline {\n margin-right: 5px;\n margin-top: 0px;\n}\n\n\n\ndiv.forminator-input.forminator-input-with-prefix {\n border-color: #ffffff;\n background-color: #ffffff;\n border: 0px !important;\n color: #000000;\n}\n\nspan.forminator-prefix {\n font-size: 30px;\n}\n\ninput.forminator-calculation {\n font-size: 34px;\n}\n\n\n.hide-my-btn {\n display: none;\n}”,”field-border”:””,”spacing”:”5″,”form-font-family”:””},”client_id”:null,”integration_conditions”:[],”behaviors”:[{“slug”:”behavior-1234-4567″,”label”:””,”autoclose-time”:”5″,”autoclose”:”true”,”newtab”:”sametab”,”thankyou-message”:”Thank you for contacting us, we will be in touch shortly.”,”email-thankyou-message”:””,”manual-thankyou-message”:””,”submission-behaviour”:”behaviour-thankyou”,”redirect-url”:””}],”notifications”:[{“slug”:”notification-1234-4567″,”label”:”Admin Email”,”email-recipients”:”default”,”recipients”:”jamie@jphdesigns.com.au”,”email-subject”:”New Form Entry #{submission_id} for {form_name}”,”email-editor”:”You have a new website form submission:
{all_fields}
—
This message was sent from {site_url}.”,”email-attachment”:”true”,”type”:”default”,”conditions”:[]}]},”status”:”publish”,”version”:”1.31.0″}