Trying to style a contact form like this


#1

Hi

Just trying out Blocs and so far so good. There are some styling issues I am running into while trying to style the form like this one

http://ceda-nepal.com/

How can I change the focus state?

I can link to my site if that helps

thanks


#2

Hi Daniel @danniboy

Not sure what you mean by focus state ? Do you mean hover ?

A link would be great and if you can exactly describe what you would like to achieve from the site ceda-nepal?

MDS


#3

Thanks for your reply

The focus selector

Here is a link to a simplified copy of my project https://www.dropbox.com/s/uj87p3gpan5hj65/test.bloc.zip?dl=0

Here is a screenshot of my form

As far as what I want to copy from the ceda-nepal I want the fields and button (hover in the case of the button) to behave in a similar way ie get a little brighter when active. You can see from my screenshot that the field background turns white and there is this blue border around that I would like to remove. I am sure I could do it manually though.


#4

Okay I had a first look at your file. It appears you have created many custom classes however have not applied them to the correct elements. For instance, you have a class form-input which is applied to DIVs instead of input and a class form applied to input.

You can check on the left hand side where the classes have been applied.

Additionally, you have set your button and text in white whilst the cedar-nepal is set in grey and the hover state in white. You will need to set your button and text in grey for normal state if you want to have the same effect.

Unfortunately, I am pretty busy at this time but willing to send you back a “corrected” file tomorrow if you can wait. Let me know.

MDS


#5

Hi guys,

I didn’t check your project files but made a quick tutorial and a demo .bloc :nerd_face:

Form-style.bloc (199.6 KB)

Cheers / Johny


#6

thank you for making and sharing the video.
The bloc link it not setup correctly


#7

Hi @KBConcepts
What is not setup correctly? :thinking:


#8

Thanks so much. This solves it completely. One final question what about the blue outline of each field you have selected? You can see it around the message field when there are 5 seconds left in the clip

@MDS thanks. Yeah I know the classes are all over the place and its shoddy.


#9

Hi Johny @Jakerlund

@KBConcepts is saying that the link for the bloc does not work - it goes straight to Page not found.

BTW thanks for the video.

MDS


#10

I found it in the console. Its from the Bootstrap styles but I cant find how to override it in Blocs.

box-shadow: 0 0 0 .2rem rgba(201, 255, 5, 0.25);

I figured it out. Its .form-control:focus and normal state.

Am I wrong in thinking that Blocs should show the styles from Bootstrap in the class editor so you can see what you are changing from?


#11

Hi @danniboy and @MDS

The form works fine if you configure the “Send To” field and upload it to your web host.
It won’t work locally since it need php on the server to handle the form.

configure

Here’s how you get rid of that blue “field select” border.

Cheers / Johny


#12

Hi Johny @Jakerlund

I have no issue with your form :wink:

It is the link of the bloc you uploaded in your post that does not work as @KBConcepts pointed out. If we click on the demo bloc link you provided in your post…

we get the following error:

MDS


#13

Hi @MDS

Ok, now i get it.
That’s wierd, it’s just a .bloc file uploaded to this forum.

Lets try it agian… (with the blue selection border removed)

Form-style-2.bloc (200.7 KB)


#14

And here’s a responsive .bloc with the “name” and “e-mail” fields in a two column layout (like the original site) and swapping to a one column layout on mobile.

Form-style-4.bloc (201.1 KB)


#15

Excellent. Thanks


#16

Excellent thread on contact form styling.

Just wondering how to make the option select bric have a white background?

Thanks!