Style a embed element

Design help Custom code
1

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)

2

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

3

Hey Alexis,

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

Thank you

4

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:

5

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

6

Hey Alexissilva, have you got any news :slight_smile:

7

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:

8

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

9

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?

10

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?

11

Sure! Weblink: Vacature Accountmanager bij vermogensbeheerder Ostrica - Amstelveen

Read-only link: Webflow - SalesFreaks

12

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>
13

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

14

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!