Job Application Form

Hello,

So my client is trying to create a job search website. He has an existing one, but it’s outdated and not mobile friendly.

I’m creating a new version on webflow, but I’m trying to incorporate his old features of the site, namely, the online application form.

In his old site, based on which page the viewer clicked “apply” on, it would auto populate the form field to show which job the viewer was applying to.

I have been playing around with several CMS option, where perhaps I can get it to “auto select” But I haven’t been able to find a workaround.

In order to create a list of applicants and a page showing a detailed info of the application, I connected it to Zapier, so it would create a new CMS page based on the submission form. It works quite flawlessly and I highly recommend using Zapier for automating anything that relates to forms & cms!

The only thing I can’t get is the “selected job” potion of it to work! Does any know of any workaround?

It seems like someone previously wanted this feature as well, but there was no proposed solution so I thought I’d nudge it:


Here is my public share link: LINK
(how to access public share link)

You did not share a link to your site where I could review what you are doing. But I will take a shot at a solution anyway.

Scenario : A visitor is on a Collection Item Page. See’s a job listing, hits the “Apply Now” button. Modal opens with form (or is just on the page). Embedded in the form (HTML Embed) is a visible or hidden field. The value of the field is set to a collection item field. Now on submit, the value is passed to you, and it was auto-populated by the dynamic field you selected (job#, or Job Name …).

Is that what you a looking for?

Wow I’m so sorry! I did not realize someone had replied!

Here is the shared link: https://preview.webflow.com/preview/corepay?utm_source=corepay&preview=76acbbef184faf7a18cc1f7f5421aada

Page: “View All Jobs” > Click on a job > Form below the job description.

I found an embed code where the form will output the end portion of the pathname. And if you look at the “Applicants” link on the bottom, you will see in one of test applicants page, and on the top right you’ll see the “applied for” section. But it’d be nice to have a cleaner look than the pathname. Since i’m trying to automate it.

Thoughts?

Wow! Great job application form you have there. I’m trying to figure out something similar to your problem as well. I might ask you for some advice on the Zapier connection you mentioned.

You can use any field’s value you want for the form’s field value. You just can’t use dynamic binding in a symbol. Unlink the form from the symbol.

CloudApp

Like @webdev answer with a visual guide (For other users).

This idea works like magic (One line of code):

Under Jobs collection page form:

  1. Add embed code
  2. Paste this code
<input type="hidden" name="Job" value="{{webflow-feild-her}}"/>
  1. Set the value to webflow “name” (Name of the job)

  2. Set CSS display to none:
    image

  3. Done :slight_smile:

Publish.

Fill up the form:
Under forms you find the “new” Job column.

2 Likes

@Siton_Systems & @webdev

WOW you guys are AWESOME! :partying_face::partying_face::confetti_ball::confetti_ball:

I didn’t know you can add dynamic binding within an HMTL embed!! And thanks for that tip on the “symbols”!! You guys are amazing. What a simple solution!

@PhilRubio honestly i’m just playing with it as I go. I’m trying to keep track of what I’m doing so I don’t forget in the future. But here’s a basic rundown:

  • Make sure you keep the names for each field correctly in the settings. Don’t create duplicate forms cuz then it starts adding numbers and throws everything off.
  • Make sure you have the exact fields in the CSS section you want so they show up when you’re connecting zappier
  • Fill out a test form
  • Zappier is very easy to use. Connect your webflow, select the site, select the form, select the sample form you just filled out, select the fields in CSS you want to connect to your form individually (this is why naming them properly will help). They will send a test version, in which you can check on your CSS page to see how it came out.
  • Click “live” on zappier, and you’re done! just beware that they have limited free interactions, so use them wisely, and use the “test” version as often as you need to vs. the live version.