Back button and PayPal buttons collide
-
Hello, I am working on a multi-step payment gateway, everything is perfect until the final stage, as seen in the attached image. Is there a way to put the back button below the paypal button? even with a css or something like that? Thanks in advance
-
Hi @yamill,
Could you please try the following CSS and see whether it helps?
#forminator-module-429 > .forminator-pagination-footer > .forminator-button-back { margin: 20% 5% -11% -21%; order: 2; } #forminator-paypal-submit { order: 1; }
Before the CSS is added, you’ll have to edit the number “429” in the above CSS to your form ID.
You can add the CSS via the default WordPress customizer, under Appearance > Customize > Additional CSS.
If the above CSS doesn’t help much then please share the page URL where you have the form, so that we could check and advise further if needed.
Kind Regards,
NithinThank you very much for answering!, I tried the css but everything becomes a bit chaotic, so I will publish the form better, I only wish that the back button in the final stage of the page is below paypal, not next to it, since I have a custom css that centers paypal in the middle of the screen
The css:
#forminator-module-1693 .forminator-pagination-footer .forminator-button-paypal { top:-15px; margin:0 auto; width:100%; }
This is how it looks (hide the back button) but draw an example of how I would like to leave it:
my form
{"type":"form","data":{"fields":[{"id":"radio-1","element_id":"radio-1","form_id":"wrapper-8449-5516","type":"radio","options":[{"label":"PayPal","value":"PayPal","key":"3589-3227","default":"","image":"","image_filename":""},{"label":"Depósito Bancario","value":"Depósito-Bancario","key":"4455-8354","default":"","image":"","image_filename":""}],"cols":"12","conditions":[],"wrapper_id":"wrapper-8449-5516","value_type":"radio","field_label":"","layout":"vertical","options_bulk_editor":"PayPal; PayPal; 0 Depósito Bancario; Depósito-Bancario; 0","enable_images":"","options_expanded":"1","description":"","required":"1","required_message":"Debes elegir un método de pago"},{"id":"page-break-1","element_id":"page-break-1","form_id":"wrapper-7797-4786","type":"page-break","options":[],"cols":"12","conditions":[],"wrapper_id":"wrapper-7797-4786","btn_left":"? Paso anterior","btn_right":"Paso siguiente ?"},{"id":"name-1","element_id":"name-1","form_id":"wrapper-1048-3481","type":"name","options":[],"cols":"12","conditions":[],"wrapper_id":"wrapper-1048-3481","field_label":"Nombre","placeholder":"","prefix_label":"Prefijo","fname_label":"Nombre","fname_placeholder":"Ejemplo: Juan","mname_label":"Segundo nombre","mname_placeholder":"Ejemplo: Pedro","lname_label":"Apellidos","lname_placeholder":"Ejemplo: Pérez","prefix":"true","fname":"true","mname":"true","lname":"true","required_message":"El nombre es obligatorio.","prefix_required_message":"El prefijo es obligatorio","fname_required_message":"El primer nombre es obligatorio.","mname_required_message":"El segundo nombre es obligatorio.","lname_required_message":"El apellido es obligatorio.","required":"1"},{"id":"email-1","element_id":"email-1","form_id":"wrapper-5417-8812","type":"email","options":[],"cols":"12","conditions":[],"wrapper_id":"wrapper-5417-8812","validation":"1","placeholder":"","field_label":"Correo electrónico","required":"1","validation_message":"Ingresa una dirección de correo válida."},{"id":"phone-1","element_id":"phone-1","form_id":"wrapper-7855-3183","type":"phone","options":[],"cols":"12","conditions":[],"wrapper_id":"wrapper-7855-3183","required":"1","limit":"10","limit_type":"characters","validation":"none","field_label":"Whatsapp","placeholder":"","required_message":"Debes introducir un numero con whatsapp"},{"id":"page-break-2","element_id":"page-break-2","form_id":"wrapper-8294-9916","type":"page-break","options":[],"cols":"12","conditions":[],"wrapper_id":"wrapper-8294-9916","btn_left":"? Paso anterior","btn_right":"Paso siguiente ?"},{"id":"paypal-1","element_id":"paypal-1","form_id":"wrapper-1085-2243","type":"paypal","options":[],"cols":"12","conditions":[{"element_id":"radio-1","rule":"is","value":"PayPal"}],"wrapper_id":"wrapper-1085-2243","mode":"sandbox","currency":"USD","amount_type":"fixed","label":"paypal","color":"silver","shape":"rect","layout":"vertical","tagline":"true","locale":"es_US","debug_mode":"disable","height":"40","amount":"1","credit":"","bancontact":"","blik":"","eps":"","giropay":"","ideal":"","venmo":"","sofort":"","sepa":"","p24":"","mybank":"","mercadopago":"","jcb":"","elo":"","hiper":"","discover":"","billing-details":"true","billing-name":"name-1","billing-email":"email-1","shipping_address":"disable","width":"270","variable":"calculation-1"},{"id":"upload-1","element_id":"upload-1","form_id":"wrapper-4297-5521","type":"upload","options":[],"cols":"12","conditions":[{"element_id":"radio-1","rule":"is","value":"Depósito-Bancario"}],"wrapper_id":"wrapper-4297-5521","field_label":"Adjuntar comprobante de depósito","filetypes":["webp","svg","svgz","png","jpg|jpeg|jpe","pdf"],"file-type":"single","file-limit":"unlimited","upload-limit":"8","filesize":"MB","required":"1","custom-files":"1","use_library":""},{"id":"captcha-1","element_id":"captcha-1","form_id":"wrapper-1637-3785","type":"captcha","options":[],"cols":"12","conditions":[],"wrapper_id":"wrapper-1637-3785","captcha_type":"v3_recaptcha","score_threshold":"0.7","captcha_badge":"bottomright","recaptcha_error_message":"La verificación de reCAPTCHA falló. Inténtalo de nuevo.","language":"es-419","captcha_provider":"recaptcha"}],"settings":{"pagination-header":"nav","paginationData":{"pagination-header-design":"show","pagination-header":"bar","page-break-1-steps":"Paso 1","last-steps":"Finalizar","page-break-2-steps":"Paso 2","page-break-3-steps":"Paso 3","pagination-labels":"default","last-previous":""},"formName":"Copia de Pagos vía depósito","version":"1.15.9","form-border-style":"none","form-padding":"","form-border":"","fields-style":"open","validation":"on_submit","akismet-protection":"0","form-style":"flat","enable-ajax":"true","autoclose":"true","submission-indicator":"show","indicator-label":"Enviando...","form-type":"default","submission-behaviour":"behaviour-redirect","thankyou-message":"<p>Gracias por tu compra! en las próximas 24 horas te enviaré un usuario para que puedas acceder<br />a mi plataforma y disfrutar de tus beneficios!</p>","submitData":{"custom-submit-text":"Enviar mensaje","custom-invalid-form-message":"Error: tu formulario no es válido, ?por favor, corrige los errores!","conditions":[]},"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","form_name":"pagos-via-deposito","form_status":"publish","newtab":"sametab","redirect-url":"https://www.virennyluciano.com/formulario/","cform-color-settings":"true","use-custom-css":"1","custom_css":"/*Orientación vertical del paso a paso*/\r\n.forminator-pagination-steps \r\n{\r\n display: flex;\r\n}\r\n\r\n.forminator-break \r\n{\r\n height: 1px;\r\n -webkit-box-flex: 1;\r\n -ms-flex: 1;\r\n flex: 1;\r\n margin: 7px 0;\r\n}","button-upload-background-static":"#616161","button-upload-background-hover":"#848484","button-upload-background-active":"#848484","button-submit-background-static":"#2c2e2f","button-submit-background-hover":"#616161","button-submit-background-active":"#616161","honeypot":"1","use_ajax_load":"","use_donotcachepage":"1","store":"1","radio-icon":"#ff3333","radio-image-background-active":"","radio-image-border-active":"","radio-background-active":"#ededed"},"client_id":null,"integration_conditions":[],"behaviors":[{"slug":"behavior-1234-4567","label":"","autoclose-time":"5","autoclose":"true","newtab":"sametab","thankyou-message":"<p>Gracias por tu compra! en las próximas 24 horas te enviaré un usuario para que puedas acceder<br />a mi plataforma y disfrutar de tus beneficios!</p>","email-thankyou-message":"","manual-thankyou-message":"","submission-behaviour":"behaviour-redirect","redirect-url":"https://www.virennyluciano.com/"}],"notifications":[{"slug":"notification-1234-4567","label":"Nuevo plan adquirido","email-recipients":"default","recipients":"[email protected]","email-subject":"{name-1} Ha adquirido el \"Plan sé tu mejor versión\"","email-editor":"<p>{all_fields}<br />{upload-1} <br />---<br />este mensaje fue enviado desde {site_url}.</p>","email-attachment":"true","conditions":[],"routing":[]}]},"status":"publish","version":"1.15.9"}
I was also wondering if there is the possibility of creating the custom back button using the same code of the original button included in the pagination, that would be a solution, but I don’t know what php code the button uses to give the back command.
If I knew what the code is I could easily solve it, thanks in advance
Hello @yamill
Please add the following rules in the very bottom of Edit form > Appearance > Custom CSS:
.forminator-pagination-footer { flex-flow: wrap-reverse; } .forminator-pagination-footer .forminator-button-paypal { flex: 0 1 100%; }
Take care,
Dimitrisgreat, this solved my problem, thank you very much for helping
- The topic ‘Back button and PayPal buttons collide’ is closed to new replies.