Style a embed element

Hi fellow designers!

I have made a website in Webflow and use a HTML embed form to send job applications to the Software of my client. They provided me with an embed code, but have no styling options within their back-end. So we have to do it in Webflow. However, I am little experienced in css styling on a raw HTML embed. How can i manage to do this?

jobboard-application-form
form-id=“ApplicationForms-1-A”
vacancy-id=“Variable”
api-base-url=“https://salesfreaks.recruitnowcockpit.nl/jobsite
success=“window.location.href =‘/solliciteren/bedankt-voor-je-sollicitatie’”
apply-btn-text=“Solliciteer”>

Thanks in advance!


Here is my site Read-Only:(Webflow - SalesFreaks)

Can you provide your live website with the form with its standard design please?

Hey Alexis,

Check the following link: Vacature Accountmanager bij vermogensbeheerder Ostrica - Amstelveen

Thank you

Hey,

Thank you for sharing…

Do you have a design or image with the design you would like to have? So I can make it to you :smiley:

If you could make it like the contact form: Contact that would be a-ma-zing!

Hey Alexissilva, have you got any news :slight_smile:

Heeey, yees!

I will send you the code that you need to set in the custom body of the page where you have the form. I would ask something before, connect with me on linkedin, set this comment as solution if it worked and then, lets adjust and talk on linkedin :smiley: if needed
https://www.linkedin.com/in/alexis-matos/

<style>
  .rnFormWrapper,
  .rnFormContainer,
  .rnTitlePrefix,
  .rnVacancyTitle {
    width: 100%;
  }
  .rnFormGroup {
    margin-top: 1rem;
  }
  .rnLabel {
    display: none;
  }
  .rnFormControl {
    height: auto;
    width: 30%;
    color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    margin-bottom: 0;
    padding: 0.25rem 0.75rem;
    font-size: 1rem;
    line-height: 1.6;
  }
  .rnFileUpload > input {
    display: block;
  }

  .rnagree-privacy {
    margin-top: 1rem;
  }

  .rnButton {
    margin-top: 1rem;
    color: #fff;
    border: none;
    cursor: pointer;
    text-align: center;
    background-color: #4085a3;
    border-radius: 5rem;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 500;
    transition: transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1),
      box-shadow 1s cubic-bezier(0.075, 0.82, 0.165, 1),
      transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    transform: scale(1.1) translate(0);
    box-shadow: 0 5px 5px rgba(16, 24, 40, 0.07);
  }

  .rnButton:hover {
    transform: translate(0, -5px);
    box-shadow: 0 10px 10px rgba(16, 24, 40, 0.15);
  }

  input[type="checkbox"] {
    accent-color: black;
  }
</style>

Lets keep contact on linkedin, so if you need any more help, you can contact me or we can even work together in some projects if you want :smiley:

It worked awesomely! THanks very much. Can I be of value in some other way for you?

Just the last checkbox line is not showing. Can you please explain how to get this to show?

Also, is there any way to set the form width @ 100% of screensize?

Just keep contact on linkedin if we need again or if you need some hand for another work :smiley:

Can you please publish it again and send me the link?

Sure! Weblink: Vacature Accountmanager bij vermogensbeheerder Ostrica - Amstelveen

Read-only link: Webflow - SalesFreaks

Try this one now

<style>
  .rnFormWrapper,
  .rnFormContainer,
  .rnTitlePrefix,
  .rnVacancyTitle {
    width: 100%;
  }
  .rnFormGroup {
    margin-top: 1rem;
  }
  .rnLabel {
    display: none;
  }
  .rnFormControl {
    height: auto;
    width: 100%;
    color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    margin-bottom: 0;
    padding: 0.25rem 0.75rem;
    font-size: 1rem;
    line-height: 1.6;
  }
  .rnFileUpload > input {
    display: block;
  }

  .rnagree-privacy {
    margin-top: 1rem;
    display: block;
    align-items: end;
  }

  .rnwhatsapp-consent {
    display: block;
  }

  .rnagree-privacy > .rnLabel,
  .rnwhatsapp-consent > .rnLabel {
    display: block;
  }

  .rnwhatsapp-consent > .rnFieldWrap {
    display: flex;
  }

  .rnButton {
    margin-top: 1rem;
    color: #fff;
    border: none;
    cursor: pointer;
    text-align: center;
    background-color: #4085a3;
    border-radius: 5rem;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 500;
    transition: transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1),
      box-shadow 1s cubic-bezier(0.075, 0.82, 0.165, 1),
      transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    transform: scale(1.1) translate(0);
    box-shadow: 0 5px 5px rgba(16, 24, 40, 0.07);
  }

  .rnButton:hover {
    transform: translate(0, -5px);
    box-shadow: 0 10px 10px rgba(16, 24, 40, 0.15);
  }

  input[type="checkbox"] {
    accent-color: black;
  }
</style>

Awesome! It works now. Thank you very much for your time!

1 Like

Thank you Hans, if needed any help, let me know, you have my linkedin :smiley:

Set my comment as solution, so the forum can close it!

have a nice!