Send button style

This is theme-related. Your theme author should be able to help. If you post a link to your site I’m happy to take a look and make a recommendation.

Always welcome to take a look if you have the time …

The reservation url: https://www.madeleine-oudenburg.be/?page_id=3495
Contact form button: https://www.madeleine-oudenburg.be/?page_id=3528

And as long as you’re making recommendations ;-): how can move the “add a message” field (here “Heb je nog een extra vraag?”) to the left?

Thanks a lot!

Hi Steven,

Try the following CSS code:

.rtb-booking-form button {
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  padding: .4em 1.5em .4em 1.5em;
  color: #fff;
  background: #4d917b;
  border: 2px solid #4d917b;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Open Sans', 'Helvetica Neue', Arial,Verdana,sans-serif;
  text-shadow: none;
  margin-right: 5px;
  text-shadow: none;
  -webkit-appearance: none;
  letter-spacing: 2px;
  box-shadow: 0 0 0 0 !important;
  line-height: 1.5 !important;
  border-radius: 3px;
  -webkit-transition: color .2s linear, background .1s linear, opacity .2s linear;
  -moz-transition: color .2s linear, background .1s linear, opacity .2s linear;
  -ms-transition: color .2s linear, background .1s linear, opacity .2s linear;
  -o-transition: color .2s linear, background .1s linear, opacity .2s linear;
  transition: color .2s linear, background .1s linear, opacity .2s linear;
}

.rtb-booking-form button:hover {
  opacity: 0.8 !important;
}

That’s just some styles copied from the other button. It may need some further tweaking.

Moving the message field over to the left will be more complicated. It looks like you’ve already modified the booking-form.css file to put the two fieldsets into different columns. The Add Message field is part of the second fieldset. To move it out of that fieldset you’d need to modify the $fields array with some PHP code like this:

/**
 * Move the message field into its own fieldset
 * @since 0.0.1
 */
add_filter( 'rtb_booking_form_fields', 'move_message_field', 10, 2 );
function move_message_field( $fields, $request ) {

	$fields['message-set'] = array(
		'fields'	=> array(
			'add-message'	=> $fields['contact']['fields']['add-message'],
			'message'		=> $fields['contact']['fields']['message'],
		)
	);

	unset( $fields['contact']['fields']['add-message'] );
	unset( $fields['contact']['fields']['message'] );

	return array_filter( $fields );
}

Hello!

Any solutions on the ‘Send’ button style? I tried doing it inside the theme files but I couldn’t. Where should I do the modifications?

Thank you very much!

I used the CSS you provided above and changed the color and the font, but it only changed the appeareance of the button in the mobile version. When seeing my website from a computer, the button still shows the old style.