How to Connect Form Created Outside ASM to ASM animal #1585
-
|
Hi everyone! I've created an adoption application form outside of ASM as an html file. It is using JavaScript to connect to the ASM API and pull animalname and sheltercode so applicant's can select the animal they want to adopt. It is successful in displaying this, so I know it's successfully connecting to the API. The goal is to then be able to attach the submitted application to the selected animal. ASM has the option to do this using their forms, but you can't style their form (reference: https://sheltermanager.com/repo/asm3_help/onlineform.html). Is it possible to automatically import the submitted form using my code and not using ASM's form? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 3 replies
-
|
Why do you think you can't style the ASM forms? They are straight HTML, and you have full control over the HTML header portion of the document with the ability to add any CSS or Javascript you like - plus all of our form elements have CSS classes for styling them as you like with style tags/sheets. Use the Edit Header/Footer button on the Edit Online Forms screen to change the global header/footer for all forms and custom code/CSS. Each form also has its own header and footer that you can use to add extra script or style tags if you prefer. |
Beta Was this translation helpful? Give feedback.
-
|
I see where to style the header/footer, but I'm unsure where to style the form itself. Would I style the form in the "description" section of the form? I initially attempted that, but couldn't figure out how to connect the CSS styling to the form fields, so I just ended up with duplicate buttons, specifically the submit button. |
Beta Was this translation helpful? Give feedback.
-
|
I've attached example images of how I'd want the form to function (i.e., navigation tabs up top, flex-styled form fields, and a styled submit button). Is this possible using ASM's interface? |
Beta Was this translation helpful? Give feedback.
-
|
It's possible, but you'd have to write some fairly advanced code to move the elements around in the DOM. This approach seems like a recipe for having form submitters accidentally miss out sections, is there a reason that you'd choose to do this over a regular form that they scroll top to bottom with subheadings? In answer to your question about the description field, you would put your script and style tags in the header field of the form if they are specific to that form. You can put general styling and scripts that apply to all forms in the global form header with the Edit Header/Footer button. |
Beta Was this translation helpful? Give feedback.
-
|
The shelter I'm volunteering for requested it to do that since the form they're currently using does that, but I'll suggest keeping it as one scrollable page to avoid user confusion. Also, inserting my code in the header seems to work, thank you so much! |
Beta Was this translation helpful? Give feedback.
It's possible, but you'd have to write some fairly advanced code to move the elements around in the DOM. This approach seems like a recipe for having form submitters accidentally miss out sections, is there a reason that you'd choose to do this over a regular form that they scroll top to bottom with subheadings?
In answer to your question about the description field, you would put your script and style tags in the header field of the form if they are specific to that form. You can put general styling and scripts that apply to all forms in the global form header with the Edit Header/Footer button.