CMS Development

Theadodds
Participant

Need a form customized

Hey - anyone out there able to help me make a hubspot form look like this?

 

Screen Shot 2021-10-20 at 9.17.40 AM.png

0 Upvotes
7 Replies 7
webdew
Guide | Diamond Partner
Guide | Diamond Partner

Need a form customized

Hi @Theadodds ,

Please follow below steps to get required output in hubspot

 

Select the form field from the selector shown in link https://prnt.sc/1wpeazw

Either select edit if you are having already built form or click on create new for new one as shown in link  https://prnt.sc/1wpej19

If you are creating new give suitable name and click on create as shown in link https://prnt.sc/1wper6q

Customize your form by dragging field  from left hand side to right hand side after that click on update form as shown in link https://prnt.sc/1xa3xfv

After creating form click on copy snippet as shown in link https://prnt.sc/1wpfd21

Paste your copy snippet in HTML+HUBL and publish change and refresh your page for output as shown in link https://prnt.sc/1xa5yuz

 

 Refrence snippet

 

 html+hubl

 

 <div class="form-container">

  {% form

form_to_use="{{ module.form_field.form_id }}"

response_response_type="{{ module.form_field.response_type }}"

response_message="{{ module.form_field.message }}"

response_redirect_id="{{ module.form_field.redirect_id }}"

response_redirect_url="{{module.form_field.redirect_url}}"

gotowebinar_webinar_key="{{ module.form_field.gotowebinar_webinar_key }}"

%}

</div>

 

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>



CSS

 

.form-container {

    position: relative;

    text-align: right;

}

 

.form-container .actions {

    position: absolute;

    right: 0;

    top: 0px;

  opacity: 1;

}

 

.form-container .actions:after {

    color: yellow;

  content: '\f0a9';

  font: normal normal normal 46px/1 FontAwesome;

    pointer-events: none;

    position: absolute;

    right: 38px;

    top: 20px;

    transform: translateY(-50%);

    width: 11px;

   height: 8px;

}

input.hs-button.primary.large {

    opacity: 0;

}

 .form-container form input[type=email]{

    border-radius: 3px;

    max-width: 500px;

    height: 73px;

    padding: 22px 75px 20px 20px;

    box-sizing: border-box;

}


Note:-Please make sure whatever custom module you are creating it should be first added in your template.

Hope this helps!


If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

0 Upvotes
erod
Contributor

Need a form customized

Hey @Theadodds , do you have a link to the page where your form is hosted?

 

Best,

Edgar

Theadodds
Participant

Need a form customized

Hey Edgar - thanks!! The non-hubspot form is at the bottom of this page(on a staging site) and we were hoping to replace with a Hubspot form but styled to match.
0 Upvotes
erod
Contributor

Need a form customized

@Theadodds it's def possible but I think you forget to add the link lol

0 Upvotes
Theadodds
Participant

Need a form customized

0 Upvotes
Theadodds
Participant

Need a form customized

Hey Edgar -- any chance you might be able to help me out with this?  We're happy to pay for it...

erod
Contributor

Need a form customized

Hey @Theadodds , apologies for the delayed response—I can certainly help. Do you want to shoot me an email at Edgar@babegriffey.com?