How to fix a form submission stuck in pending state on Webflow without a redirect URL configured? Answered

Post author
Joseph Bates

Loom

https://www.loom.com/share/f42ba6c488cf48b98da169bf0e49f6f2

I try to submit the form but it gets stuck on pending submission forever. 

How to fix? 

TIA

Joe

Share Link:

https://preview.webflow.com/preview/the-keto-digest-1f872a0619dd6c496e6ba2d?utm_medium=preview_link&utm_source=designer&utm_content=the-keto-digest-1f872a0619dd6c496e6ba2d&preview=43f3869411bec198923b1b0b2d050274&pageId=66561b49bd7b2f600404bb68&locale=en&workflow=preview

Staging Link:

https://the-keto-digest-1f872a0619dd6c496e6ba2d.webflow.io/sign-up/contributor/contributing-profile  

Do I need to add a destination/redirect for that finished profile in order for it to submit properly?

 

Comments

7 comments

  • Comment author
    A J

    Hey Joseph Bates,

    1. I can see the Form Block of this multi-form has data-ms-member="profile" attribute, can you change it to data-ms-form="profile"
    2. The attribute for the last multi-check conditions, which is currently data-ms-member="Conditions" can you make sure you update this again by copying the ID from memberstack dashboard and then placing that as value. Just want to make sure if the ID is "conditions", then its placed as it is instead of any mismatch of cases. Because a mismatch, would mean the selected values won't pass on to the field intended, even if the form is submitted.
    3. I can see that the images section has 3 things setup.
    • The image shown on the side of the file upload section has profile-image from attribute which is going to make sure it always populates the memberstack member's profile image. I am guessing that's not what you want to appear for all image uploads, since that might confuse users to see a different image than the uploaded one. Maybe you can get rid of that if that's not needed.
    • There is a native webflow file upload element in all the image upload sections, which would be fine depending on how you are handling these images in the back-end, but additionally the Upload_button in this element has a memberstack attribute assigned to it: data-ms-action="profile-image", this attribute should be used only when you intend to update the user's profile image, I am guessing as per the use-case you might not want this to happen. So try removing this attribute from the upload buttons which are not intended to act as a profile image. This issue is probably causing the weird behavior when you try to upload files.

    Resolving these should likely bring us close to the solution. So try these out and check if you face any issue still.

    Hope this helps.

    0
  • Comment author
    Joseph Bates

    Good Morning AJ, I did all you specified but then my form disappeared. I noted that if I removed the data-ms-form="profile" completely from the form, it would show up again. I also noted that each image continues to require a double attempt to input. Finally, the submission continues to just show 'in progress.' I put the data-ms-form="profile" back in and the form went blank again. Questions: Do I need to make custom fields for all the inputs on my form, and do I need to keep them in form or CMS profile order [I think I have them set up the same]? Could the issue be a conflict with Formly's multi-step form code and if so how should I resolve that?

    0
  • Comment author
    A J

    Hey Joseph Bates, I just created a test a/c.

    And also when you say the form disappeared, I am assuming you can't see the form if you are logged out in the website, this is an expected behavior, since you would only want logged in users to be able to update their profile. So when I sign up, the contributor profile form shows up as expected. So that part is done.

    And the profile picture input that you have in the initial step of the multi-step profile form, it is recommended to keep that element outside of the form, since it uploads and updates the member without it having to reside in a profile form, just thought to bring to your notice.

    I tried uploading random images to file uploads that come during further steps and now I am not facing any double image upload issue after you removed the memberstack attribute, so maybe you could check once again on incognito mode and test this out.
    These issues, seem resolved to me.

    And regarding your question, it totally depends on your use-case, how did you plan on handling the form submissions, like do you have a back-end automation which will get webflow form submission and update webflow CMS with data, then you don't need to store that in Memberstack. In case you want the data to be stored in Memberstack and connect all the input fields to be updated there, then yes, you would need custom fields for each input in the MS, so that you can add relevant attributes and update the profile there.

    However, I can see that the submit is not yet working. I haven't yet explored Tryformly yet, so am not sure if that's causing an issue here. Maybe I could give it a try and see if it works in a dummy site.

    Just wondering, I can see you are using a link block and a normal button as a Submit button which has tryformly attribute. Could you replace that with an actual Form button from webflow and add the data-form="submit-btn" attribute to it? I can see in tryformly tutorial that for submit, they require to use a form button rather than a normal one. Maybe this could help.

    0
  • Comment author
    Joseph Bates

    I did that? Oops. Yah, I'll check it out. Dude! I just found your template section and am freaking out! So much good stuff there. Oy, wish I had seen that months ago. I'm tempted to get overwhelmed but need to make this happen. I've just paid for the business level here and on Webflow. Talking around $1500 invested and should be live now. I feel like I'm far from it. But, one step at a time I suppose.
    Question. Is the profile pic the only one that needs to be outside the form or will I have a problem with the other images?

    0
  • Comment author
    A J

    Great. Yes, Memberstack does have awesome templates out there.

    And yes only the profile pic needs to be out of the profile form. Rest file uploads, you can handle them as per your requirement as long as they are not connected to the profile image.

    0
  • Comment author
    Joseph Bates

    Thank you. I'm looking at that situation right now. The way this multistep form is setup if I move it above the from, it'll be above the progress bar. Not a pretty UI/UX. Contemplating an alternative.

    Okay, so to be clear. The WF stock upload button will not work with MS??

    0
  • Comment author
    A J

    Hey Joseph Bates, it should work, depending on how you are handling the form submissions. Here's a tutorial to handle file uploads via Webflow and MS.

    0

Please sign in to leave a comment.